When building the task system for this project, my main objective was to create a clean and reliable state-driven structure using pure Vanilla JavaScript. Instead of treating tasks as simple text entries, I designed each task as an object containing a title, priority level, and a boolean completed value. This approach makes the system scalable and easier to extend in the future.
All tasks are stored inside a single array that acts as the source of truth. The UI does not store any independent state. Instead, every time the state changes, the interface is fully re-rendered based on the current tasks array. This guarantees synchronization between the data and what the user sees on the screen.
When adding a task, the application validates the input, creates a new task object with completed set to false, pushes it into the array, saves the updated array to Local Storage, and re-renders the list. This structured flow ensures consistency and prevents logic duplication.
The toggle completion feature works by flipping the completed boolean when the user clicks on the task text. During rendering, a conditional CSS class is applied if the task is completed, which visually adds a line-through effect. This keeps logic and styling clearly separated.
Deleting a task removes it from the array using its index, then triggers the same save-and-render cycle. Because analytics are derived directly from the tasks array, all statistics update automatically without additional logic.
Local Storage integration ensures persistence after page refresh. On load, stored tasks are parsed and rendered immediately, maintaining continuity.
Overall, this task architecture demonstrates state management, dynamic DOM rendering, separation of concerns, and clean update cycles without relying on any framework
