Session 16 — Make It Interactive

Duration: 75 min · Format: live online · Ages: 12–15

Session goal: by the end, students can write a JavaScript function, run it on a button click, and change what the page shows by reading and updating the DOM.

Before class — prep (5 min)

• Open CodePen → Create → Pen. You'll type in all three panels — HTML, CSS, and JS — and screen-share.
• Turn on CodePen's console: bottom-left Console button. You'll use console.log(...) so students can see values as code runs.
• Send students the CodePen link. Have last session's profile-card Pen handy — some will build on it.

Agenda

0:00 · Hook (5 min)

Ask the class and take a few answers (chat or unmute):

• "Last session you made a button. Click it — what happens?" (Nothing. It just sits there.)
• "On a real app, tapping a button does something — a like appears, a score goes up. What's the missing ingredient?"

Land the idea: HTML and CSS make a page that looks right but can't react. The missing layer is JavaScript — the language that runs in every browser and makes pages do things. Today their button finally comes alive.

0:05 · Teach — Variables and functions (15 min)

Explain: JavaScript stores values in variables, just like Python did — but you declare them with the word let (a value that can change) or const (a value that won't). Every statement ends in a semicolon.

Type/run this together in CodePen (in the JS panel, with the console open):

let score = 0;
const playerName = "Sara";

console.log(playerName, "has", score, "points");

Run it and point at the console output: Sara has 0 points. Note the differences from Python out loud: let/const in front, and semicolons at the end.

Explain functions: a function is a named set of instructions you can call (run) whenever you want, as many times as you want.

Type/run this together in CodePen:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Sara");
greet("Omar");

Point out the parts: function names it, (name) is an input (a parameter), and calling greet("Sara") runs the body with name set to "Sara". It printed twice because we called it twice.

⚠ Watch for the #1 confusion: defining a function doesn't run it — it just teaches the browser the recipe. Nothing happens until you call it with greet("Sara"). Students often write a function and wonder why nothing appears.

0:20 · Teach — Events and the DOM (15 min)

Explain two big ideas together. The DOM (Document Object Model) is the page as JavaScript sees it — every element is an object it can read and change. An event is something the user does — a click, a key press — that you can listen for and respond to.

Share this diagram so students can trace how a click fires a JavaScript function that reads and updates the page (the DOM):

Type/run this together in CodePen. First the HTML and CSS:

<h1 id="title">0</h1>
<button id="addBtn">Add one</button>

#title {
  font-size: 64px;
  text-align: center;
  font-family: sans-serif;
}

Then the JavaScript that wires it up:

let count = 0;
const title = document.getElementById("title");
const button = document.getElementById("addBtn");

button.addEventListener("click", function () {
  count = count + 1;
  title.textContent = count;
});

Click the button live so the big number climbs. Walk through the three moves: 1. document.getElementById("title") grabs the element (using its id from the HTML). 2. addEventListener("click", ...) says "when this button is clicked, run this function." 3. title.textContent = count updates the page with the new value.

⚠ Watch for: you select elements by id in the HTML (id="title") with getElementById("title") — no #, no dot. The id must match exactly, and each id should be unique on the page.

Ask: "Where does the number live — in the HTML or in the JavaScript?" (Answer: the real value lives in the count variable; the HTML just shows whatever we last wrote into it with textContent.)

0:35 · Activity — Build a click counter (23 min)

Have students open their own CodePen → Create → Pen, then build a counter with two buttons. Screen-share your own Pen as a model.

Type/run this together in CodePen (HTML):

<h1 id="display">0</h1>
<button id="up">+1</button>
<button id="down">-1</button>
<button id="reset">Reset</button>

Then the JavaScript:

let count = 0;
const display = document.getElementById("display");

document.getElementById("up").addEventListener("click", function () {
  count = count + 1;
  display.textContent = count;
});

document.getElementById("down").addEventListener("click", function () {
  count = count - 1;
  display.textContent = count;
});

document.getElementById("reset").addEventListener("click", function () {
  count = 0;
  display.textContent = count;
});

Then have them extend it: add a bit of CSS to colour the display green when positive and red when negative (talk them toward an if inside the update), or add a +10 button.

Circulate for (or watch the chat for) the two errors nearly everyone hits — an id in the HTML that doesn't match the getElementById string, and forgetting to write the new value back with textContent (so count changes but the page never updates).

Demo the Debug Game. Share this broken code and ask students to spot two mistakes before you fix it:

let count = 0
const btn = document.getElementById("addButton");

btn.addEventListener("click", function () {
  count = count + 1;
});

Ask: "The button seems to do nothing on screen — what's wrong?" Then fix it live: 1. The first line is missing its semicolon (let count = 0;) — and check the HTML actually has id="addButton". 2. The click handler updates count but never writes it to the page — add display.textContent = count; (with a matching display element).

0:58 · Check for understanding (10 min)

Ask these aloud or drop them in the chat. Answer key (for you):

