A simple, responsive Todo List application built with HTML, CSS, and JavaScript. This demo showcases a clean implementation of a classic productivity tool with modern UI design.
- Add, delete, and mark tasks as completed
- Filter tasks by status (All, Active, Completed)
- Clear all completed tasks with one click
- Persistent storage using localStorage
- Responsive design for desktop and mobile devices
- Task counter showing remaining active tasks
index.html- The main HTML structure of the applicationstyles.css- CSS styling for the applicationapp.js- JavaScript functionality for the applicationARCHITECTURE.md- Documentation with a Mermaid.js diagram showing the app architecture
-
Clone the repository:
git clone https://github.com/ajeetraina/cbedemo.git -
Open
index.htmlin any modern web browser -
Start managing your tasks!
The application follows a simple MVC-like pattern with:
- HTML/CSS for the View layer
- JavaScript for the Controller layer
- LocalStorage for the Model layer
For a detailed architecture diagram, check out ARCHITECTURE.md.
- HTML5
- CSS3
- JavaScript (ES6+)
- LocalStorage API
- Mermaid.js (for documentation diagrams)