This is a simple To-Do List application built using React.js that allows users to add, remove, and mark tasks as complete. The app is connected to the JSONPlaceholder REST API to fetch and save tasks. It also includes local storage functionality to persist tasks even after the page is refreshed.
- Clone or download this repository to your local machine.
- Open your terminal and navigate to the project directory.
- Run the following command to install the required dependencies:
npm install- Once the installation is complete, you're ready to run the application.
- In the project directory, run the following command to start the development server:
npm run dev- Your default web browser will open, and you should see the To-Do List app.
The To-Do List app is connected to the JSONPlaceholder API (https://jsonplaceholder.typicode.com) to fetch and save tasks. Here's how you can interact with the API:
When you open the app, it automatically fetches tasks from the JSONPlaceholder API and displays them in the list.
To add a new task:
- Enter the task description in the input field provided.
- Click the "Add" button.
- The new task will be sent to the JSONPlaceholder API and added to the list.
To mark a task as complete:
- Click the checkbox next to the task you want to mark as complete.
- The status of the task will be updated in the JSONPlaceholder API.
To remove a task:
- Click the "Delete" button next to the task you want to remove.
- The task will be deleted both from the UI and the JSONPlaceholder API.
The app includes local storage functionality, which means that your tasks will be saved locally in your browser's storage. Even if you refresh the page or close and reopen the app, your tasks will be preserved.