Design Layout
Key Point
- User can add task, and clean the input value after adding.
- User can delete, and complete todo task.
- Use can delete all tasks on the list at one time.
- Use timestamp to set up an unique id for each data inside the array.
Skills Used
- HTML5
- CSS3
- JavaScript
- Bootstrap 3
Step By Step
- Build task-adding function.
- Build delete-all-task function.
- Build delete-one-task function.
- Build task-checked function.
- Build page-render function.
- Use id and data-* attribute to connect related functions together.
Additional Knowledge
https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html