Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                @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;  
}

              
            
!

JS

              
                /*

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)
}
              
            
!
999px

Console