The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Build a journaling streak tracker

Written by

in

Computer Science

Here’s how you can build a simple Journaling Streak Tracker using HTML, CSS, and JavaScript. It keeps track of how many consecutive days you’ve written a journal entry and stores progress in the browser’s local storage so your streak persists across sessions.

🛠 Features:

Tracks daily journaling streak
Saves progress using localStorage
Displays current streak and last entry date
Allows daily journal input

✅ Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Journaling Streak Tracker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f2f4f8;
      margin: 0;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .container {
      background: white;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
      max-width: 600px;
      width: 100%;
    }
    h1 {
      text-align: center;
      margin-bottom: 1rem;
    }
    textarea {
      width: 100%;
      height: 150px;
      padding: 1rem;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      resize: none;
    }
    button {
      background: #4CAF50;
      color: white;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      width: 100%;
    }
    button:hover {
      background: #45a049;
    }
    .streak-info {
      margin-top: 1rem;
      text-align: center;
      font-size: 1.1rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Journaling Streak Tracker</h1>
    <textarea id="journalEntry" placeholder="Write your journal for today..."></textarea>
    <button onclick="saveEntry()">Save Entry</button>
    <div class="streak-info">
      <p>Current Streak: <span id="streakCount">0</span> days</p>
      <p>Last Entry: <span id="lastDate">None</span></p>
    </div>
  </div>

  <script>
    function formatDate(date) {
      return date.toISOString().split('T')[0];
    }

    function saveEntry() {
      const entry = document.getElementById('journalEntry').value.trim();
      if (!entry) {
        alert('Please write something before saving.');
        return;
      }

      const today = new Date();
      const todayStr = formatDate(today);
      const lastDateStr = localStorage.getItem('lastEntryDate');
      const streak = parseInt(localStorage.getItem('streak') || '0');

      if (lastDateStr === todayStr) {
        alert('You already submitted an entry for today.');
        return;
      }

      let newStreak = streak;

      if (lastDateStr) {
        const lastDate = new Date(lastDateStr);
        const diff = (today - lastDate) / (1000 * 60 * 60 * 24);
        if (diff === 1) {
          newStreak += 1;
        } else if (diff > 1) {
          newStreak = 1;
        }
      } else {
        newStreak = 1;
      }

      localStorage.setItem('lastEntryDate', todayStr);
      localStorage.setItem('streak', newStreak.toString());
      localStorage.setItem(`entry-${todayStr}`, entry);

      updateDisplay();
      document.getElementById('journalEntry').value = '';
      alert('Journal entry saved!');
    }

    function updateDisplay() {
      const streak = localStorage.getItem('streak') || '0';
      const lastDate = localStorage.getItem('lastEntryDate') || 'None';
      document.getElementById('streakCount').innerText = streak;
      document.getElementById('lastDate').innerText = lastDate;
    }

    window.onload = updateDisplay;
  </script>
</body>
</html>

📌 How It Works:

Journal Entry Input: Users write their journal in the textarea.
Save Button: Saves the entry and checks the date to update the streak.
Streak Logic:
- Continues if entry is on the next day.
- Resets if one or more days are missed.
- Persists data using localStorage.

This can be expanded later to:

Include a calendar view.
Export journal entries.
Set reminders.

Let me know if you’d like a version with Firebase backend or a mobile-friendly PWA version.

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About