📝 Project
LESSON 19 OF 32
Project 3 — Quiz App
Project: Vanilla-JS Quiz App
Combine everything from Lessons 14–18 — variables, functions, arrays, DOM manipulation, and events — into a working quiz app with a timer and score tracking.
📝 Project 3 Checklist — Quiz App
Uses a JS array of question objects, not hardcoded HTML.
- Store at least 10 questions as an array of objects (question, options, correctIndex)
- Render the current question and its options dynamically with JS
- Clicking an option checks it against correctIndex and updates the score
- A "Next" button advances to the next question in the array
- A countdown timer per question (e.g. 15 seconds) that auto-advances on timeout
- A final results screen showing score out of total
- Save the high score to
localStorageso it persists on reload - A "Restart Quiz" button that resets score, timer, and question index
- Visual feedback for correct (green) vs incorrect (red) answers
- No page reloads — everything happens via DOM updates
Stretch goal: Shuffle the question order and the option order each time the quiz restarts.
Key Pattern: localStorage
Persisting a High Score
JS// Save
const best = Math.max(score, Number(localStorage.getItem('highScore')) || 0);
localStorage.setItem('highScore', best);
// Read on load
const highScore = localStorage.getItem('highScore') || 0;