The Palos Publishing Company

Categories We Write About

Create a dashboard for task due dates

Written by

in

Computer Science

Here’s a detailed guide and example code to create a clean, functional dashboard for task due dates using HTML, CSS, and JavaScript. This dashboard will display tasks with their due dates, highlight overdue tasks, and allow sorting by due date.

Features:

List of tasks with due dates
Overdue tasks highlighted in red
Tasks sorted by due date (soonest first)
Simple, clean, and responsive layout

Code Example

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Task Due Date Dashboard</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f7f9fc;
    margin: 0;
    padding: 20px;
  }
  h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  .dashboard {
    max-width: 700px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  th {
    cursor: pointer;
    background: #f0f4f8;
  }
  tr.overdue {
    background-color: #ffe6e6;
    color: #b30000;
  }
  tr:hover {
    background-color: #f9f9f9;
  }
  .status {
    font-weight: bold;
  }
</style>
</head>
<body>

<h1>Task Due Date Dashboard</h1>

<div class="dashboard">
  <table id="taskTable">
    <thead>
      <tr>
        <th>Task Name</th>
        <th id="dueDateHeader">Due Date &#x25B2;</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody id="taskBody">
      <!-- Tasks will be dynamically inserted here -->
    </tbody>
  </table>
</div>

<script>
  const tasks = [
    { name: "Finish project report", dueDate: "2025-05-18" },
    { name: "Prepare presentation slides", dueDate: "2025-05-21" },
    { name: "Email client feedback", dueDate: "2025-05-17" },
    { name: "Team meeting", dueDate: "2025-05-20" },
    { name: "Code review", dueDate: "2025-05-16" }
  ];

  let ascending = true;

  function renderTasks(taskList) {
    const tbody = document.getElementById('taskBody');
    tbody.innerHTML = '';

    const today = new Date();

    taskList.forEach(task => {
      const dueDateObj = new Date(task.dueDate);
      const isOverdue = dueDateObj < today;

      const tr = document.createElement('tr');
      if (isOverdue) {
        tr.classList.add('overdue');
      }

      tr.innerHTML = `
        <td>${task.name}</td>
        <td>${dueDateObj.toLocaleDateString()}</td>
        <td class="status">${isOverdue ? 'Overdue' : 'On Time'}</td>
      `;

      tbody.appendChild(tr);
    });
  }

  function sortTasks() {
    tasks.sort((a, b) => {
      const dateA = new Date(a.dueDate);
      const dateB = new Date(b.dueDate);
      return ascending ? dateA - dateB : dateB - dateA;
    });
    renderTasks(tasks);
    ascending = !ascending;

    // Update arrow direction in header
    const header = document.getElementById('dueDateHeader');
    header.innerHTML = `Due Date ${ascending ? '&#x25B2;' : '&#x25BC;'}`;
  }

  document.getElementById('dueDateHeader').addEventListener('click', sortTasks);

  // Initial render
  renderTasks(tasks);
</script>

</body>
</html>

How this works:

The tasks array stores task objects with names and due dates.
The table dynamically populates task rows.
Overdue tasks (due date before today) are highlighted red and marked “Overdue.”
Clicking the “Due Date” column header sorts the list ascending/descending by date.
The arrow symbol changes direction to show sorting order.

You can extend this dashboard by adding filtering, adding new tasks, or integrating with a backend. Would you like me to help with that next?

Share This Page:

Comments

Leave a Reply Cancel reply

Check Out Our Newest Posts we wrote about

Categories We Write About