P8 - Flashcards / Study App

What you are building

You are building a Flashcards app for studying. A user creates cards with a front (question or term) and a back (answer or definition), studies by flipping each card, marks each card as Know or Don't know, sees a result at the end, and can start the deck again.

This project has no marks. Still submit your live link when you are done.

Everyone builds the same structure.

Home

• App title (for example Flashcards, or your own name for it)
• One sentence explaining what the app does
• Your name as the creator
• A button to Add cards
• A button to Start study (disabled if there are fewer than 5 cards)

Add / manage cards

• Form fields: Front and Back
• Add card button
• List of all saved cards showing front text
• Way to delete a card
• Must save cards in localStorage so they remain after refresh
• Minimum 5 cards before studying is allowed

Study mode

• Show one card at a time
• Show progress: Card 3 of 12
• Card starts on the front
• Flip button (or tap the card) to show the back
• After flipping, show two buttons: Know and Don't know
• Moving on loads the next card
• After the last card, go to the result screen

Result screen

• Score on screen only: for example 8/12 known (not saved anywhere else)
• Study again button (same deck, reset Know / Don't know)
• Back to home button

Footer (every page / main view)

• Built by [Your Name], 2026
• Link to your GitHub repo

Card rules

• Front and back both required to add a card
• Empty cards blocked
• At least 5 cards to start study
• Cards saved in localStorage
• Delete removes the card from the list and from localStorage
• Study order can be the list order or shuffled (pick one and stick to it)

Design requirements

• Mobile first: must work well on a phone
• Clear flip interaction (button and/or tap)
• Know / Don't know buttons easy to hit with a thumb
• Consistent styling across home, add, study, and result
• Plan in Figma or Stitch before you code
• Build in VS Code with HTML, CSS, and JavaScript

Done when

• App title and short description
• Your name on the site
• Can add a card with front and back
• Empty front or back is blocked
• Cards appear in a list
• Delete removes a card
• Refresh keeps the cards (localStorage)
• Cannot start study with fewer than 5 cards
• Study shows one card at a time
• Progress shows (for example Card 2 of 10)
• Flip shows the back
• Know / Don't know both work
• Result shows known / total on screen only
• Study again resets and restarts
• Back to home works
• Footer with Built by [Name], 2026
• GitHub repo exists
• Live link works on phone
• Write your live link on paper and hand it in