To Do List Project
Develop a functional to-do list app that allows users to create, remove, edit, and manage tasks. This project will help you practice building dynamic user interfaces. You will be building this project as part of our JavaScript Course.
Resources: No external resources required.
Things you need to know: LocalStorage, adding and removing elements from an array, filter, map array methods.
Task 01
Add a heading at the top of your page that says To-Do List.
Below the heading, add an input box with the placeholder Add your task here.
Add another box for selecting a date, and another one to set a time for the task.
Add a button labeled Add Task next to these input fields.
Task 02
When the user fills in all the fields and clicks Add Task, the task should be saved, and the fields should be cleared.
The tasks should be stored in the browser's local storage so that tasks remain visible even if the page is refreshed.
Save the task along with the selected date and time.
Load the tasks from local storage and display them on the screen.
Each task should be listed under the corresponding date heading, as shown in the provided image.
Tasks should be displayed along with the due date and time in the following format:
Task HH:MM AM/PM.
Task 03
Add the heading Today for the task for the current date.
Divide the tasks into Due Tasks and Upcoming Tasks, depending on the current date.
Task 04
Add Edit and Delete buttons next to each task so the user can modify or remove tasks.
When the user clicks Edit, they should be able to update the task description.
When the user clicks Delete, the task should be removed from the list.
Task 05
Include a search bar at the top of the page, above the task input fields.
When the user types in this field, the tasks should be filtered based on what is typed.
Make sure the search is case insensitive.
Task 06
Set global font family of
'Segoe UI', Tahoma, Geneva, Verdana, sans-serifand text color#333Set a background color
#f7f8fcStyle the header section by adding a background color of
#3f51b5and text color of white.
Task 07
Style the belowgiven elements with the provided colors.
To-Do List Container
Background Color: White
Text Color:
#333
Header
Background Color:
#3f51b5Text Color: White
Font Family: Inherits from the body
Input Fields
Background Color: White
Border Color:
#cccText Color:
#333
Add Task Button
Background Color:
#4caf50Text Color: White
Hover Background Color:
#388e3c
Task Day Section`
Background Color: #e8f5e9`
Text Color: Inherits from the body
Task Items
Border Bottom Color:
#ddd
Edit Button
Background Color:
#ffca28Text Color:
#333Hover Background Color:
#fbc02d
Delete Button
Background Color:
#f44336Text Color: White
Hover Background Color:
#d32f2f
Empty State Message
Background Color:
#ffecb3Text Color:
#795548Border Color:
#ffcc80
Task Headers (Due/Upcoming)
Text Color:
#3f51b5
Task Time Styling
Text Color:
#0a0000
Task 08
Apply all additional necessary styles to match the view shown in the provided image.
Task 09
Whenever a user tries to add a task, check if any of the fields are empty
If any field is missing, display Please fill in all fields and stop further execution.
Make sure the message is shown above the form and has a close button.
Style the message as per the given image.
More projects
These are some of the projects you'll build while learning.
