Meet the mC0de Student Dashboard

Your final project is a small, interactive learning application. Instead of practicing JavaScript features separately, you’ll combine them into one experience.

The dashboard will manage tasks, calculate completion progress, filter information, remember settings, and optionally retrieve data from a public API.

Organize Information With Arrays and Objects

Start by representing each task as an object. Store those objects inside an array.

let tasks = [
  {
    id: 1,
    title: "Review JavaScript arrays",
    completed: false
  },
  {
    id: 2,
    title: "Practice DOM events",
    completed: true
  }
];

Each object has an identifier, a title, and a completion status. This structure makes adding, editing, filtering, and deleting tasks much easier.

Use DOM Methods to Display Your Data

Rather than manually adding a new HTML element for every task, JavaScript can generate the interface from your array.

function renderTasks() {
  const container = document.getElementById("tasks");
  container.replaceChildren();

  tasks.forEach(function(task) {
    const item = document.createElement("p");
    item.textContent = task.title;
    container.appendChild(item);
  });
}

Using textContent also prevents task titles from being interpreted as HTML.

Connect Buttons, Forms, and Events

Use addEventListener() to respond when visitors add a task or mark one complete. Validate the input before changing your data.

function addTask(title) {
  const cleanTitle = title.trim();

  if (!cleanTitle) {
    return;
  }

  tasks.push({
    id: Date.now(),
    title: cleanTitle,
    completed: false
  });

  renderTasks();
}

In a larger application, use a more robust unique identifier. For this beginner project, the completed solution uses an identifier combining time and randomness.

Turn Task Data Into Useful Statistics

Use array methods to calculate how much work is complete.

const completed = tasks.filter(function(task) {
  return task.completed;
}).length;

const percentage = tasks.length
  ? Math.round(completed / tasks.length * 100)
  : 0;

console.log(percentage + "% complete");

Update a progress bar whenever a task changes. This combines arrays, conditionals, arithmetic, functions, and DOM manipulation.

Add Persistence and Optional API Data

Use the JSON and localStorage skills from Lessons 14 and 16 to remember task information between visits.

// Save:
localStorage.setItem(
  "studentTasks",
  JSON.stringify(tasks)
);

// Load:
const saved = localStorage.getItem("studentTasks");

if (saved) {
  tasks = JSON.parse(saved);
}

The finished project also includes an optional Fetch API button for retrieving a suggested activity. Handle unavailable networks gracefully with a built-in suggestion.

Test Your Dashboard Like a Developer

A project isn’t finished just because it looks correct. Verify that its interactions work, including unusual situations.

• Add a task and confirm it appears immediately.
• Try submitting an empty title and verify that it is rejected.
• Mark tasks complete and incomplete; confirm the percentage changes.
• Edit and delete tasks, then verify the task count.
• Search for a task and try filters with no matches.
• Reload the preview and confirm saved tasks return.
• Test the API feature with and without network access.
• Check the dashboard on a narrow mobile screen.