The Palos Publishing Company

Categories We Write About

Build a “What I Learned Today” tracker

Written by

Bernardo Palos

in

Here’s a detailed guide to building a “What I Learned Today” tracker—a simple, personal productivity tool to record daily lessons, insights, or discoveries. This tracker can be created as a web app, spreadsheet, or physical journal, but here’s how to build it as a minimal web app with features that can grow with your needs.

Features of the “What I Learned Today” Tracker

  1. Daily Entry Logging

  2. Date & Time Stamp

  3. Search & Filter Past Entries

  4. Tagging System

  5. Progress & Reflection View

Tech Stack (for a simple web app version)

  • Frontend: HTML, Tailwind CSS, JavaScript

  • Backend: Node.js with Express (or use a no-backend approach with localStorage)

  • Optional: SQLite or localStorage for persistence

Code: Minimal Frontend Version (with localStorage)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>What I Learned Today</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="bg-white p-6 rounded-2xl shadow-xl w-full max-w-xl">
    <h1 class="text-2xl font-bold mb-4">What I Learned Today</h1>
    <form id="entryForm" class="mb-6">
      <textarea id="entryText" class="w-full p-2 border rounded-lg" rows="4" placeholder="Write what you learned today..." required></textarea>
      <input type="text" id="tags" class="w-full p-2 mt-2 border rounded-lg" placeholder="Tags (comma-separated)">
      <button type="submit" class="mt-3 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Save Entry</button>
    </form>

    <input type="text" id="search" placeholder="Search entries..." class="w-full p-2 mb-4 border rounded-lg"/>

    <div id="entries" class="space-y-4"></div>
  </div>

  <script>
    const form = document.getElementById('entryForm');
    const entryText = document.getElementById('entryText');
    const entriesDiv = document.getElementById('entries');
    const tagsInput = document.getElementById('tags');
    const searchInput = document.getElementById('search');

    function saveEntry(text, tags) {
      const entries = JSON.parse(localStorage.getItem('entries') || '[]');
      entries.unshift({ text, tags, date: new Date().toISOString() });
      localStorage.setItem('entries', JSON.stringify(entries));
      renderEntries();
    }

    function renderEntries(filter = '') {
      const entries = JSON.parse(localStorage.getItem('entries') || '[]');
      entriesDiv.innerHTML = '';
      const filtered = entries.filter(e => e.text.toLowerCase().includes(filter.toLowerCase()) || (e.tags && e.tags.toLowerCase().includes(filter.toLowerCase())));
      for (let entry of filtered) {
        const div = document.createElement('div');
        div.className = 'p-4 bg-gray-50 rounded-lg border';
        div.innerHTML = `
          <p class="mb-2">${entry.text}</p>
          <p class="text-sm text-gray-500">${new Date(entry.date).toLocaleString()}</p>
          ${entry.tags ? `<p class="text-sm text-blue-500 mt-1">Tags: ${entry.tags}</p>` : ''}
        `;
        entriesDiv.appendChild(div);
      }
    }

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const text = entryText.value.trim();
      const tags = tagsInput.value.trim();
      if (text) {
        saveEntry(text, tags);
        entryText.value = '';
        tagsInput.value = '';
      }
    });

    searchInput.addEventListener('input', () => {
      renderEntries(searchInput.value);
    });

    renderEntries();
  </script>
</body>
</html>

Features Explained

  • Entry Input: Textarea for entering what you learned, with optional tags.

  • Save to localStorage: Data persists in browser even after reloads.

  • Search Box: Live filtering of entries by keyword or tag.

  • Tagging: Helps categorize or organize topics like “JavaScript”, “Mindset”, or “Books”.

  • Auto Timestamp: Each entry logs the current date and time automatically.

Optional Feature Enhancements

  • Calendar View: Use a library like FullCalendar.js to show when you logged entries.

  • Export Entries: Add a button to download your entries as CSV or JSON.

  • Daily Reminder: Integrate browser notifications to remind you to log a new entry.

  • User Authentication: If deployed online, add user accounts for privacy.

  • Cloud Sync: Replace localStorage with Firebase or Supabase for cross-device sync.

Use Cases

  • Daily journaling for personal growth.

  • Knowledge retention from books, courses, or meetings.

  • Team-sharing of daily takeaways (with backend + multi-user support).

This lightweight version is perfect to run locally or deploy as a simple personal web app.

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About