TO-DO LIST
A Web Page for Listing Errands And Other Tasks
FEATURES

Add New To-do

the process of adding new to-do

Delete And Edit

hover effect with the icons of delete and edit showing up
When you hover one of the tasks, the buttons of delete and edit will fade in.
TECHNOLOGY

Hover Effect

interacting interface when A key is pressed hover effect with the icons of delete and edit showing up

At the beginning, I set the width and transparency of both icons to 0. When the mouse hovers one of the tasks, the width of the two icons will become 60px and the transparency will become 1.

Add New To-do

code of adding new to-do
code of adding new to-do
TO-DO LIST screenshot with an input box of adding new to-do
"event.which === 13" means that the user hits the enter key.
When the user hits the enter key after finishing typing, it will place the content into the task list.

Edit Function

code of edit function
code of edit function
  1. After clicking the edit button, it activates the input box editing function of the task.
  2. When the user clicks somewhere else besides the input box after activating the edit function, it will be deactivated.
  3. When the user hits the enter key, the edit function will be deactivated.

Delete And Mark Functions

code of delete and mark function
TO-DO LIST screenshot with marked tasks and delete and edit buttons showing up
Click the delete button and the taskbar will disappear.
Click on the text section of the task and it will be marked as completed.
Go to TO-DO LIST
Go to TO-DO LIST