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.
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.
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
.
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.
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.
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.
Set global font family of 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
and text color #333
Set a background color #f7f8fc
Style the header section by adding a background color of #3f51b5
and text color of white.
Style the belowgiven elements with the provided colors.
To-Do List Container
Background Color: White
Text Color: #333
Header
Background Color: #3f51b5
Text Color: White
Font Family: Inherits from the body
Input Fields
Background Color: White
Border Color: #ccc
Text Color: #333
Add Task Button
Background Color: #4caf50
Text 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: #ffca2
8
Text Color: #333
Hover Background Color: #fbc02d
Delete Button
Background Color: #f44336
Text Color: White
Hover Background Color: #d32f2f
Empty State Message
Background Color: #ffecb3
Text Color: #795548
Border Color: #ffcc80
Task Headers (Due/Upcoming)
Text Color: #3f51b5
Task Time Styling
Text Color: #0a0000
Apply all additional necessary styles to match the view shown in the provided image.
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.
These are some of the projects you'll build while learning.