CodePen Embed - DOM Manipulation Report Card

<head>
  <title>JavaScript Bootcamp Report Card</title>
</head>

<body>
  <img id="js-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1024px-Unofficial_JavaScript_logo_2.svg.png">
  <h1>Codepath JavaScript</h1>
  <h2>Report Card 2021-2022</h2>

  <div class="student-info">
    <h3 id="student-name">{{STUDENT_NAME}}</h3>
    <p id="student-grade-level">{{STUDENT_GRADE}}</p>

    <div>
      <p><span>Advisor:</span> {{STUDENT_ADVISOR}}</p>
      <p><span>Major:</span> Life Skillz</p>
      <p class="student-graduation-year"><span>Graduation Year:</span> 2031</p>
    </div>
  </div>

  <div class="report-card">
    <header>
      <h2>Grades</h2>
    </header>
    <main>
      <div class="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>

      <div>
        <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="lett-col">B+</h4>
        <h4 id="gpa1" class="pts-col">?</h4>
      </div>

      <div>
        <h4 class="code-col">CS 50</h4>
        <h4 class="name-col">Intro to Computer Science</h4>
        <h4 class="sem-col">Spring 2021</h4>
        <h4 class="cred-col"><span className="credit">5</span> credits</h4>
        <h4 class="lett-col">A-</h4>
        <h4 id="gpa2" class="pts-col">?</h4>
      </div>

      <div>
        <h4 class="code-col">WD 140</h4>
        <h4 class="name-col">Web Development for the Modern Era</h4>
        <h4 class="sem-col">Spring 2021</h4>
        <h4 class="cred-col"><span className="credit">5</span> credits</h4>
        <h4 class="lett-col">A+</h4>
        <h4 id="gpa3" class="pts-col">?</h4>
      </div>

      <div>
        <h4 class="code-col">JS 2.0</h4>
        <h4 class="name-col">Serverside JavaScript</h4>
        <h4 class="sem-col">Spring 2021</h4>
        <h4 class="cred-col"><span className="credit">10</span> credits</h4>
        <h4 id='D' class="lett-col">A</h4>
        <h4 id="gpa4" class="pts-col">?</h4>
      </div>

      <div class="totals">
        <h4></h4>
        <h4></h4>
        <h4>Totals:</h4>
        <h4 id="total-credits"> ? credits </h4>
        <h4></h4>
        <h4 id="total-pts">?</h4>
      </div>

      <div class="gpa">
        <h4></h4>
        <h4></h4>
        <h4>GPA:</h4>
        <h4></h4>
        <h4></h4>
        <h4 id="gpa"> ?</h4>
      </div>

    </main>
  </div>
</body>

@import url('https://fonts.googleapis.com/css?family=Montserrat');

html, body, h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
}

:root {
  --color-bg-blue:    rgb(232, 241, 248);
  --color-watermelon: rgb(248, 6, 82);
  --color-dark-blue:  rgb(16, 28, 40);
  --color-sky-blue:   rgb(173, 196, 214);
  --color-cloth-blue: rgb(34, 47, 62);
}


body {
  font-family: Montserrat;
  padding: 0.5rem;
  background: var(--color-bg-blue);
}
#js-logo {
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: 0;
  right: 0;
}
body > h1 {
  color: var(--color-cloth-blue);
  display: inline-block;
  border-bottom: solid 3px var(--color-watermelon);  
}
.student-info {
  margin: 1.5rem 0;
  background: var(--color-cloth-blue);
  color: white;
  width: 19.5rem;
  padding: 1rem;
  border-radius: 4px 
}
.student-info > p {
  margin-bottom: 1rem;
}
.student-info p span {
  font-weight: bold;
  font-size: 1.1rem;
}
.report-card {
  min-width: 500px
}
.report-card header h2 {
  display: inline-block;
  border-bottom: solid 3px var(--color-watermelon); 
}
main {
  margin-top: 1rem;
}
main div {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr 
}
main div h4 {
  padding: 0.5rem;
}
main .table-header {
  border-bottom: solid 2px var(--color-watermelon);
  background: var(--color-sky-blue);
}
main .totals {
  border-top: solid 2px var(--color-watermelon);
  font-size: 1.2rem;
}
main .gpa {
  border-top: solid 2px var(--color-watermelon);
  font-size: 1.2rem;  
}

/*

COMPLETE THE FOLLOWING TASKS WITHOUT MODIFYING ANY OF THE CODE IN THE HTML OR CSS FILE.

You should only write code in the JavaScript functions below, as well as the object with your student information.

Each function is annotated with a comment explaining what it should do.

By the end of the lab, there shouldn't be any question marks left on the report card.


*/

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",
}

const gpaPointsLookup = {
  "A+": 4.0,
  "A": 4.0,
  "A-": 3.7,
  "B+": 3.3,
  "B": 3.0,
  "B-": 2.7,
  "C+": 2.3,
  "C": 2.0,
  "C-": 1.7,
  "D+": 1.3,
  "D": 1.0,
  "D-": 0.7,
  "F": 0.0
}

/**
 * Modify the report card to display the correct grade level from the lookup table above.
 * 
 * @param {String} studentName - the name of the student
 */
function updateStudentName(studentName) {
  // code goes here
}

/**
 * Modify the report card to display the correct grade level from the lookup table above.
 * 
 * @param {String|Number} studentGradeLevel - the grade level of the student
 */
function updateStudentGradeLevel(studentGradeLevel) {
  // code goes here
}

/**
 * Modify the report card to display the correct advisor from the lookup table above.
 * 
 * @param {String} studentAdvisor - the advisor of the student
 */
function updateStudentAdvisor(studentAdvisor) {
  // code goes here
}

/**
 * Modify the report card to display the correct major from the lookup table above.
 * 
 * @param {String} studentMajor - the major of the student
 */
function updateMajor(studentMajor) {
  // code goes here
}

/**
 * Modify the report card to display the correct graduation year from the lookup table above
 * 
 * @param {Number} graduationyear - the year the student graduates
 */
function updateStudentGraduationYear(graduationyear) {
  // code goes here
}

/**
 * Use query selectors to access the credits the student has earned for each course. 
 * Add them up and display the total in the proper location.
 * 
 */
function addUpStudentCredits() {
  // code goes here
}

/**
 * Use query selectors to access the letter grades for each course and convert them to GPA points using
 * the `pointsLookup` object.
 * 
 * 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.
 * 
 * Then perform a quick calculation and update the report card with the total points and 
 * cumulative grade point average for the semester.
 * 
 */
function calculateSemesterGpa() {
  // code goes here
}

/**
 * This function should run as soon as the page loads
 */
function populateReportCard({ name, grade, advisor, major, graduationYear }) {
  updateStudentName(name)
  updateStudentGradeLevel(grade)
  updateStudentAdvisor(advisor)
  updateMajor(major)
  updateStudentGraduationYear(graduationYear)
  addUpStudentCredits()
  calculateSemesterGpa()
}

window.onload = function() {
  populateReportCard(studentInformation)
}

This Pen is owned by Jeff Astor on CodePen.

See more by @jastor11-the-decoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.