diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1661131..1f30a6f 100644
--- a/index.html
+++ b/index.html
@@ -83,7 +83,7 @@ Points
LIT 101
English Literature 101
Spring 2021
- 5 credits
+ 5 credits
B+
?
diff --git a/pharell.jpg b/pharell.jpg
new file mode 100644
index 0000000..7fb2120
Binary files /dev/null and b/pharell.jpg differ
diff --git a/script.js b/script.js
index 59b9b99..67c17a3 100644
--- a/script.js
+++ b/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 += ``
}
/**
@@ -155,23 +174,42 @@ function addCourseRowToReportCard(reportCardTableElement, course, rowNum) {
// update the code here with information about the course passed to this function
reportCardTableElement.innerHTML += `
-
+
${course.code}
+ ${course.name}
+ ${course.semester}
+ ${course.credits} credits
+ ${course.grade}
+ ${gpaPointsLookup[course.grade]}
- `
+ `;
}
/**
* This function should add HTML for the totals row in the report card.
*/
function addTotalsRow(reportCardTableElement) {
- reportCardTableElement.innerHTML += ``
+ reportCardTableElement.innerHTML += `
+
+
+ Totals:
+ ? credits
+
+ ?
+`
}
/**
* This function should add HTML for the final row in the report card.
*/
function addGpaRow(reportCardTableElement) {
- reportCardTableElement.innerHTML += ``
+ reportCardTableElement.innerHTML += `
+
+
+ GPA:
+
+
+ ?
+`
}
/**
@@ -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);
}