Here’s a simple Task Completion Dashboard using HTML, CSS (with Tailwind for simplicity), and a bit of JavaScript for interactivity:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Task Completion Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen p-6">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-center mb-6">Task Completion Dashboard</h1>
<div class="bg-white rounded-xl shadow-md p-6 space-y-4">
<form id="task-form" class="flex gap-4">
<input
type="text"
id="task-input"
placeholder="Add a new task"
class="flex-grow border p-2 rounded-lg"
/>
<button
type="submit"
class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
>
Add
</button>
</form>
<ul id="task-list" class="space-y-2"></ul>
<div class="pt-4 border-t mt-4 flex justify-between text-gray-600 text-sm">
<span id="total-tasks">Total Tasks: 0</span>
<span id="completed-tasks">Completed: 0</span>
</div>
</div>
</div>
<script>
const taskForm = document.getElementById("task-form");
const taskInput = document.getElementById("task-input");
const taskList = document.getElementById("task-list");
const totalTasks = document.getElementById("total-tasks");
const completedTasks = document.getElementById("completed-tasks");
let tasks = [];
taskForm.addEventListener("submit", function (e) {
e.preventDefault();
const text = taskInput.value.trim();
if (text) {
const task = { id: Date.now(), text, completed: false };
tasks.push(task);
taskInput.value = "";
renderTasks();
}
});
function renderTasks() {
taskList.innerHTML = "";
tasks.forEach(task => {
const li = document.createElement("li");
li.className = "flex items-center justify-between p-3 bg-gray-50 rounded-lg shadow-sm";
li.innerHTML = `
<div class="flex items-center gap-3">
<input type="checkbox" ${task.completed ? "checked" : ""} class="form-checkbox h-5 w-5" data-id="${task.id}">
<span class="${task.completed ? "line-through text-gray-400" : ""}">${task.text}</span>
</div>
<button class="text-red-500 hover:text-red-700" data-id="${task.id}" data-action="delete">🗑️</button>
`;
taskList.appendChild(li);
});
updateStats();
}
taskList.addEventListener("click", function (e) {
const id = e.target.dataset.id;
if (e.target.type === "checkbox") {
tasks = tasks.map(task =>
task.id == id ? { ...task, completed: !task.completed } : task
);
renderTasks();
} else if (e.target.dataset.action === "delete") {
tasks = tasks.filter(task => task.id != id);
renderTasks();
}
});
function updateStats() {
totalTasks.textContent = `Total Tasks: ${tasks.length}`;
const completed = tasks.filter(task => task.completed).length;
completedTasks.textContent = `Completed: ${completed}`;
}
</script>
</body>
</html>
This dashboard includes:
-
Task addition via a form
-
Task completion toggle
-
Delete task functionality
-
Real-time updates of total and completed tasks
You can customize the styles and extend the functionality with filtering, persistence (e.g., localStorage), or backend integration as needed.
Share this Page your favorite way: Click any app below to share.