TaskFlow
Organize your day, achieve your goals
Total Tasks
0
Completed
0
Pending
0
Add New Task
TaskFlow is a clean, responsive, and highly interactive task management application built to help users organize their daily tasks with ease and efficiency. Whether you’re managing work projects, personal to-dos, shopping lists, or health-related goals, TaskFlow offers a simple and intuitive interface that makes task management seamless.
The UI is developed using Tailwind CSS for rapid styling and modern design practices, combined with jQuery for DOM manipulation and dynamic interactions. It also integrates Font Awesome icons for a visually polished experience.
Key features include:
📝 Add and manage tasks with support for titles, categories, due dates, and priorities (low, medium, high).
🔍 Advanced filtering to view tasks by status (all, active, completed) or category (Work, Personal, Shopping, Health, Other).
✅ Task completion toggle using checkboxes, with real-time UI updates and status tracking.
🧮 Dynamic statistics dashboard showing the total number of tasks, completed ones, and those still pending.
🌗 Dark mode toggle, with preferences saved using
localStorage, giving users a customizable experience.📅 Smart date display – tasks due today or tomorrow are automatically labeled, improving clarity.
💾 LocalStorage-based persistence, ensuring that all tasks are saved even after refreshing or closing the browser.
🚮 Delete functionality with confirmation, helping users maintain a clean and organized list.
The app also includes subtle animations, hover effects, and success notifications to enhance the user experience and keep the interface feeling modern and engaging.
Perfect for individual users, productivity tools, or as part of a larger project, TaskFlow showcases a solid front-end structure, UI best practices, and thoughtful UX design — all in a single-page app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaskFlow - Modern Task Manager</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.task-item {
transition: all 0.3s ease;
}
.task-item:hover {
transform: translateX(4px);
}
.fade-in {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dark {
background-color: #1a1a1a;
color: #e5e5e5;
}
.dark .bg-white {
background-color: #2d2d2d;
}
.dark .bg-gray-50 {
background-color: #252525;
}
.dark .text-gray-700 {
color: #e5e5e5;
}
.dark .text-gray-600 {
color: #b3b3b3;
}
.dark .border-gray-200 {
border-color: #404040;
}
.dark .hover\:bg-gray-100:hover {
background-color: #3a3a3a;
}
.priority-high {
border-left: 4px solid #ef4444;
}
.priority-medium {
border-left: 4px solid #f59e0b;
}
.priority-low {
border-left: 4px solid #10b981;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen transition-colors duration-300">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Header -->
<header class="mb-8 fade-in">
<div class="flex justify-between items-center mb-6">
<div>
<h1 class="text-4xl font-bold text-gray-800 flex items-center gap-3">
<i class="fas fa-tasks text-blue-600"></i>
TaskFlow
</h1>
<p class="text-gray-600 mt-2">Organize your day, achieve your goals</p>
</div>
<button id="darkModeToggle" class="p-3 rounded-lg bg-white shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-moon text-gray-700"></i>
</button>
</div>
<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-600 text-sm">Total Tasks</p>
<p class="text-2xl font-semibold text-gray-800" id="totalTasks">0</p>
</div>
<i class="fas fa-list text-blue-500 text-2xl"></i>
</div>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-600 text-sm">Completed</p>
<p class="text-2xl font-semibold text-green-600" id="completedTasks">0</p>
</div>
<i class="fas fa-check-circle text-green-500 text-2xl"></i>
</div>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-600 text-sm">Pending</p>
<p class="text-2xl font-semibold text-orange-600" id="pendingTasks">0</p>
</div>
<i class="fas fa-clock text-orange-500 text-2xl"></i>
</div>
</div>
</div>
</header>
<!-- Add Task Form -->
<section class="bg-white rounded-lg shadow-md p-6 mb-6 fade-in">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Add New Task</h2>
<form id="taskForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" id="taskTitle" placeholder="Task title..."
class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required>
<select id="taskCategory"
class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="work">Work</option>
<option value="personal">Personal</option>
<option value="shopping">Shopping</option>
<option value="health">Health</option>
<option value="other">Other</option>
</select>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<select id="taskPriority"
class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="low">Low Priority</option>
<option value="medium">Medium Priority</option>
<option value="high">High Priority</option>
</select>
<input type="date" id="taskDueDate"
class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit"
class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
<i class="fas fa-plus"></i>
Add Task
</button>
</div>
</form>
</section>
<!-- Filters -->
<section class="mb-6 fade-in">
<div class="flex flex-wrap gap-2">
<button class="filter-btn active px-4 py-2 rounded-lg bg-blue-600 text-white transition-colors"
data-filter="all">
All Tasks
</button>
<button
class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors"
data-filter="active">
Active
</button>
<button
class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors"
data-filter="completed">
Completed
</button>
<button
class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors"
data-filter="work">
<i class="fas fa-briefcase mr-1"></i> Work
</button>
<button
class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors"
data-filter="personal">
<i class="fas fa-user mr-1"></i> Personal
</button>
</div>
</section>
<!-- Tasks List -->
<main class="space-y-3" id="tasksList">
<!-- Tasks will be dynamically added here -->
</main>
<!-- Empty State -->
<div id="emptyState" class="text-center py-12 hidden">
<i class="fas fa-clipboard-list text-6xl text-gray-300 mb-4"></i>
<p class="text-gray-500 text-lg">No tasks yet. Add your first task above!</p>
</div>
</div>
<script>
$(document).ready(function () {
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
let currentFilter = 'all';
// Initialize
renderTasks();
updateStats();
// Dark mode toggle
$('#darkModeToggle').click(function () {
$('body').toggleClass('dark');
const icon = $(this).find('i');
icon.toggleClass('fa-moon fa-sun');
localStorage.setItem('darkMode', $('body').hasClass('dark'));
});
// Load dark mode preference
if (localStorage.getItem('darkMode') === 'true') {
$('body').addClass('dark');
$('#darkModeToggle i').removeClass('fa-moon').addClass('fa-sun');
}
// Add task
$('#taskForm').submit(function (e) {
e.preventDefault();
const task = {
id: Date.now(),
title: $('#taskTitle').val(),
category: $('#taskCategory').val(),
priority: $('#taskPriority').val(),
dueDate: $('#taskDueDate').val(),
completed: false,
createdAt: new Date().toISOString()
};
tasks.unshift(task);
saveTasks();
renderTasks();
updateStats();
// Reset form
this.reset();
// Show success animation
showNotification('Task added successfully!');
});
// Filter buttons
$('.filter-btn').click(function () {
$('.filter-btn').removeClass('active bg-blue-600 text-white').addClass('bg-gray-200 text-gray-700');
$(this).removeClass('bg-gray-200 text-gray-700').addClass('active bg-blue-600 text-white');
currentFilter = $(this).data('filter');
renderTasks();
});
// Render tasks
function renderTasks() {
const filteredTasks = filterTasks(tasks, currentFilter);
const tasksList = $('#tasksList');
const emptyState = $('#emptyState');
tasksList.empty();
if (filteredTasks.length === 0) {
emptyState.removeClass('hidden');
} else {
emptyState.addClass('hidden');
filteredTasks.forEach(task => {
const taskElement = createTaskElement(task);
tasksList.append(taskElement);
});
}
}
// Create task element
function createTaskElement(task) {
const categoryIcons = {
work: 'fa-briefcase',
personal: 'fa-user',
shopping: 'fa-shopping-cart',
health: 'fa-heartbeat',
other: 'fa-tag'
};
const categoryColors = {
work: 'bg-blue-100 text-blue-700',
personal: 'bg-green-100 text-green-700',
shopping: 'bg-purple-100 text-purple-700',
health: 'bg-red-100 text-red-700',
other: 'bg-gray-100 text-gray-700'
};
const isOverdue = task.dueDate && new Date(task.dueDate) < new Date() && !task.completed;
return $(`
<div class="task-item bg-white rounded-lg shadow-sm p-4 priority-${task.priority} ${task.completed ? 'opacity-60' : ''} fade-in">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3 flex-1">
<input type="checkbox" class="task-checkbox w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
data-id="${task.id}" ${task.completed ? 'checked' : ''}>
<div class="flex-1">
<h3 class="font-medium text-gray-800 ${task.completed ? 'line-through' : ''}">${task.title}</h3>
<div class="flex items-center gap-3 mt-1">
<span class="text-xs px-2 py-1 rounded-full ${categoryColors[task.category]}">
<i class="fas ${categoryIcons[task.category]} mr-1"></i>${task.category}
</span>
${task.dueDate ? `
<span class="text-xs text-gray-600 ${isOverdue ? 'text-red-600 font-medium' : ''}">
<i class="far fa-calendar mr-1"></i>${formatDate(task.dueDate)}
</span>
` : ''}
<span class="text-xs text-gray-500 capitalize">
<i class="fas fa-flag mr-1"></i>${task.priority}
</span>
</div>
</div>
</div>
<button class="delete-task text-red-500 hover:text-red-700 transition-colors" data-id="${task.id}">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`);
}
// Toggle task completion
$(document).on('change', '.task-checkbox', function () {
const taskId = parseInt($(this).data('id'));
const task = tasks.find(t => t.id === taskId);
if (task) {
task.completed = !task.completed;
saveTasks();
renderTasks();
updateStats();
showNotification(task.completed ? 'Task completed!' : 'Task marked as active');
}
});
// Delete task
$(document).on('click', '.delete-task', function () {
const taskId = parseInt($(this).data('id'));
if (confirm('Are you sure you want to delete this task?')) {
tasks = tasks.filter(t => t.id !== taskId);
saveTasks();
renderTasks();
updateStats();
showNotification('Task deleted successfully!');
}
});
// Filter tasks
function filterTasks(tasks, filter) {
switch (filter) {
case 'active':
return tasks.filter(t => !t.completed);
case 'completed':
return tasks.filter(t => t.completed);
case 'work':
case 'personal':
case 'shopping':
case 'health':
case 'other':
return tasks.filter(t => t.category === filter);
default:
return tasks;
}
}
// Update statistics
function updateStats() {
const total = tasks.length;
const completed = tasks.filter(t => t.completed).length;
const pending = total - completed;
$('#totalTasks').text(total);
$('#completedTasks').text(completed);
$('#pendingTasks').text(pending);
}
// Save tasks to localStorage
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Format date
function formatDate(dateString) {
const date = new Date(dateString);
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
if (date.toDateString() === today.toDateString()) {
return 'Today';
} else if (date.toDateString() === tomorrow.toDateString()) {
return 'Tomorrow';
} else {
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}
}
// Show notification
function showNotification(message) {
const notification = $(`
<div class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg fade-in z-50">
<i class="fas fa-check-circle mr-2"></i>${message}
</div>
`);
$('body').append(notification);
setTimeout(() => {
notification.fadeOut(() => notification.remove());
}, 3000);
}
});
</script>
</body>
</html>
