A clean, interactive To-Do application built to demonstrate core JavaScript concepts alongside foundational HTML & CSS skills.
This project was built as a mini project to practice and showcase:
- Structuring a web page with semantic HTML
- Styling UI components with CSS
- Implementing real-world JavaScript — the primary focus of this project
| Concept | Where It's Used |
|---|---|
| DOM Manipulation | Dynamically adding/removing task elements |
| Event Handling | Button Clicks |
| Functions | Add task, delete task |
| classList API | Toggling completed / active states |
- HTML5 — Semantic structure (
<ul>,<li>,<input>,<button>) - CSS3 — Flexbox layout, hover effects
- Vanilla JavaScript (ES6+) — No frameworks, no libraries
- ➕ Add new tasks
- 🗑️ Delete individual tasks
- 🎨 Clean, minimal UI
todo-app/
│
├── To-do.html # App structure
├── To-do.css # Styling & layout
└── To-do.js # All JavaScript logic
Working on this project helped me get hands-on with how JavaScript interacts with the browser in real time. Writing DOM manipulation from scratch — without any framework — made me understand exactly what happens under the hood when a UI updates. Handling events. I understood basics of JavaScript when i made this mini project.
- Edit existing tasks
- Filter by All / Active / Completed
- Drag-and-drop reordering
- Due dates & priority levels
- Dark mode toggle
Built with ❤️ as a JavaScript learning project