Let’s build a Task Management Dashboard in JavaScript (HTML + CSS + JS).
I’ll give you a complete project with CRUD, status management, search, and sorting.
Here’s a production-ready project 👇
📂 Project Structure
task-dashboard/
│── index.html
│── style.css
│── script.js
🖼 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Management Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Task Management Dashboard</h1>
<!-- Task Form -->
<form id="taskForm">
<input type="hidden" id="taskId">
<input type="text" id="title" placeholder="Task Title" required>
<textarea id="description" placeholder="Task Description"></textarea>
<input type="date" id="dueDate" required>
<select id="priority">
<option value="Low">Low</option>
<option value="Medium" selected>Medium</option>
<option value="High">High</option>
</select>
<button type="submit">Save Task</button>
</form>
<!-- Search & Sort -->
<div class="controls">
<input type="text" id="search" placeholder="Search by title...">
<select id="sortBy">
<option value="">Sort By</option>
<option value="dueDate">Due Date</option>
<option value="priority">Priority</option>
</select>
<select id="statusFilter">
<option value="">All Status</option>
<option value="Pending">Pending</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
</select>
</div>
<!-- Task List -->
<div id="taskList" class="task-list"></div>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 style.css
body {
font-family: Arial, sans-serif;
background: #f4f6f9;
margin: 0;
padding: 0;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h1 { text-align: center; }
form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
form input, form textarea, form select, form button {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
form textarea { grid-column: span 2; }
form button {
grid-column: span 2;
background: #007bff;
color: white;
border: none;
cursor: pointer;
}
form button:hover { background: #0056b3; }
.controls {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.controls input, .controls select {
padding: 8px;
border-radius: 5px;
border: 1px solid #ddd;
}
.task-list {
display: grid;
gap: 15px;
}
.task {
padding: 15px;
border-radius: 10px;
border: 1px solid #ddd;
background: #fafafa;
}
.task h3 {
margin: 0 0 5px;
}
.task p {
margin: 5px 0;
}
.task .meta {
font-size: 14px;
color: #555;
}
.task .actions {
margin-top: 10px;
}
.task button {
margin-right: 5px;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.task .edit { background: #ffc107; }
.task .delete { background: #dc3545; color: white; }
.task .status { background: #28a745; color: white; }
⚡ script.js
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
const taskForm = document.getElementById("taskForm");
const taskList = document.getElementById("taskList");
const searchInput = document.getElementById("search");
const sortBy = document.getElementById("sortBy");
const statusFilter = document.getElementById("statusFilter");
// Save task
taskForm.addEventListener("submit", function (e) {
e.preventDefault();
const id = document.getElementById("taskId").value;
const title = document.getElementById("title").value;
const description = document.getElementById("description").value;
const dueDate = document.getElementById("dueDate").value;
const priority = document.getElementById("priority").value;
if (id) {
// Update
tasks = tasks.map(t =>
t.id == id ? { ...t, title, description, dueDate, priority } : t
);
} else {
// Create
tasks.push({
id: Date.now(),
title,
description,
dueDate,
priority,
status: "Pending"
});
}
localStorage.setItem("tasks", JSON.stringify(tasks));
taskForm.reset();
document.getElementById("taskId").value = "";
renderTasks();
});
// Render tasks
function renderTasks() {
let filtered = [...tasks];
// Search
const search = searchInput.value.toLowerCase();
if (search) {
filtered = filtered.filter(t => t.title.toLowerCase().includes(search));
}
// Status filter
if (statusFilter.value) {
filtered = filtered.filter(t => t.status === statusFilter.value);
}
// Sort
if (sortBy.value === "dueDate") {
filtered.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
}
if (sortBy.value === "priority") {
const order = { High: 1, Medium: 2, Low: 3 };
filtered.sort((a, b) => order[a.priority] - order[b.priority]);
}
taskList.innerHTML = "";
filtered.forEach(task => {
const div = document.createElement("div");
div.className = "task";
div.innerHTML = `
<h3>${task.title}</h3>
<p>${task.description}</p>
<p class="meta">📅 ${task.dueDate} | 🔥 ${task.priority} | 📌 ${task.status}</p>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
<button class="status">Change Status</button>
</div>
`;
// Edit
div.querySelector(".edit").addEventListener("click", () => {
document.getElementById("taskId").value = task.id;
document.getElementById("title").value = task.title;
document.getElementById("description").value = task.description;
document.getElementById("dueDate").value = task.dueDate;
document.getElementById("priority").value = task.priority;
});
// Delete
div.querySelector(".delete").addEventListener("click", () => {
tasks = tasks.filter(t => t.id !== task.id);
localStorage.setItem("tasks", JSON.stringify(tasks));
renderTasks();
});
// Change Status
div.querySelector(".status").addEventListener("click", () => {
const next = { Pending: "In Progress", "In Progress": "Completed", Completed: "Pending" };
task.status = next[task.status];
localStorage.setItem("tasks", JSON.stringify(tasks));
renderTasks();
});
taskList.appendChild(div);
});
}
// Events
searchInput.addEventListener("input", renderTasks);
sortBy.addEventListener("change", renderTasks);
statusFilter.addEventListener("change", renderTasks);
// Initial render
renderTasks();
✅ Features Covered:
- CRUD: Add, Edit, Delete tasks.
- Status Change: Pending → In Progress → Completed.
- Search & Sort: Search by title, sort by date/priority.
- Filter: Filter by status.
- LocalStorage: Data persists after refresh.
About the Author
