A modern Dynamic List Manager built using HTML, CSS, and Vanilla JavaScript featuring full CRUD functionality, task filtering, completion tracking, scrollable task container, and localStorage persistence.
The Dynamic List Manager is a responsive task management application that demonstrates real-world frontend development concepts such as state management, DOM manipulation, conditional rendering, and client-side persistence.
The application allows users to efficiently manage tasks with interactive filtering and completion tracking.
| Feature | Description |
|---|---|
| ➕ Add Task | Create new tasks dynamically |
| ✏️ Edit Task | Update existing tasks |
| ❌ Delete Task | Remove tasks from the list |
| ✅ Mark Complete | Toggle completion status using checkbox |
| 🔎 Filter Tasks | View All, Active, or Completed tasks |
| 📜 Scrollable List | Prevents container from expanding infinitely |
| 💾 localStorage | Data persists after page refresh |
| 📱 Responsive Design | Works across desktop and mobile screens |
| Technology | Purpose |
|---|---|
| HTML5 | Structure & Semantic Layout |
| CSS3 | Modern Gradient UI, Scroll Styling, Flexbox |
| JavaScript | CRUD Logic, Filtering, State Management |
| localStorage | Client-side Data Persistence |
- Managing application state using arrays
- Unique ID generation using
Date.now() - Using
.map()and.filter()for updates and filtering - Conditional rendering based on active filters
- Handling UI state reset during edit/delete
- Scrollable UI container with fixed height
- Persistent storage using
JSON.stringify()andJSON.parse()
dynamic-list-manager/ │ ├── index.html ├── style.css ├── script.js └── output/ ├── dynamic-list-desktop.png ├── dynamic-list-mobile.png
CRUD stands for Create, Read, Update, and Delete — the four essential operations of data management.
Tasks are stored in a JavaScript array. After every modification, the UI is re-rendered using a dedicated render function.
Filtering is implemented using the .filter() method to display tasks based on completion status.
If a task being edited is deleted, the edit state is reset to avoid stale state.
Tasks are stored in localStorage using JSON.stringify() and retrieved using JSON.parse() when the page loads.
- Add task counter (Active / Completed count)
- Add “Clear Completed” button
- Add drag-and-drop sorting
- Add due dates
- Add dark mode toggle
- Convert into React component architecture
- Connect to backend API
Rajeev Ranjan Singh
Frontend Developer
⭐ If you found this project useful, consider giving it a star.