📝 Task Tracker

A simple and elegant web application to manage your daily tasks. Add, view, and mark tasks as completed with ease. Built with React and Vite.

✨ Features

• ✅ Add Tasks - Quickly add new tasks with a clean input interface
• 📋 View All Tasks - See all your tasks in one organized list
• ✔️ Mark as Completed - Check off tasks when they're done (with strikethrough effect)
• 🗑️ Delete Tasks - Remove tasks you no longer need
• 📊 Task Statistics - View total, completed, and pending task counts
• 💾 Local Storage - Tasks are automatically saved to your browser
• 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile devices
• 🎨 Beautiful UI - Modern gradient background with smooth animations
• ⚡ Real-time Updates - Instant feedback as you manage your tasks

🛠️ Tech Stack

• React 19.2.0 - UI library
• Vite 7.2.4 - Fast build tool
• CSS3 - Styling with animations and gradients
• JavaScript ES6+ - Modern JavaScript

📦 Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Steps

1. Clone the repository

   git clone https://github.com/YOUR_USERNAME/task-tracker.git
   cd task-tracker

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open in browser

   • Navigate to http://localhost:5173
   • Start adding tasks!

🚀 Usage

Adding a Task

1. Type your task in the input box
2. Press Enter or click the "Add Task" button
3. Your task appears in the list below

Marking as Completed

• Click the checkbox next to any task to mark it as completed
• Completed tasks show a strikethrough and ✓ status badge

Deleting a Task

• Click the "Delete" button on any task to remove it permanently

Viewing Statistics

• See the stats section at the top showing:
  • Total: Total number of tasks
  • Completed: Number of finished tasks
  • Pending: Number of incomplete tasks

📂 Project Structure

task-tracker/
├── src/
│   ├── App.jsx          # Main application component
│   ├── index.css        # Global styles
│   ├── main.jsx         # Entry point
│   └── assets/          # Static assets
├── public/              # Public files
├── index.html           # HTML template
├── package.json         # Dependencies and scripts
├── vite.config.js       # Vite configuration
└── README.md            # This file

🎨 Features Explained

Local Storage

• Your tasks are automatically saved to your browser's local storage
• Reload the page and your tasks will still be there!

Responsive Design

• Input box and button stack vertically on mobile devices
• Task list is scrollable with a custom styled scrollbar
• All content stays within screen bounds on any device size

Modern UI

• Gradient purple background
• Smooth transitions and animations
• Accessible keyboard navigation (press Enter to add tasks)
• Status badges for pending/completed states

📝 Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run ESLint
npm run lint

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Feel free to fork this repository and submit pull requests for any improvements!

💡 Future Enhancements

• Task categories/tags
• Due dates for tasks
• Search and filter functionality
• Dark mode toggle
• Task priority levels
• Export tasks to CSV/JSON
• Cloud sync with backend

📧 Support

If you have any questions or suggestions, feel free to open an issue!

---

Made with ❤️ using React & Vite

Happy task tracking! 🚀