diff --git a/data.json b/data.json index 9920819..4920511 100644 --- a/data.json +++ b/data.json @@ -5,35 +5,45 @@ "rol": "Verified Graduate", "studentImage" : "./images/image-daniel.jpg", "resume":"I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.", - "testimonial": "I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup." + "testimonial": "I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup." , + "color": "hsl(263, 55%, 52%)", + "colorFont" : "hsl(0, 0%, 100%)" }, { "studentName" : "Jonathan Walters", "rol": "Verified Graduate", "studentImage" : "./images/image-jonathan.jpg", "resume":"The team was very supportive and kept me motivated", - "testimonial": "I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. " + "testimonial": "I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. " , + "color": "hsl(217, 19%, 35%)", + "colorFont" : "hsl(0, 0%, 100%)" }, { "studentName" : "Jeanette Harmon", "rol": "Verified Graduate", "studentImage" : "./images/image-jeanette.jpg", "resume":"An overall wonderful and rewarding experience", - "testimonial": "Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love." + "testimonial": "Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love." , + "color": "hsl(0, 0%, 100%)", + "colorFont" : "black" }, { "studentName" : "Patrick Abrams", "rol": "Verified Graduate", - "studentImage" : "./images/image-Patrick.jpg", + "studentImage" : "./images/image-patrick.jpg", "resume":"Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.", - "testimonial": "The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of smart and amazing people." + "testimonial": "The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of smart and amazing people.", + "color" : "hsl(219, 29%, 14%)", + "colorFont" : "hsl(0, 0%, 100%)" }, { "studentName" : "Kira Whittle", "rol": "Verified Graduate", "studentImage" : "./images/image-Kira.jpg", "resume":"Such a life-changing experience. Highly recommended!", - "testimonial": "Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend!" + "testimonial": "Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend!", + "color": "hsl(0, 0%, 100%)" , + "colorFont" : "black" } ] } \ No newline at end of file diff --git a/index.js b/index.js index f28c75a..21c1363 100644 --- a/index.js +++ b/index.js @@ -10,21 +10,40 @@ getElements(data => { data.forEach(element => { let section = document.createElement("section"); section.classList.add("testimonial-container"); - let div = document.createElement("div"); - div.classList.add("student-info") - let h1 = document.createElement("h1"); - h1.textContent = element.studentName; - let p = document.createElement("p"); - p.textContent = element.rol; - div.appendChild(h1); - div.appendChild(p); + section.classList.add(element.studentName.toLowerCase().replace(/ /g, '-')) + + let divInfo = document.createElement("div"); + divInfo.classList.add("student-info") + let divText = document.createElement("div"); + divText.classList.add("text"); + divInfo.appendChild(divText); + + let imageStudent = document.createElement("img"); + imageStudent.src = element.studentImage; + let h1Name = document.createElement("h1"); + h1Name.textContent = element.studentName; + let pRol = document.createElement("p"); + pRol.textContent = element.rol; + divInfo.appendChild(imageStudent); + divText.appendChild(h1Name); + divText.appendChild(pRol); + + let pResume = document.createElement("p"); let bResume = document.createElement("b"); bResume.textContent = element.resume; - let qTestimonial = document.createElement("b"); + pResume.appendChild(bResume) + + let pTestimonial = document.createElement("p"); + let qTestimonial = document.createElement("q"); qTestimonial.textContent = element.testimonial; - section.appendChild(div) + pTestimonial.appendChild(qTestimonial); + + section.appendChild(divInfo) section.appendChild(bResume); section.appendChild(qTestimonial); + + section.style.backgroundColor = element.color; + section.style.color = element.colorFont; main.appendChild(section); }); }) \ No newline at end of file diff --git a/style.css b/style.css index e69de29..d2b6257 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,75 @@ +@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +:root{ + --Moderateviolet: hsl(263, 55%, 52%); + --VerydarkGrayishblue: hsl(217, 19%, 35%); + --VerydarkBlackishblue: hsl(219, 29%, 14%); + --White: hsl(0, 0%, 100%); + --BackgroundBody: hsl(213, 44%, 95%); +} +*{ + margin: 0; + box-sizing: border-box; + font-family: "Barlow Semi Condensed"; +} + + +.student-info, .testimonial-container{ + display: flex; +} + +body{ + justify-content: center; + align-items: center; + background-color: var(--BackgroundBody); + height: 100dvh; + padding: 2em; +} + +main{ + display: grid; + /* grid-template-columns: repeat(fill-content, minmax(10em, 1fr)); */ + /* width: 80%; */ + /* align-items: center; */ + grid-template-columns: repeat(4, 1fr); + /* grid-auto-rows: minmax(12em, auto); */ + grid-auto-flow: dense; + grid-gap: 20px +} + + +.testimonial-container{ + flex-direction: column; + justify-content: space-around; + padding: 1.3rem; + border-radius: 8px; + .student-info{ + flex-direction: row-reverse; + justify-content: start; + align-items: center; + .text{ + padding-left: 10px; + } + } + h1{ + font-size: 18px; + } + p{ + font-size: 14px; + } + img{ + border-radius: 50% ; + } +} +.daniel-clifford{ + grid-column: auto / span 2; +} +.kira-whittle{ + grid-row: auto / span 2; +} +.jeanette-harmon{ + grid-column: 1 /span 1; +} +.patrick-abrams{ + grid-column: auto /span 2; +} +