Todo App

Overview

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.

Features

• 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.

Tech Used/ Dependencies

• This project was bootstrapped with Create React App.

• Dependencies used includes:
  

1.styled-components
2.react-beautiful-dnd

Available Scripts

In the project directory, you can run:

npm start

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.