LIVE LINK : (https://todo-app-final.vercel.app/)
This project was created as a solution for front-end mentor challenge(https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW). localStorage property is used for storing the data.
-
Clicking sun/moon icon on the top changes the theme into lighter/darker modes.
-
There is an input field where one can type a new todo item.
-
If Enter button is clicked the todo item is added to the saved data in the localStorage.
-
Added new todo item is displayed among the list of todo items.
-
There is option for striking out the completed todo task.
-
There is option for deleting a completed task.
-
The items in the list can be dragged and dropped for reordering.
-
Clicking the button named Active on the bottom shows all the active tasks that need to be completed in the list.
-
Clicking the button named Complete on the bottom shows all the completed tasks in the list
-
Clicking the button named All on the bottom shows both the completed and active tasks in the list.
-
Number of items in the list is displayed on the lower left corner.
-
This project was bootstrapped with Create React App.
-
Dependencies used includes:
1.styled-components
2.react-beautiful-dnd
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.