#100DaysOfCode Tracker Built With HTML5 LocalStorage + JS Only

If you’re on a mission to complete the #100DaysOfCode challenge, tracking your daily progress is essential. But what if you don’t want to fuss around with setting up a backend or deploying a database? Good news: you can build a fully functional daily coding tracker using nothing but HTML, plain JavaScript, and the power of the browser’s localStorage API.

This blog post walks you through creating a simple, clean client-only #100DaysOfCode tracker. We’ll dive deep into HTML markup, JavaScript logic, styling with CSS, and how to harness localStorage to save user data—all without writing a single line of backend code.

1. Introduction to Browser Storage and the Project Overview

Browsers support localStorage, a simple key-value API that persists data in a user’s browser between sessions. This makes it ideal for small user-focused apps with low data storage needs—like a habit tracker.

Our project allows you to:

Log your daily progress
Attach a date and short note for each day
Persist data across sessions using localStorage
No backend or frameworks required

Perfect for people who want to build something, fast.

2. HTML Skeleton: Building the Tracker Interface

We’ll start by creating a simple HTML form that allows users to log each day’s progress. In addition to the form, we’ll have a list area where saved days are displayed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>#100DaysOfCode Tracker</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <h1>#100DaysOfCode Progress Tracker</h1>
  <form id="logForm">
    <input type="date" id="logDate" required />
    <textarea id="logNote" placeholder="What did you build today?" required></textarea>
    <button type="submit">Add Entry</button>
  </form>

  <h2>Your Progress</h2>
  <ul id="logList"></ul>

  <script src="script.js"></script>
</body>
</html>

This gives us the structure we need to interact with user input and display logs.

3. Saving & Loading Progress With localStorage

The localStorage API lets us store string-keyed data right in the browser.

We’ll use JSON to serialize and deserialize our entry objects. Here’s the basic logic for adding a new log, saving it, and rendering the list:

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('logForm');
  const logList = document.getElementById('logList');

  let logs = JSON.parse(localStorage.getItem('codeLogs')) || [];
  renderLogs();

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    const date = document.getElementById('logDate').value;
    const note = document.getElementById('logNote').value;

    const entry = { date, note };
    logs.push(entry);
    localStorage.setItem('codeLogs', JSON.stringify(logs));

    renderLogs();
    form.reset();
  });

  function renderLogs() {
    logList.innerHTML = '';
    logs.forEach((log, index) => {
      const li = document.createElement('li');
      li.innerHTML = `Day ${index + 1} - ${log.date}: ${log.note}`;
      logList.appendChild(li);
    });
  }
});

This code initializes the logs array from localStorage (if it exists), adds new entries on form submission, and re-renders the list in the DOM. Each entry includes the challenge day, date, and a note.

4. Styling With CSS: Keep It Clean

We want the UI to be user-friendly and minimal. Here’s an example of basic CSS to get your app looking polished fast:

body {
  font-family: Arial, sans-serif;
  margin: 2rem;
  background-color: #f9f9f9;
  color: #333;
}

form {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}

input, textarea, button {
  margin: 0.5rem 0;
  padding: 0.75rem;
  font-size: 1rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #fff;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

These styles help increase readability and user engagement. You can of course personalize the design according to your preferences.

5. Best Practices and Enhancement Ideas

Here are a few helpful ideas to improve functionality and performance:

💾 Data Validation: Avoid duplicate dates or enforce one log per day.
🗑️ Delete Option: Add the ability to remove or edit entries.
📱 Responsive Design: Make it mobile-friendly with media queries.
🔁 Backup/Export: Offer a JSON export feature for backup.
📆 Calendar Integration: Allow users to see a calendar view of their log streak.

Performance Tip: Since localStorage is synchronous, accessing or setting data on large logs could slow UI down. For bigger apps or more frequent access, consider debouncing writes, delaying UI updates, or eventually storing into IndexedDB.

Conclusion

We’ve shown how a basic HTML/JS app and localStorage can deliver real value—no servers or databases needed. With just a few lines of code, you now have a private, persistent way to track your #100DaysOfCode journey in the browser.

Not only is this a lightweight solution, but it’s also a great way to reinforce your front-end development knowledge while building a tool to keep yourself productive. Grab the code, customize it, and never miss a day again!

Useful links: