This repository contains a Todo App built using Angular and React. The app allows users to create, edit, delete todos. Todos are stored locally in the browser's localStorage
, allowing users to access them later.
Both the Angular and React versions of the app have the same basic features and functionality.
You can access the live demo of the Todo App here.
The repository is structured into two directories:
- Angular: Contains the Angular version of the Todo App.
- React: Contains the React version of the Todo App.
Each directory contains its own implementation of the Todo App using the respective framework.
To run either the Angular or React version of the Todo App, follow the steps below:
-
Clone the repository:
git clone https://github.com/pankajkhuswaha/todo-app.git
-
Navigate to the directory of the framework you want to run:
- For Angular:
cd angular
- For React:
cd react
-
Install dependencies:
npm install
-
Run the app:
- For Angular:
ng serve
- For React:
npm start
- Open your web browser and go to
http://localhost:4200
for the Angular version orhttp://localhost:3000
for the React version to view the Todo App.
- Create Todos: Once logged in, users can create new todos by entering a title and description.
- Edit Todos: Users can edit the title or description of existing todos.
- Mark Todos as Completed: Users can mark todos as completed by checking the checkbox next to each todo.
- Delete Todos: Users can delete todos they no longer need by clicking on the delete button.
- Access Later: Todos are stored locally in the browser's
localStorage
, allowing users to access them later even after closing the app.
- Angular: A popular JavaScript framework for building web applications.
- React: A JavaScript library for building user interfaces.
- localStorage: A web storage API used to store data locally in the browser.
Contributions are welcome! If you find any bugs or want to suggest improvements, please open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.