📋 Task Dashboard

A beautiful, interactive task management application built with vanilla JavaScript, HTML, and CSS. Features real-time statistics, priority levels, and smooth animations.

✨ Features

• ✅ Add Tasks - Create tasks with customizable priority levels (Low, Medium, High)
• ✅ Mark Complete - Check off completed tasks with a single click
• ✅ Smart Filters - View all tasks, pending only, completed, or high priority
• ✅ Real-time Stats - Dashboard shows total tasks, completed, pending, and completion rate
• ✅ Beautiful UI - Modern gradient design with smooth animations
• ✅ Responsive Design - Works perfectly on desktop, tablet, and mobile
• ✅ No Dependencies - Pure vanilla JavaScript, no frameworks needed

🛠️ Technologies Used

• HTML5 - Semantic markup
• CSS3 - Modern styling with Grid, Flexbox, animations
• Vanilla JavaScript - No frameworks, pure ES6+
• GitHub Pages - Free hosting

💡 How It Works

Core Functionality

The application uses a simple array-based state management system:

let tasks = [];  // Stores all tasks
let currentFilter = 'all';  // Active filter
let taskIdCounter = 1;  // Unique ID generator

Key Features Implementation

Adding Tasks:

• User inputs task title and selects priority
• Task object created with unique ID and timestamp
• Array updated and UI re-rendered

Filtering:

• Filter buttons update currentFilter variable
• renderTasks() function filters array based on current selection
• UI updates dynamically without page reload

Statistics:

• Calculated in real-time from tasks array
• Uses .filter() to count completed/pending tasks
• Completion rate calculated as percentage

Why Vanilla JavaScript?

• Demonstrates core JavaScript proficiency
• No framework overhead
• Faster load times
• Better for learning fundamentals

Why Single HTML File?

• Easy deployment (just one file!)
• Simple to understand and modify
• Perfect for GitHub Pages
• No build process needed

Why CSS Grid & Flexbox?

• Modern, responsive layouts
• Browser support is excellent
• Clean, maintainable code
• Adapts to any screen size

🔧 Customization

Change Colors

Edit the gradient in the CSS:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Change these hex codes to your preferred colors */

Add More Priority Levels

1. Add option in HTML:

   <option value="urgent">Urgent Priority</option>

2. Add CSS styling:

   .priority-urgent {
       background: #ff6b6b;
       color: white;
   }

Modify Animations

Adjust animation timing in CSS:

animation: fadeInUp 0.6s ease;
/* Change 0.6s to speed up/slow down */

📚 What I Learned

Building this project taught me:

• ✅ DOM manipulation and event handling
• ✅ Array methods (filter, map, find)
• ✅ Modern CSS (Grid, Flexbox, animations)
• ✅ Responsive design principles
• ✅ State management without frameworks
• ✅ Clean code organization
• ✅ User experience considerations

🚀 Future Enhancements

Potential features to add:

• LocalStorage persistence (save tasks permanently)
• Drag & drop task reordering
• Due dates with calendar picker
• Task categories/tags
• Dark mode toggle
• Search functionality
• Export tasks to CSV
• Task editing (not just delete)
• Subtasks support
• Keyboard shortcuts

🤝 Contributing

Feel free to fork this project and make it your own! Some ideas:

• Add new features from the list above
• Improve the design
• Optimize the code
• Add tests
• Improve accessibility

📝 License

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

👤 Author

• GitHub: @Yatochi17
• LinkedIn: Muhamad Aqil Danial Bin Shahnizam

⭐ Show Your Support

Give a ⭐️ if this project helped you!

---

Made with ❤️ for learning and portfolio building