Javascript » Data » Todo List
👉 User Story:
As a developer
Implement a `data driven` todo list app that fulfill
the following user stories.
As a user
I would like to add custom items into a list
As a user
I would like to click on an item to toggle a "done" status
"done" items should be very small
As a user
I can click on a "hide completed tasts" button to filter
my list showing only the active tasks
As a user
I should not be able to add empty tasks
As a user
I should see a welcome message when no tasks are available
The architecture of this solution should always follow the "data -> DOM" rendering pattern.
You can try things out directly on this pen:
https://codepen.io/marcopeg/pen/MWWXZbM
✅ Proposed Solution:
Don't run this unless you gave a very good effort to solve it yourself!
🤓 Resources:
- [MDN: forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/
- MDN: Array.splice()
- MDN: Array.push()
- MDN: Create Element
- MDN: Append Child
- MDN: querySelector