JULY 27 · MODULE 4
Introduction to Programming I
WEEK 4 · JULY 27 · JAVASCRIPT
Build an activity finder. Then adapt the interaction for your team website.
One partner drives the keyboard. One checks. Swap every two slides.
SET UP · 5 MIN
<button id="show" type="button">Show activities</button>
<ul id="activities"></ul>
<p id="status" role="status"></p>
<script src="app.js" defer></script>Add this inside body. Create app.js beside index.html. In CodePen, omit the script tag and use the JS panel.
BUILD ALONG · APP.JS · 5 MIN
const activities = ["Coding club", "Design challenge"];
const list = document.querySelector("#activities");
const status = document.querySelector("#status");
const button = document.querySelector("#show");
console.log(activities.length);const names a value; an array stores a list. Open DevTools → Console. Expect 2. Add an activity—what changes?
BUILD ALONG · APPEND TO APP.JS · 7 MIN
function addActivity(name) {
const item = document.createElement("li");
item.textContent = name;
list.append(item);
}
addActivity("Try a new skill");The parameter name receives your text. See one list item? Remove just the last test call before continuing.
BUILD ALONG · APPEND TO APP.JS · 7 MIN
function showActivities() {
list.replaceChildren();
for (const activity of activities) {
addActivity(activity);
}
}
showActivities();The loop visits each item. Why clear the list first? Run it twice, then remove the last test call.
BUILD ALONG · INSIDE SHOWACTIVITIES · 7 MIN
if (activities.length === 0) {
status.textContent = "No activities yet.";
} else {
status.textContent = "Choose an activity to explore.";
}Insert after the loop, before the function’s final }. The condition chooses feedback for an empty or full list.
BUILD ALONG · BOTTOM OF APP.JS · 5 MIN
button.addEventListener("click", showActivities);BUG HUNT · DELIBERATELY BROKEN · 5 MIN
const button = document.querySelector("#Show");
button.addEventListener("click", showActivities);Compare the selector with your HTML id. What does the Console tell you?
Read the error → find the line → check your assumption → fix → retest. Keep only one button declaration.
BUG HUNT · DELIBERATELY BROKEN · 5 MIN
button.addEventListener("click", showActivities());Which two characters run the function immediately?
Pass the function, don’t call it. Compare with slide 7, fix the listener and reload.
PAIR TEST · 8 MIN
Restore your useful data. Record expected result → actual result → fix.
TEAM SPRINT · 15 MIN
Choose one interaction. Use labelled controls and visible feedback. No personal-data collection.
THIS WEEK · SHOW IT WORKING
← → to navigate · F fullscreen
Slide 1 of 12