TODO-LIST
TODO-list a list of the tasks that you have to do, or things that you want to do.
I Developed a simple Todo-list, in which one person can add items(or tasks) in the list and delete recently added items by simply hovering to that item or delete all added items by a single click on button "Clear All".
This is how my work look like:
https://github.com/ashishch164/WebDev_Projects/blob/master/TodoList/todo_list_%20intro.jpg
• Languages used: HTML5, CSS3, Bootstrap (v4.5) and JavaScript.
I have uploaded my entire Code on this git repository ,you can see from there.
It has a box where user can write their tasks and "Add", "Clear All" ,"Clear done" buttons and there functionality is defined below.
It has a very simple layout and user friendly type background. User can easily add or delete the tasks.
- Adding of tasks
User have to write their tasks in "Task title." box and then simply press "Enter" button on keyboard or click on "Add" button to get added their tasks in the list. User can add any number of tasks according to his requirement.
This is how it look like when user add 3 tasks :
https://github.com/ashishch164/WebDev_Projects/blob/master/TodoList/add_tasks.jpg
- Deleting the tasks using "Clear All" Button
When a user completes all his tasks,and he wants to delete those all added tasks,
then user clicks on "Clear All" Button,all tasks got deleted and now he have only empty list, which is look like :
https://github.com/ashishch164/WebDev_Projects/blob/master/TodoList/clear_all.jpg
- Deleting a particular tasks using hovering
When a user completes a particular task ,and he wants to delete that task,
then user simply hovers to that task and when he hovers , that task become underlined which indicate that your are going to delete this task . https://github.com/ashishch164/WebDev_Projects/blob/master/TodoList/hovering.jpg
and then press on that underlined task ,and your task got deleted ,After deleting first task(let's say), it looks like: https://github.com/ashishch164/WebDev_Projects/blob/master/TodoList/delete_first_task.jpg
- "Clear Done"
It doesn't do anything,it is basically for giving satisfaction to user that he completes all his tasks.
I have uploaded my todolist implementation on netlify platform,from where you can see how it actually look like and how it actually works,here is the link: