Beginner project
Quote Generator
Render and rotate a small local data set — a gentle introduction to arrays and DOM updates together.
The problem
Working with a small, local array of data is the simplest realistic rehearsal for the API-backed apps that come later.
User stories
- As a user, I want to see a random quote, so I get a bit of daily inspiration.
- As a user, I want a button to get a new quote, so I can browse more than one.
Planning checklist
- Gather at least 15 real quotes with authors
- Decide how to avoid immediately repeating the same quote twice in a row
Suggested data structure
const quotes = [{ text: "...", author: "..." }];UI requirements
- A quote display area with text and author
- A 'New Quote' button
Build milestones
Check off each milestone as you complete it — saved to this device.
…
0%Testing checklist
- Every quote in the array can actually be displayed
- The same quote never appears twice in a row
Completion criteria
…
0%Progressive support
RequirementsPlanningStarterHintsReference Solution
Bonus features
- Add a 'copy quote' button
- Add category filtering
- Add a share-to-Twitter link