Development

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -83,7 +83,7 @@ <h4 class="pts-col">Points</h4>
             <h4 class="code-col">LIT 101</h4>
             <h4 class="name-col">English Literature 101</h4>
             <h4 class="sem-col">Spring 2021</h4>
-            <h4 class="cred-col"><span className="credit">5</span> credits</h4>
+            <h4 class="cred-col"><span class="credit">5</span> credits</h4>
             <h4 class="lett-col gpa">B+</h4>
             <h4 id="gpa-1" class="pts-col">?</h4>
           </div>

script.js

@@ -10,12 +10,12 @@ By the end of the lab, all tests in the report should be passing.
 */
 
 const studentInformation = {
-  name: "FILL_IN_YOUR_NAME_HERE",
-  grade: "FILL_IN_YOUR_GRADE_HERE",
-  advisor: "FILL_IN_YOUR_ADVISOR_HERE",
-  major: "FILL_IN_YOUR_MAJOR_HERE",
-  graduationYear: "FILL_IN_YOUR_GRADUATION_YEAR_HERE",
-  imageUrl: "ADD_A_URL_TO_ANY_IMAGE_HERE",
+  name: "Pharell Williams",
+  grade: "Senior",
+  advisor: "Kanye West",
+  major: "Mathematics and Astrophysics",
+  graduationYear: "2025",
+  imageUrl: "pharell.jpg",
 }
 
 let semester = "Spring Semester"
