Make a real web page react with JavaScript: find elements, change them, listen for clicks and typing, and keep a list and a score, ending in a quiz page you build.
★ Challenge completeFind an element, change it, and run code when someone clicks.
Find an element on a page with JavaScript, change its text and colour, and read what the console says.
Run a function when someone clicks a button: addEventListener, and the difference between handing over a function and running it.
Switch a whole look on and off with classList.toggle, so CSS does the styling and JavaScript only flips a class.
Classes, inputs, lists of elements and a score the page remembers.
Read what someone types with .value, react as they type, and turn text into a number with Number().
Make new elements with createElement and add them to the page, so a list can grow, one click at a time.
Keep a number between clicks in a variable made above the handler, and use an if to decide when something happens.
Build a quiz that checks answers and keeps score. Two optional lessons show the real browser console and loading data with fetch.
Put it all together: a list of questions as data, buttons made for each choice, a score that remembers, and feedback on every click.
Use console.log to look inside your page, read error messages, and try the real Console and inspector in your own browser.
Load JSON data with fetch, wait for it with await, show it on the page, and fall back to a saved copy when the network fails.
Keep data when the page is closed with localStorage: save text when something changes, load it when the page opens, and save lists as JSON.
Progress is saved in this browser only. Nothing is sent anywhere.
For teachers: Teacher guide (notes, answers, solutions, slides and worksheets)