Your college has realized their report card generating system is broken! They've reached out to Site to see if interns would be willing to help them fix it.
At the moment they have the styling and general layout fixed, but they're missing valid JavaScript. Your job is to modify the script.js
file with code that produces a working report card generator. They've sent over your grades for the year to use as a model.
Here are the goals they've outlined for their report card generator:
- Fill in the
studentInformation
with all of your student information. - Use
document.querySelector
to save references to various HTML elements on the page. Those elements should include:- The student name
span
- The student advisor
span
- The student major
span
- The student grade
span
- The student graduation year
span
- The student-image
img
- The semester dropdown
div
- The semester dropdown
h2
button - The semester dropdown label
span
- The "fall-semester"
span
in the dropdown menu - The "spring-semester"
span
in the dropdown menu - The "winter-term"
span
in the dropdown menu - The "report-card-table"
div
- A few others...
- The student name
Example:
const dropdown = document.querySelector(".dropdown")
- Use the
studentInformation
object and update the inner html of student info section with your user data. Use the following functions to complete this section:updateStudentName
updateStudentGradeLevel
updateStudentAdvisor
updateMajor
updateStudentGraduationYear
updateStudentImage
Example:
function updateStudentName(studentName) {
studentNameElement.innerHTML = studentName
}
- Fill in the functions for updating the report card table with the proper html. Each function should add to the inner HTML of the
report-card-table
element. - It might be useful to start by looking at the functions that will be used to recreate the table:
addReportCardHeaders
addCourseRowToReportCard
addTotalsRow
addGpaRow
- Each of these will be responsible for creating the HTML for different sections of the table, and then inserting them into the
#report-card-table
div. Make sure to use the already existing HTML as a guide (in some cases you'll barely need to change anything!). - Once you've finished writing those functions, make sure to call them from within the
updateReportCard
function with the appropriate course for the current semester. Remember that the current semester is stored in thesemester
variable!
- Add a
click
event listener to the dropdown button that toggles the dropdown using thetoggleDropdown
function. This should open or close the dropdown menu. - Add
click
event listeners to each of these three items:- fall-semester span
- spring-semester span
- winter-term span
- When any of the dropdown menu items are clicked the event listener callback should change the
semester
variable to the correct semester, call theupdateReportCard
function, and finally call thetoggleDrodpown
function. - Modify the
updateDropdownLabel
function so that the inner HTML of the dropdown label is set to the value of thesemester
variable.
When this section is complete, you should be able to click on a new semester in the dropdown and see an entirely different set of courses, grades, and info in the report card table.
- Use additional query selectors to access the credits the student has earned for each course. Add them up and display the total in the proper location.
- Use query selectors to access the letter grades for each course and convert them to GPA points using the
pointsLookup
object. - Then perform a quick calculation and update the report card with the total points and cumulative grade point average for the semester.
- Update the
addUpStudentCredits
andcalculateSemesterGpa
functions to store procedures for these updates. Then make sure to call them at the end of theupdateReportCard
function. Also ensure that theupdateReportCard
function is called as soon as the page loads.
- That English Literature grade is keeping us from all A's! Let's see if we can't update that to an A- since we definitely deserve it after a hard semester of work. Use query selectors and inner HTML to update that after all other updates have been run. DONT CHANGE THE GRADES OBJECT ITSELF!
- Inside the
window.onload = function ()
block, add whatever functions should be run on page load to complete your report card generator!
Automated tests will run each time you save your work. Update the script.js
file until all the tests are passing and you have 30 green checkmarks!