This repository contains a collection of nine mini-projects built using Vanilla HTML, CSS, and JavaScript. These projects are designed to take a student from basic UI manipulation to advanced state management and browser API usage without the help of external libraries.
The projects are organized by technical complexity, focusing on different aspects of the JavaScript ecosystem.
| Difficulty | Project | Core Technical Focus |
|---|---|---|
| Easy | Flashcard App | CSS 3D Transforms & Basic Array Logic |
| Easy | Movie Explorer | Basic API Fetching (Read-Only) |
| Easy | Recipe Finder | URL Parameters & Modal Implementations |
| Medium | Expense-Lens | Math Logic & Dynamic List (CRUD) |
| Medium | Crypto-Tracker | Real-time Data Formatting & Async/Await |
| Medium | Weather Switcher | Conditional Theming & Dynamic CSS Variables |
| Medium+ | Meme Generator | HTML5 Canvas API & Image Processing |
| Hard | Habit Tracker | Native Drag-and-Drop API & LocalStorage |
| Hard | Resume Builder | Real-time State Sync & Complex DOM Updates |
- Asynchronous JS: Mastering the
fetch()API and handling JSON data from public servers. - State Management: Learning how to keep the UI in sync with underlying data objects without a framework.
- Browser APIs: Utilizing the Canvas API for graphics and the Drag-and-Drop API for interactive boards.
- Logic & Formatting: Implementing real-world features like currency formatting, search filtering, and unit conversion.
- Persistence: Using
LocalStorageto save user data across browser refreshes.
To view or work on a project, navigate to the specific directory and open the index.html file in your browser.
# Example: Start with an easy project
cd easy/movie-explorer
# Example: Move to a hard project
cd hard/resume-builder
- A modern web browser (Chrome, Firefox, or Edge).
- A code editor (VS Code recommended).