Web Build 084

DOM and events: Keyboard-friendly buttons

Build keyboard-friendly buttons inside the persistent Local event guide: Keyboard-friendly buttons starter project.

DOM and events

10 minutes Admin Lesson 84 of 120

querySelectoraddEventListenerclassListtextContent

Lesson 84 of 120 0/120 lessons 0/18 missions DOM and events · 10 minutes

0%

Continue View profile

New learnerrank 0XP 0%complete

Current edit

Select the interface elements

Add the exact two querySelector statements for the action button and live status.

Target: app.js · Replace the starter comment in app.js.
Evidence: Both data-action and data-status elements are selected.

app.js javascript

Preview allowlisted render

Console text only

Instructions 10 minutes

Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.

Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.

Select the interface elements

Add the exact two querySelector statements for the action button and live status.

Target app.js · Replace the starter comment in app.js. Evidence Both data-action and data-status elements are selected. Snippet

const actionButton = document.querySelector("[data-action]");
const statusText = document.querySelector("[data-status]");

Next up

Add the click behavior

Add the exact click listener that updates statusText.textContent.

Target app.js · After the first declarations. Evidence A click listener updates textContent with the lesson result. Snippet

actionButton.addEventListener("click", () => {
  statusText.textContent = "Keyboard-friendly buttons complete";
});

Next up

Add a state class

Add the exact classList state update, then Run and Check.

Target app.js · At the end of app.js. Evidence The status receives an is-ready class. Snippet statusText.classList.add("is-ready"); Next up

Save progress

Keep learning across sessions.

Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.

Checking account status...

Progress sync is idle.

0XP New learnerrank 0day streak 0best streak 0daily streak 0lessons 0courses 0missions 0tasks Noverified

Continue

Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.

Lesson support

What to notice while you play.

Objective

Complete a project-shaped keyboard-friendly buttons build while preserving each passing edit.

Hint

Start with the Current task. Open app.js, use Show exact edit when needed, Run, then follow the highlighted next task.

Why it matters

DOM and events becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.

Common mistakes

Editing the wrong file instead of app.js.
Replacing earlier passing work instead of preserving it for the next step.
Pressing Check before every task has passed Run.
Expecting learner HTML, CSS, or JavaScript to execute; the preview uses reviewed scene states only.

Reference

Snippets in this lesson.

addEventListener

Describe event-driven behavior in the simulated JavaScript lab.

querySelector

Select a simulated element shape without running real JavaScript.