A collection of hands-on JavaScript projects built with HTML, CSS, and vanilla JavaScript. Each project focuses on a different browser API or front-end concept, from game loops and local storage to drag-and-drop, canvas rendering, API calls, and interactive UI state.
| Project | Description | Key Concepts |
|---|---|---|
| Snake Game | A classic grid-based snake game with score tracking, timer, game-over modal, and persistent high score. | DOM manipulation, timers, keyboard events, localStorage, collision logic |
| Productivity Dashboard | A multi-feature dashboard with tasks, day planning, motivation quotes, weather, themes, and a Pomodoro timer. | localStorage, geolocation, fetch APIs, dynamic rendering, theme variables |
| Kanban Board | A drag-and-drop task board with Todo, In Progress, and Done columns plus saved tasks. | HTML drag-and-drop, modal forms, localStorage, dynamic task creation |
| Image Editor | A browser-based image editor using canvas filters, presets, reset, and PNG download. | Canvas API, file input, image processing, CSS filters, downloads |
HTML_CSS_JS/
+-- Project1_Snake_Game/
+-- Project2_Productivity_Dashboard/
+-- Project3_Kanban_Board/
+-- Project4_Image_Editor/
+-- README.md
Each project is self-contained. You can open the project's index.html file directly in a browser. No build step or package installation is required.
- Clone or download this repository.
- Open any project folder.
- Double-click
index.html, or open it from your browser.
For projects that use browser permissions or remote APIs, such as the Productivity Dashboard weather feature, running through a local server can be smoother:
npx serve .Then open the shown local URL and navigate to the project folder.
- Pure frontend projects with no framework dependency.
- Multiple browser APIs explored in practical ways.
- Screenshots included for quick previews.
- Persistent data in the browser through
localStorage. - A good progression from simple DOM interactions to richer app-like interfaces.
Built by Vishal Raj as a JavaScript learning playground.