JS Demos — Closures, DOM Events, Promises

Three small interactive demos covering core JavaScript concepts.

Files

File	Concepts Covered
01-counter.html	Closures, scope, hoisting (var vs let, TDZ, function hoisting)
02-todo.html	DOM manipulation, event handling, event delegation
03-quiz.html	Promises, async/await, try/catch/finally

How to Run

No build step or server needed. Just open any of the .html files directly in a browser (double-click, or right-click → Open With → Browser).

1. Counter (01-counter.html)

Two counters built from the same factory function, each keeping its own private count variable. Demonstrates that closures let inner functions "remember" variables from the scope they were created in.

Also includes a hoisting log on the page (and in the console) showing the difference between:

• var (hoisted + initialized to undefined)
• let (hoisted but in the "temporal dead zone" until declared — throws if accessed early)
• function declarations (hoisted with their full body, callable before the line they're written on)

2. To-Do List (02-todo.html)

A task list with add / complete / delete / filter functionality.

• Adding: type in the input and press Enter, or click "Add"
• Completing: click the checkbox next to a task
• Deleting: click the ✕ button
• Filtering: switch between All / Active / Done

Uses event delegation — a single click/change listener on the <ul> instead of attaching listeners to every <li> individually.

3. Quiz (03-quiz.html)

A 4-question quiz where each question is "fetched" from a simulated API (fetchQuestion()), which returns a Promise that resolves after a short delay — and occasionally rejects on purpose (~15% of the time) to demonstrate error handling.

loadQuestion() is an async function that awaits the fetch and uses try / catch / finally to handle:

• loading state (shown immediately)
• success (renders the question)
• failure (shows an error + retry button)

Notes

• No external dependencies — vanilla HTML/CSS/JS only.
• Tested in Chrome and Firefox.