Build a Reading Tracker App with JavaScript

A reading tracker app helps you keep a list of books you want to read, books you are reading, and books you have finished. It is a perfect beginner project: it uses forms, lists, localStorage, and a little progress math — and you end up with a tool you will actually open every day.

Start with the data. Each book has a title, an author, total pages, and pages read:

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

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

function addBook(title, author, pages) {
  books.push({ id: Date.now(), title, author, pages, read: 0 });
  save();
  render();
}

Then render the list with a progress bar for each book:

function render() {
  const list = document.querySelector("#books");
  list.innerHTML = "";
  books.forEach((b) => {
    const percent = Math.round((b.read / b.pages) * 100);
    const li = document.createElement("li");
    li.innerHTML = `
      <strong>${b.title}</strong> by ${b.author}
      <div class="bar"><div style="width:${percent}%"></div></div>
      <span>${b.read} / ${b.pages} pages (${percent}%)</span>
      <button data-more="${b.id}">+10 pages</button>
      <button data-del="${b.id}">Remove</button>`;
    list.appendChild(li);
  });
}

Handle the buttons with one listener, and keep the data and the page in sync:

document.querySelector("#books").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.more || e.target.dataset.del);
  const book = books.find((b) => b.id === id);
  if (e.target.dataset.more) {
    book.read = Math.min(book.pages, book.read + 10);
  } else if (e.target.dataset.del) {
    books = books.filter((b) => b.id !== id);
  }
  save();
  render();
});

Once the tracker works, the next question is what to read. If you want a large list of books to choose from, Skill Library has a 12,000+ eBook bundle covering business, finance, psychology, AI, marketing and self-growth in Hindi and English — pick your next three books from a bundle like that, add them to your tracker, and let the progress bars do the motivating.

What you learn from this project: storing structured data in the browser, calculating progress, rendering lists from data, and handling many buttons with one event listener. Add one feature next: a daily reading goal, and a streak counter that shows how many days in a row you read.

Your first step today: build this app in a single HTML file, add three books you already own, and update your progress tonight. In a week your reading habit will be visible — and visible habits are much harder to quit.