@@ -59,6 +59,18 @@ const gpaPointsLookup = {
  * QUERY SELECTORS VARIABLES GO HERE
  */
 const dropdownEl = document.querySelector(".dropdown")
+const studName = document.querySelector("#student-name");
+const studGrade = document.querySelector("#student-grade-level");
+const studAdvisor = document.querySelector("#student-advisor");
+const studMajor = document.querySelector("#student-major");
+const studYear = document.querySelector("#student-graduation-year");
+const studImage = document.querySelector("#student-image");
+const reportCardTableElem = document.querySelector(".report-card");
+const dropdownLabelElement = document.querySelector(".dropdown-label");
+const dropdownButton = document.querySelector(".dropdown-button");
+const fallSemesterElem = document.querySelector("#fall-semester");
+const springSemesterElem = document.querySelector("#spring-semester");
+const winterTermElem = document.querySelector("#winter-term");
 // ADD more query selectors here
 
 /**
@@ -71,7 +83,7 @@ const dropdownEl = document.querySelector(".dropdown")
  * @param {String} studentName - the name of the student
  */
 function updateStudentName(studentName) {
-  // code goes here
+  studName.innerHTML = studentName;
 }
 
 /**
@@ -80,7 +92,7 @@ function updateStudentName(studentName) {
  * @param {String|Number} studentGradeLevel - the grade level of the student
  */
 function updateStudentGradeLevel(studentGradeLevel) {
-  // code goes here
+  studGrade.innerHTML = studentGradeLevel;
 }
 
 /**
@@ -89,7 +101,7 @@ function updateStudentGradeLevel(studentGradeLevel) {
  * @param {String} studentAdvisor - the advisor of the student
  */
 function updateStudentAdvisor(studentAdvisor) {
-  // code goes here
+  studAdvisor.innerHTML = studentAdvisor;
 }
 
 /**
@@ -98,7 +110,7 @@ function updateStudentAdvisor(studentAdvisor) {
  * @param {String} studentMajor - the major of the student
  */
 function updateMajor(studentMajor) {
-  // code goes here
+  studMajor.innerHTML = studentMajor;
 }
 
 /**
@@ -107,7 +119,7 @@ function updateMajor(studentMajor) {
  * @param {Number} graduationyear - the year the student graduates
  */
 function updateStudentGraduationYear(graduationYear) {
-  // code goes here
+  studYear.innerHTML = graduationYear;
 }
 
 /**
@@ -117,19 +129,19 @@ function updateStudentGraduationYear(graduationYear) {
  * @param {String} url - a link to an image
  */
 function updateStudentImage(imageUrl) {
-  // code goes here
+  studImage.setAttribute("src", imageUrl);
 }
 
 /**
  * This function should run as soon as the page loads and update the correct student info
  */
 function populateStudentInfo(studentInformationObject) {
-  updateStudentName(studentInformationObject.name)
-  updateStudentGradeLevel(studentInformationObject.grade)
-  updateStudentAdvisor(studentInformationObject.advisor)
-  updateMajor(studentInformationObject.major)
-  updateStudentGraduationYear(studentInformationObject.graduationYear)
-  updateStudentImage(studentInformationObject.imageUrl)
+  updateStudentName(studentInformationObject.name);
+  updateStudentGradeLevel(studentInformationObject.grade);
+  updateStudentAdvisor(studentInformationObject.advisor);
+  updateMajor(studentInformationObject.major);
+  updateStudentGraduationYear(studentInformationObject.graduationYear);
+  updateStudentImage(studentInformationObject.imageUrl);
 }
 
 /**
@@ -141,7 +153,14 @@ function populateStudentInfo(studentInformationObject) {
  */
 function addReportCardHeaders(reportCardTableElement) {
   // update the code here
-  reportCardTableElement.innerHTML += ``
+  reportCardTableElement.innerHTML += `<div class="table-row table-header">
+    <h4 class="code-col">Code</h4>
+    <h4 class="name-col">Name</h4>
+    <h4 class="sem-col">Semester</h4>
+    <h4 class="cred-col">Credits</h4>
+    <h4 class="lett-col">Letter</h4>
+    <h4 class="pts-col">Points</h4>
+  </div>`
 }
 
 /**
@@ -155,23 +174,42 @@ function addCourseRowToReportCard(reportCardTableElement, course, rowNum) {
   // update the code here with information about the course passed to this function
   reportCardTableElement.innerHTML += `
   <div class="table-row course-row row-${rowNum + 1} ${rowNum % 2 === 1 ? "odd" : "even"}">
-
+    <h4 class="code-col">${course.code}</h4>
+    <h4 class="name-col">${course.name}</h4>
+    <h4 class="sem-col">${course.semester}</h4>
+    <h4 class="cred-col"><span class="credit">${course.credits}</span> credits</h4>
+    <h4 class="lett-col gpa">${course.grade}</h4>
+    <h4 id="gpa-${rowNum + 1}" class="pts-col">${gpaPointsLookup[course.grade]}</h4>
   </div>
-  `
+  `;
 }
 
 /**
  * This function should add HTML for the totals row in the report card.
  */
 function addTotalsRow(reportCardTableElement) {
-  reportCardTableElement.innerHTML += ``
+  reportCardTableElement.innerHTML += `<div class="table-row totals even">
+  <h4 class="code-col"></h4>
+  <h4 class="name-col"></h4>
+  <h4 class="sem-col">Totals: </h4>
+  <h4 id="total-credits" class="cred-col"> ? credits </h4>
+  <h4 class="lett-col"></h4>
+  <h4 id="total-pts" class="pts-col"> ?</h4>
+</div>`
 }
 
 /**
  * This function should add HTML for the final row in the report card.
  */
 function addGpaRow(reportCardTableElement) {
-  reportCardTableElement.innerHTML += ``
+  reportCardTableElement.innerHTML += `<div class="table-row gpa odd">
+  <h4 class="code-col"></h4>
+  <h4 class="name-col"></h4>
+  <h4 class="sem-col">GPA:</h4>
+  <h4 class="cred-col"></h4>
+  <h4 class="lett-col"></h4>
+  <h4 id="gpa" class="pts-col"> ?</h4>               
+</div>`
 }
 
 /**
@@ -182,11 +220,22 @@ function addGpaRow(reportCardTableElement) {
  */
 function updateReportCard(reportCardTableElement, currentSemester) {
   // update the dropdown label
-  updateDropdownLabel()
+  updateDropdownLabel();
   // reset the report card table's inner html to an empty string
-  if (reportCardTableElement) reportCardTableElement.innerHTML = ``
+  if (reportCardTableElement) reportCardTableElement.innerHTML = ``;
+
+  addReportCardHeaders(reportCardTableElement);
+
+  const courses = studentData[currentSemester];
+
+  for (let i=0; i < courses.length; i++) {
+    addCourseRowToReportCard(reportCardTableElement, courses[i], i);
+  }
 
-  // add your code here
+  addTotalsRow(reportCardTableElement);
+  addGpaRow(reportCardTableElement);
+  addUpStudentCredits(reportCardTableElement);
+  calculateSemesterGpa(reportCardTableElement);
 }
 
 /**
@@ -200,11 +249,11 @@ function updateReportCard(reportCardTableElement, currentSemester) {
  * If the dropdown classList doesn't contain the "closed" class, 'closeDropdown' function should add it.
  */
 function closeDropdown(dropdownElement) {
-  // code goes here
+  dropdownElement.classList.add('closed');
 }
 
 function openDropdown(dropdownElement) {
-  // code goes here
+  dropdownElement.classList.remove('closed');
 }
 
 /**
@@ -213,7 +262,7 @@ function openDropdown(dropdownElement) {
  *
  */
 function updateDropdownLabel() {
-  // code goes here
+  dropdownLabelElement.innerHTML = semester;
 }
 
 /**
@@ -230,9 +279,31 @@ function addEventListeners(
   winterTermElement
 ) {
   // Add an event listener for the dropdown button that calls the openDropdown function with the correct DOM element
+  dropdownButtonElement.addEventListener("click", () => {
+    if (dropdownElement.classList.contains('closed')) {
+      openDropdown(dropdownElement);
+    } else {
+      closeDropdown(dropdownElement);
+    }
+  })
   // Add 3 event listeners - one for the fall semester option, the spring semester option, and the winter term option
   // Each callback function one should update the `semester` variable,
   // call the `updateReportCard` function, and close the dropdown
+  fallSemesterElement.addEventListener('click', () => {
+    semester = "Fall Semester";
+    updateReportCard(reportCardTableElement, semester);
+    closeDropdown(dropdownElement);
+  })
+  springSemesterElement.addEventListener('click', () => {
+    semester = "Spring Semester";
+    updateReportCard(reportCardTableElement, semester);
+    closeDropdown(dropdownElement);
+  })
+  winterTermElement.addEventListener('click', () => {
+    semester = "Winter Term";
+    updateReportCard(reportCardTableElement, semester);
+    closeDropdown(dropdownElement);
+  })
 }
 
 /***************
@@ -249,7 +320,10 @@ function addEventListeners(
  *
  */
 function addUpStudentCredits(reportCardTableElement) {
-  // code goes here
+  let creditElems = Array.from(reportCardTableElement.querySelectorAll(".credit")).filter((credit) => credit.innerHTML != "");
+  const creditSum = creditElems.reduce((sum, elem) => sum + parseInt(elem.innerHTML), 0);
+
+  reportCardTableElement.querySelector('#total-credits').innerHTML = creditSum + " credits";
 }
 
 /**
@@ -266,9 +340,18 @@ function addUpStudentCredits(reportCardTableElement) {
  */
 
 function calculateSemesterGpa(reportCardTableElement) {
-  // code goes here
+  let grades = Array.from(reportCardTableElement.querySelectorAll('.gpa')).filter((grade) => grade.innerHTML in gpaPointsLookup);
+  const totalPoints = grades.reduce((total, grade) => total + gpaPointsLookup[grade.innerHTML], 0.0);
+
+  let gpa = (totalPoints / grades.length).toFixed(2);
+
+  reportCardTableElement.querySelector('#total-pts').innerHTML = totalPoints;
+  reportCardTableElement.querySelector('#gpa').innerHTML = gpa;
 }
 
 window.onload = function () {
   // execute your functions here to make sure they run as soon as the page loads
+  addEventListeners(dropdownEl, dropdownButton, reportCardTableElem, fallSemesterElem, springSemesterElem, winterTermElem);
+  populateStudentInfo(studentInformation);
+  updateReportCard(reportCardTableElem, semester);
 }