A modern, interactive flash card web app for presenters and trainers.
Flash Cards is a presentation-friendly web app that lets trainers and educators create, manage, and present flash cards with smooth 3D flip animations. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no dependencies.
| Feature | Description |
|---|---|
| 3D Flip Animation | Smooth CSS 3D card flip to reveal answers |
| Card Management | Add, edit, and delete cards from the sidebar |
| Navigation | Previous/Next buttons with card counter |
| Keyboard Shortcuts | Arrow keys to navigate, Space/Enter to flip |
| Dark/Light Mode | Toggle theme with persistence via localStorage |
| Import/Export | Save and load card decks as JSON files |
| Shuffle | Randomize card order for varied practice |
| Responsive | Works on desktop, tablet, and projector displays |
| Sample Cards | Pre-loaded cards to get started instantly |
| Layer | Technology |
|---|---|
| Structure | HTML5 |
| Styling | CSS3 (Custom Properties, 3D Transforms, Flexbox) |
| Logic | Vanilla JavaScript (ES6+) |
| Deployment | GitHub Pages |
┌─────────────────────────────────────────────┐
│ Browser │
├──────────┬──────────────────┬───────────────┤
│ Sidebar │ Presentation │ Modal │
│ - Form │ - Flashcard │ - Edit Card │
│ - List │ - Navigation │ │
│ │ - Hints │ │
├──────────┴──────────────────┴───────────────┤
│ script.js (State) │
│ cards[] · currentIndex · render functions │
├─────────────────────────────────────────────┤
│ localStorage (Theme Only) │
└─────────────────────────────────────────────┘
flashcard/
├── index.html # Main HTML structure
├── style.css # Styling, animations, responsive design
├── script.js # App logic, state management, event handling
├── screenshot.png # App screenshot
├── README.md # This file
└── .github/
└── workflows/
└── deploy.yml # GitHub Pages deployment
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools or dependencies required
-
Clone the repository
git clone https://github.com/alfredang/flashcard.git cd flashcard -
Open in browser
open index.html
Or simply double-click
index.htmlin your file manager. -
Optional: Serve locally (for development)
python3 -m http.server 8000 # Visit http://localhost:8000
| Action | How |
|---|---|
| Add a card | Fill in Question & Answer, click + Add Card |
| Flip a card | Click the card or press Space / Enter |
| Navigate | Click Previous / Next or use Arrow Keys |
| Edit a card | Click Edit on any card in the sidebar |
| Delete a card | Click Del on any card in the sidebar |
| Shuffle | Click the Shuffle button in the header |
| Export deck | Click Export to download as JSON |
| Import deck | Click Import to load a JSON file |
| Toggle theme | Click the moon/sun icon in the header |
This project is deployed automatically to GitHub Pages via GitHub Actions on every push to main.
Live URL: https://alfredang.github.io/flashcard/
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Built with vanilla web technologies — no frameworks needed
- 3D flip animation inspired by CSS perspective transforms
- Developed with Claude Code
If you find this useful, give it a ⭐ on GitHub!