2.3 JavaScript: Making It Interactive

Your pages have real structure (HTML) and now look like an actual site (CSS) — but they still just sit there. JavaScript is the language that makes a page respond: click a button and something happens, without you ever reloading the page. This week you're connecting a script file to your site and using it to make your About Me page genuinely interactive. Work through the tasks below in order — each one builds on the last.

Before You Start

1. Open your 2_web_development folder in VS Code — the same one from the last two weeks, in your H: drive. No new download this week; you're building on what you already made.
2. Check that it still has index.html, about.html, work.html, and a /js folder with a file called script.js inside it. If script.js is missing, create it now: right-click the js folder → New File → name it exactly script.js.
3. Open script.js and leave it open in a tab alongside your HTML files — you'll be jumping between them all week.

VS Code reminders

• Auto Save should still be on — check File > Auto Save has a checkmark.
• Keep Live Preview open, and keep the browser's Console open too (right-click the page → Inspect → Console tab) — that's where you'll see whether your JavaScript is actually running.
• JavaScript is picky about spelling and capitalization — an id in your HTML has to match the one in your JavaScript exactly, or nothing will happen.

How JavaScript Connects to Your Page (quick reference)

Everything you do this week follows the same three-step pattern:

1. Select something on the page — find an element using its id.
2. Listen for something to happen — usually a click.
3. React — change something about the page when that click happens.

const thing = document.querySelector("#thing-id");

thing.addEventListener("click", function () {
  // what happens when it's clicked
});

You'll use this exact select → listen → react shape in Tasks 2 through 4 — only the details change.

A JavaScript file that isn't linked to your page does absolutely nothing — the exact same trap as an unlinked stylesheet in 2.2. Before you build anything, you need to see proof that your script is actually running.

1. Add this line just before the closing </body> tag — on all three pages (index.html, about.html, work.html):

   <script src="js/script.js"></script>

2. In script.js, add:

   console.log("script.js is connected!");

3. Save everything, then open any of your three pages, right-click → Inspect → Console tab.

Before JavaScript can change anything on your page, it has to be able to find it first. document.querySelector is how your script reaches into your HTML and grabs a specific element.

1. On about.html, give one element an id — your bio heading works well:

   <h1 id="bio-heading">About Me</h1>

2. In script.js, select it and log it to prove the connection:

   const bioHeading = document.querySelector("#bio-heading");
   console.log(bioHeading);

3. Save, then check the Console again.

This is the actual "interactive" part of the week — your page responds to the person using it, instead of just sitting there.

Worked example — a button that reveals a hidden fact

<button id="fact-btn">Show a fun fact about me</button>
<p id="fun-fact" style="display: none;">I once built a robot out of LEGO that could actually walk.</p>

const factBtn = document.querySelector("#fact-btn");
const funFact = document.querySelector("#fun-fact");

factBtn.addEventListener("click", function () {
  funFact.style.display = "block";
});

Your turn — same pattern, your own content

Fill in the blanks using your own idea — a favourite games list, your avatar's backstory, a hidden skills list — the pattern is identical:

<button id="___-btn">___</button>
<p id="___" style="display: none;">___</p>

const ___Btn = document.querySelector("#___");
const ___ = document.querySelector("#___");

___.addEventListener("click", function () {
  ___.style.display = "block";
});

Task 3 changed one thing when you clicked one button. Real interactivity usually means the same behaviour applied across a group of elements — this is the step from "a button" to "a pattern." Turn a list on your page (skills, interests, favourite games) into individually-expandable items: clicking any one of several elements reveals more detail about that one, using a loop instead of writing the same code five times.

Starter code

<ul class="skills-list">
  <li class="skill-pill">HTML <span class="skill-detail" style="display: none;">Building semantic page structure since Unit 2, Week 1.</span></li>
  <li class="skill-pill">CSS <span class="skill-detail" style="display: none;">Learned flexbox nav and box-model spacing.</span></li>
  <li class="skill-pill">Problem solving <span class="skill-detail" style="display: none;">Debugged my own null-selector bug in Task 2!</span></li>
</ul>

const skillPills = document.querySelectorAll(".skill-pill");

skillPills.forEach(function (pill) {
  pill.addEventListener("click", function () {
    const detail = pill.querySelector(".skill-detail");
    detail.style.display = "inline";
  });
});

This is where you make the site genuinely yours — pick whichever sound the most fun.

Checkpoint for any Black task: does it actually work when someone else clicks or tries it — not just when you do (since you already know where the bugs are)?