1. What's the difference between let and const? → let is for a value you'll change later; const is for one that stays the same.
2. What does addEventListener("click", …) do? → It listens for a click on that element and runs the given function each time it happens.
3. After count = count + 1, why doesn't the page change on its own? → The variable changed, but the page only updates when you write the value into an element, e.g. title.textContent = count.

1:08 · Wrap-up + homework (7 min)

• Ask one student to finish the sentence: "An event listener is…"
• Homework — Mood Button: build a Pen with one button and one heading. Each click should change the heading's textContent to a different mood word ("Happy!", "Focused!", "Coding!"). Use a variable to keep track, and console.log the count of clicks. Save the Pen and bring the link to Session 17 — next time you build a full app.

Teaching notes

• Correct this misconception: "the page updates automatically when a variable changes." It doesn't — JavaScript and the visible page are separate; you must push the new value into the DOM with textContent (or similar) every time.
• Common errors students hit: mismatched id strings, forgetting textContent, missing semicolons, writing getElementById(".title") or ("#title") with the punctuation (it takes the plain id, no symbol), and defining a function but never calling it. Show that CodePen's Console prints red errors that name the exact line.
• Fast finishers (extension) — read from an input box: show them how apps take typed input. Add <input id="nameBox"> and a button; on click, read document.getElementById("nameBox").value into a variable and show "Hello, " + name in a heading. This is the same "read → process → show" loop behind every form on the web. Challenge: make the greeting refuse to show if the box is empty (an if on name === "").

const name = document.getElementById("nameBox").value;
document.getElementById("out").textContent = "Hello, " + name;

• Low-tech fallback: if devices are slow, type the counter on your shared CodePen and have students predict the number before each click, and predict which line updates the screen. They can write their Mood Button logic on paper as pseudocode to type up later.

Vocabulary

Resources

• CodePen — HTML, CSS, and JS with live preview and a console (free).
• MDN — JavaScript first steps — clear, beginner-friendly.
• JavaScript.info — a thorough, free modern tutorial.
• MDN — Introduction to events — how clicks and listeners work.

Practice set

Extra exercises reinforcing variables, functions, events, and the DOM — easy to hard. Great for lab time or homework.

1. Predict the output: what prints to the console? → 10. The function adds its two inputs and we log the result.

function add(a, b) {
  return a + b;
}
console.log(add(4, 6));

2. Predict the output: how many times does "Hi" print, and why? → Zero times. The function is defined but never called.

function sayHi() {
  console.log("Hi");
}

3. Name the parts: in button.addEventListener("click", handleClick), what is "click" and what is handleClick? → "click" is the event to listen for; handleClick is the function to run when it happens.

4. Fix the bug: clicking does nothing on screen. The HTML has <h1 id="score">0</h1>. Find the problem. → The code updates points but never writes it to the page. Add document.getElementById("score").textContent = points; inside the listener.

let points = 0;
document.getElementById("btn").addEventListener("click", function () {
  points = points + 1;
});

5. Write it: write a variable age set to 13 that you won't change, then log "Age: 13". → const age = 13; then console.log("Age:", age);.

6. Write it: grab an element with id="msg" and set its text to "Done!". → document.getElementById("msg").textContent = "Done!";.

7. Trace it (hard): the button is clicked three times. What number shows on screen at the end, and what's in count? → 6. Each click adds 2, and textContent shows the latest count, so 0 → 2 → 4 → 6.

let count = 0;
document.getElementById("go").addEventListener("click", function () {
  count = count + 2;
  document.getElementById("out").textContent = count;
});

Going deeper (optional)

For a class that's flying, show that a listener can run any logic, including an if, so the same click can do different things:

let count = 0;
const out = document.getElementById("out");

document.getElementById("go").addEventListener("click", function () {
  count = count + 1;
  if (count % 2 === 0) {
    out.textContent = count + " (even)";
  } else {
    out.textContent = count + " (odd)";
  }
});

Point out % (the remainder) and === (JavaScript's "exactly equal"). Land the idea: this "on an event, run some logic, then update the DOM" pattern is the whole job of front-end code — everything from a like button to a shopping cart is just a bigger version of it. Challenge them to make the heading turn red on odd clicks and green on even ones by setting out.style.color inside each branch.

Common mistakes & fixes

• Mistake: the id in the HTML doesn't match the string in getElementById. → Fix: make them identical, including capitals. id="Score" needs getElementById("Score").
• Mistake: changing a variable but never updating the page. → Fix: after changing the value, write it in with element.textContent = value; every time.
• Mistake: putting a # or . inside getElementById, e.g. getElementById("#title"). → Fix: pass the plain id with no symbol: getElementById("title").
• Mistake: defining a function but never calling it, then wondering why nothing runs. → Fix: call it by name with parentheses, e.g. greet("Sara");, or attach it to an event.
• Mistake: forgetting semicolons and getting confusing errors. → Fix: end each statement with ;. When something breaks, open the Console — it names the line.

Next session

Session 17 — Build a Real App: students combine HTML, CSS, and JavaScript to build a complete, working quiz app from scratch.