Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


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


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.


Save Automatically?

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.


                <h1>Report Card</h1>
<h3 class="hs"></h3>
<p>Student Name: <span class="student">Your Name Here</span></p>
<p class="message">Message about students performance</p>
  <li id="science">Physics, <span class="grade">TBD</span></li>
  <li id="math">Calculus 2, <span class="grade">TBD</span></li>
  <li id="language-arts">English Literature, <span class="grade">TBD</span></li>

<p><span class="student">Your Name Here</span> is <span id="status">student status.<span></p>


  font-family: sans-serif;

  text-align: center;

.message {
  text-decoration: underline;


                var studentReportCard = {
  name: "Sabrina Spellman",
  class: "walter johnson hs",
  science: "D",
  math: "F+",
  "language-arts": "E",
  status: "barely passing",
  message: "We have serious concerns about your child's performance"

document.addEventListener('onload', onLoadStudentInfo() );

function onLoadStudentInfo() {
  // set class info
  document.querySelector(".hs").innerText = studentReportCard.class;
  // set student name at top and bottom
  var studentNames = document.querySelectorAll(".student")
  for(var i = 0; i < studentNames.length; i++) {
    studentNames[i].innerText =;

  // set report card message
  document.querySelector(".message").innerText = studentReportCard.message;
  // set grades
  var grades = document.querySelectorAll(".grade");
  grades[0].innerText =;
  grades[1].innerText = studentReportCard.math;
  grades[2].innerText = studentReportCard["language-arts"];
  // set student status
  document.querySelector("#status").innerText = studentReportCard.status;

// Looking for extra work?
// 1. onLoadStudentInfo is one big function being called on page load! Is there a way we can refactor so the onLoadStudentInfo is not as big?
// 2. Make a button that accepts a new student name from the user. Make a function that first updates the studentReportCard object and then resets the html on the report card with the new student name.
//3. Extra challenge! How could you change the data model to hold the class name and the grade (i.e. "Physics" and "D"). How could you loop through the class list and update both the class name and the grade. Hint: you'll need to use the ids of the li elements to access the corresponding studentReportCard properties. You'll also have to look up some ways to change elements inside elements.