Accumulation: Count Matches with a Running Total

The previous lesson made the contact form answer with a thanks line. This lesson counts how many skills match a role and shows that total on the page.

The concept

Here is your page with object skills and form thanks. 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"></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>
        <p class="form-feedback"></p>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      function showAltTagline() {
        setTagline("Learning in public");
      }
      const profile = {
        name: "Your Name",
        tagline: "Building things for the web",
      };
      const heading = document.querySelector("h1");
      heading.textContent = profile.name;
      setTagline(profile.tagline);
      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 = [
        { name: "HTML", role: "Structure" },
        { name: "CSS", role: "Look" },
        { name: "JavaScript", role: "Behaviour" },
      ];
      const skillRow = document.querySelector(".skill-row");
      for (const skill of skills) {
        const item = document.createElement("li");
        item.classList.add("skill-card");
        item.textContent = skill.name;
        skillRow.append(item);
      }
      const contactForm = document.querySelector("form");
      const nameInput = document.querySelector("#name");
      const feedback = document.querySelector(".form-feedback");
      function showThanks(event) {
        event.preventDefault();
        feedback.textContent = "Thanks, " + nameInput.value;
      }
      contactForm.addEventListener("submit", showThanks);
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

Skill cards still build from the loop. The form still shows thanks. There is no summary under the skills list yet.

Run this tiny page:

COUNT MATCHING SKILLS · 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

The line under the list reads Structure skills: 1. One skill has role "Structure". A total grew from zero to one, then landed in the paragraph with textContent.

Accumulation means updating a variable from its own previous value. You start at zero, then add one each time a match appears, so the total grows.

let allows that reassignment (you used it for theme). Start with let count = 0.

The syntax

let count = 0;
 
for (const skill of skills) {
  if (skill.role === "Structure") {
    count = count + 1;
  }
}
 
const summary = document.querySelector(".skill-summary");
summary.textContent = "Structure skills: " + count;

let count = 0 starts the total.

for…of walks each skill. The if asks whether that skill's role matches.

count = count + 1 reads the old count, adds one, and stores the result.

"Structure skills: " + count joins a label and the number for the page.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Count</title>
  </head>
  <body>
    <ul class="skill-row"></ul>
    <p class="skill-summary"></p>
    <script>
      const skills = [
        { name: "HTML", role: "Structure" },
        { name: "CSS", role: "Look" },
        { name: "JavaScript", role: "Behaviour" },
      ];
      const skillRow = document.querySelector(".skill-row");
      for (const skill of skills) {
        const item = document.createElement("li");
        item.textContent = skill.name;
        skillRow.append(item);
      }
      let count = 0;
      for (const skill of skills) {
        if (skill.role === "Structure") {
          count = count + 1;
        }
      }
      const summary = document.querySelector(".skill-summary");
      summary.textContent = "Structure skills: " + count;
    </script>
  </body>
</html>

One array of skill objects. One empty summary paragraph. One count that grows only for Structure, then shows on the page.

Common mistakes

You write count + 1 and never assign. The summary shows Structure skills: 0 even when a Structure skill exists. Run this:

FORGOT TO ASSIGN · 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

The expression computes a new number and drops it. count stays 0. Store the result with count = count + 1.

You select .skill-summary before the element exists in the HTML. querySelector returns null. Setting textContent throws. The CONSOLE shows a red error mentioning null. Add empty <p class="skill-summary"></p> after the skills list, then select it.

You put the count loop before the skills array exists. The CONSOLE shows a red error about skills before initialization. Declare skills, build the cards, then start let count = 0 and the counting loop.

Try it yourself

Count Structure skills on your profile page and show the total. Confirm each step in the preview. After each Run, scroll the preview to Skills if you do not see the summary yet. The header and About block sit above it, so the count can land below the fold.

Run the starting code below. Confirm the skill cards still appear and the form still shows thanks after you type a name and submit. Confirm there is no skill-summary paragraph under the skills list yet.
After the </ul> for .skill-row, add empty <p class="skill-summary"></p>. In styles.css, add a .skill-summary rule with teal text and a little margin-top. Run it. Scroll the preview to Skills. Confirm an empty summary slot sits under the skills list.
Look at your skills array. Count how many objects have role set to "Structure" (that is your expected total). After the skills render loop, add let count = 0;, then a for…of over skills with if (skill.role === "Structure") { count = count + 1; }. Select .skill-summary and set textContent to "Structure skills: " + count. Run it. Scroll the preview to Skills. Confirm the line shows Structure skills: plus the total you counted by eye.
Change one skill that was not Structure so its role is "Structure". Run it. Scroll to Skills. Confirm the number went up by one from the total you had. Put that skill's role back. Run it. Scroll to Skills. Confirm the number matches your original total again.
Break it on purpose: change the increment line to count + 1; with no assignment. Run it. Scroll to Skills. Confirm the summary shows Structure skills: 0. Put count = count + 1; back. Run it. Scroll to Skills. Confirm your real total returns.

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 page now counts matching skills in plain view. The next stop is the behavior checkpoint, where the full responding profile sits in one place. The capstone comes after that checkpoint.