This project helps you add, remove and edit items to your to-do list. It is easier to track when you have a list and that's what this project helps with. A new list item can be added on submission after typing in the textbox at the bottom. There are three options for each item added to the list.
- Edit button - On click of this button the list item becomes editable. You can edit the item and save on clicking the save button or by pressing Enter key on the keyboard.
- Delete button - The delete button helps you remove an item from the list. On confirming deletion in the pop-up, the item will be removed. If you accidentally clicked the delete button, the pop up will save you by giving a second chance to cancel it.
- Checkbox - If you completed the task but don't want to remove it from the list, use the checkbox.
The Search bar on the top helps to easily find an item from the list.
This project is responsive and when it comes to mobile or tablet view, the design has minor changes for easy use. The floating action button helps add a new item. The menu on the right side of each item opens the bottom drawer with the edit, delete functionality buttons for that item.
Don't worry about losing the data if you accidentally closed the browser tab or window. The local storage has your list and it will help retrieve your data on opening again.
This project was developed completely using HTML, CSS and JavaScript.
View the hosted site here.
- nanoid to generate unique id for each list item.
Contributions are always welcome. Feel free to fork and improve this project.