Loops: Walk an Array with for…of

The previous lesson stored your skills as an array. This lesson walks that array with for…of and builds the skill cards on the page from the data.

The concept

Here is your page with the skills array already in the script. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <p class="tagline"></p>
      <button type="button" class="change-tagline btn">Change tagline</button>
      <button type="button" class="theme-toggle btn">Toggle theme</button>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row">
          <li class="skill-card">HTML</li>
          <li class="skill-card">CSS</li>
          <li class="skill-card">JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      const pageOwner = "Your Name";
      const skillCount = 3;
      console.log(pageOwner);
      console.log(skillCount);
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      function showAltTagline() {
        setTagline("Learning in public");
      }
      setTagline("Building things for the web");
      const changeButton = document.querySelector(".change-tagline");
      changeButton.addEventListener("click", showAltTagline);
      let theme = "light";
      function toggleTheme() {
        if (theme === "dark") {
          document.body.classList.remove("theme-dark");
          theme = "light";
        } else {
          document.body.classList.add("theme-dark");
          theme = "dark";
        }
      }
      const themeButton = document.querySelector(".theme-toggle");
      themeButton.addEventListener("click", toggleTheme);
      const skills = ["HTML", "CSS", "JavaScript"];
      console.log(skills.length);
      console.log(skills[0]);
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

The CONSOLE still shows the length and the first skill. The three cards in Skills are still hard-coded HTML. You are about to make the list come from the array.

Run this tiny page:

FOR…OF BUILDS THE LIST · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Three cards appear. The HTML list started empty. The script created each li, set its text, and appended it. Click a card: the CONSOLE prints that skill. Each handler was wired inside the same loop pass that built the card.

for (const skill of skills) walks the array. On each pass, skill holds one string. The block runs once per item.

Building one element looks like this:

CREATEELEMENT, TEXTCONTENT, APPEND · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

document.createElement("li") makes a new list item in memory. textContent sets the visible text. append puts that item into the list on the page.

This path uses textContent, not innerHTML, for the card text.

The syntax

const skills = ["HTML", "CSS", "JavaScript"];
const skillRow = document.querySelector(".skill-row");
 
for (const skill of skills) {
  const item = document.createElement("li");
  item.classList.add("skill-card");
  item.textContent = skill;
  item.addEventListener("click", function () {
    console.log(skill);
  });
  skillRow.append(item);
}

for (const value of array) runs the block once per item.

createElement builds an element. append attaches it.

A function defined inside the loop keeps that pass's variables, so each card's handler remembers its own skill.

Give each card the skill-card class so your existing CSS still applies.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Skills from a loop</title>
  </head>
  <body>
    <ul class="skill-row"></ul>
    <script>
      const skills = ["HTML", "CSS", "JavaScript"];
      const skillRow = document.querySelector(".skill-row");
      for (const skill of skills) {
        const item = document.createElement("li");
        item.classList.add("skill-card");
        item.textContent = skill;
        item.addEventListener("click", function () {
          console.log(skill);
        });
        skillRow.append(item);
      }
    </script>
  </body>
</html>

An empty list in the markup. A loop that fills it. One card per array item.

Common mistakes

You leave the hard-coded cards and also append. Run this:

HARD-CODED ITEMS STAY · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Six cards appear. The original three stayed in the HTML. The loop added three more. Remove the three hard-coded <li> elements from .skill-row so the list starts empty before the loop runs.

You append to the wrong container. You select #skills or body instead of .skill-row. New items land outside the flex row, or nested under the section heading. Select the ul with class skill-row, the same list that held the hard-coded cards.

You reach for innerHTML to inject the skill string. Putting text that people typed into innerHTML is unsafe, and the safe pattern comes later. For this lesson, set textContent on an element you created.

Try it yourself

Render your skill cards from the array. Confirm each step in the preview. After each Run, scroll the preview to Skills if you do not see the cards yet. The header and About sit above them, so the list can land below the fold.

Run the starting code below. Confirm the change-tagline and theme-toggle buttons still work. Scroll the preview to Skills if you do not see it yet. Confirm Skills still shows the hard-coded cards (one per skill name in the HTML), and the CONSOLE still shows the array length and first skill.
In the HTML, delete every <li class="skill-card"> line inside .skill-row, leaving an empty <ul class="skill-row"></ul>. Do not add a new list. Run it. Scroll to Skills. Confirm the Skills section has a heading and no cards yet.
Below your skills array logs in the script, select .skill-row into a variable. Write a for (const skill of skills) loop that creates an li, adds the class skill-card with classList.add, sets textContent to skill, listens for "click" with a function that console.logs skill, and appends the item to the list. Run it. Scroll to Skills. Confirm the cards return, one per item in your skills array. Click each card. Confirm the CONSOLE prints that card's own skill string.
Change one string in the skills array and Run again. Scroll to Skills. Confirm the cards follow the array, not old hard-coded HTML.
Break it on purpose: put the hard-coded <li> elements back into the HTML while leaving the loop in place. Run it. Scroll to Skills. Confirm twice as many cards as the array alone (original HTML cards plus the loop). Remove the hard-coded items again and confirm one card per array item.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Your skill cards now come from the array. The next lesson groups labeled fields into objects, including turning each skill into an object with a name.