https://github.com/ahmed-yasser-66/react-todo

ToDo list created using React js ⚛
https://github.com/ahmed-yasser-66/react-todo

reactjs todo-list

Last synced: 20 days ago
JSON representation

ToDo list created using React js ⚛

• Host: GitHub
• URL: https://github.com/ahmed-yasser-66/react-todo
• Owner: Ahmed-yasser-66
• Created: 2024-03-11T07:46:02.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-03-11T11:55:05.000Z (11 months ago)
• Last Synced: 2024-03-12T08:49:28.714Z (11 months ago)
• Topics: reactjs, todo-list
• Language: JavaScript
• Homepage: https://ahmed-react-todo.netlify.app/
• Size: 580 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React ToDo App 📝✨

## Introduction

This is a simple React project created for the Frontend Mentor challenge. It's a ToDo app that allows you to manage your tasks with ease.

## Features

- Dark/Light Theme Toggle 🌗

- Add new ToDo items 📌

- Delete ToDo items 🗑️

- Toggle completion status ✔️

- Filter ToDo items by status (All, Active, Completed) 🔄

- Clear completed items in one click 🧹

## How to Use

1. Clone this repository to your local machine.

2. Install dependencies using `npm install`.

3. Run the app with `npm start`.

4. Start managing your tasks!

## Learning Resources

I built this project after studying React fundamentals from [Jonas's React Course](https://www.udemy.com/share/108PTK3@NpsHDL2JKsn1UGeRmI6gnquzALfwaHzEsmb2pM22ODXeJxmh-C-N3qySpx5ohyrU4w==/). I decided to practice my new knowledge by this ToDo app before progressing to other sections of the course.

## Code Overview

The main functionality is implemented in the `App.js` file, which includes components such as `Header`, `ToDoForm`, `ToDoItems`, and `Stats`. The app utilizes the `useLocalStorage` hook for persistent storage.

## Quick Commands

- `npm install` - Install project dependencies.

- `npm start` - Run the app in development mode.

## Technologies Used

- React

- useState hook

- Local Storage for data persistence

Feel free to explore the code and make any improvements! 👩‍💻🚀