Build a Study Planner App with JavaScript

A study planner app is one of the most useful beginner projects you can build, because you will actually use it yourself. It lets you add subjects, set study sessions, and check them off as you finish. You will learn forms, lists, localStorage, and date handling — the same skills behind almost every productivity app.

Start with the data. Each study task has a subject, a topic, and minutes planned:

let tasks = JSON.parse(localStorage.getItem("studyTasks") || "[]");

function save() {
  localStorage.setItem("studyTasks", JSON.stringify(tasks));
}

function addTask(subject, topic, minutes) {
  tasks.push({ id: Date.now(), subject, topic, minutes, done: false });
  save();
  render();
}

Then render the list. Each task gets a checkbox and a delete button:

function render() {
  const list = document.querySelector("#tasks");
  list.innerHTML = "";
  tasks.forEach((t) => {
    const li = document.createElement("li");
    li.innerHTML = `
      <input type="checkbox" ${t.done ? "checked" : ""} data-id="${t.id}">
      <strong>${t.subject}</strong> — ${t.topic} (${t.minutes} min)
      <button data-del="${t.id}">Delete</button>`;
    list.appendChild(li);
  });
  const done = tasks.filter((t) => t.done).length;
  document.querySelector("#progress").textContent =
    `${done} of ${tasks.length} tasks done`;
}

Handle clicks with one listener on the list, instead of one per button:

document.querySelector("#tasks").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id || e.target.dataset.del);
  if (e.target.dataset.del) {
    tasks = tasks.filter((t) => t.id !== id);
  } else if (e.target.dataset.id) {
    const task = tasks.find((t) => t.id === id);
    task.done = !task.done;
  }
  save();
  render();
});

Planning your study time well is a skill of its own, and the best time management books explain it better than any app can — how to prioritise, how to break big topics into small sessions, and how to review instead of just re-reading. Pair the app with one of those ideas: plan tomorrow's sessions tonight, keep each session to 25–50 minutes, and review your completed tasks every Sunday.

What you learn from this project: storing data in the browser, rendering a list from data, handling events with delegation, and keeping the page and the saved data in sync. Add one feature next: a timer for each session, and a weekly summary that shows how many minutes you studied per subject.

Your first step today: build this app in a single HTML file, add your real subjects for tomorrow, and use it for one full study day. In a week you will have a planner that knows your routine better than any notebook.