📝 Todo List React

A simple Todo List application built with React and Vite that allows users to create, complete, and delete tasks while displaying real-time task statistics.

---

✨ Features

• ➕ Add new todo items
• ✅ Mark todos as completed
• 🗑️ Delete existing todos
• 📊 Display total number of todos
• ✔️ Display completed todos count
• ⚡ Real-time UI updates
• 🧩 Component-based architecture using React

---

🛠️ Tech Stack

Technology	Purpose
React	Frontend UI
Vite	Build Tool
JavaScript (ES6+)	Programming Language
CSS3	Styling
ESLint	Code Quality

---

📂 Project Structure

Todo-List-React/
│
├── public/
│   └── vite.svg
│
├── src/
│   ├── components/
│   │   ├── TodoHeader.jsx
│   │   ├── TodoHeader.css
│   │   ├── TodoInput.jsx
│   │   ├── TodoInput.css
│   │   ├── Todos.jsx
│   │   └── Todos.css
│   │
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
│
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md

---

⚙️ Installation

Clone the repository:

git clone https://github.com/DefNotArham/Todo-List-React.git

Move into the project directory:

cd Todo-List-React

Install dependencies:

npm install

---

▶️ Run the Development Server

npm run dev

Open your browser and visit:

http://localhost:5173

---

📦 Build for Production

npm run build

Preview the production build:

npm run preview

---

🎯 How to Use

1. Enter a task in the input field.
2. Click the Add button.
3. Mark a task as completed using the ✔️ button.
4. Remove a task using the 🗑️ button.
5. View the live statistics showing:
   • Total Todos
   • Completed Todos

---

🤝 Contributing

Contributions are welcome!

If you'd like to improve this project:

1. Fork the repository
2. Create a new branch

git checkout -b feature/your-feature-name

3. Commit your changes

git commit -m "Add your feature"

4. Push your branch

git push origin feature/your-feature-name

5. Open a Pull Request