Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Tracker - Varun</title>
<style>
  body {
    font-family: 'Poppins', sans-serif;
    background: #f3f4f6;
    margin: 0;
    padding: 0;
  }
  .container {
    max-width: 600px;
    margin: 20px auto;
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  input, textarea, button {
    width: 100%;
    padding: 10px;
    margin: 6px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
  }
  button {
    background: #2563eb;
    color: white;
    border: none;
    cursor: pointer;
    transition: 0.3s;
  }
  button:hover {
    background: #1e40af;
  }
  .entry {
    background: #eef2ff;
    padding: 10px;
    margin: 8px 0;
    border-radius: 8px;
  }
  .entry span {
    display: block;
    font-weight: bold;
  }
  .actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>📘 Daily Tracker</h1>
    <input type="text" id="timeSlot" placeholder="Enter time slot (e.g. 7:00 - 7:30)">
    <textarea id="activity" placeholder="What did you do?"></textarea>
    <button id="addBtn">Add Entry</button>

    <h2 style="margin-top:20px;">Today's Entries</h2>
    <div id="entries"></div>

    <div class="actions">
      <button id="clearBtn" style="background:#dc2626;">Clear All</button>
      <button id="downloadBtn" style="background:#059669;">Download Data</button>
    </div>
  </div>

<script>
  const timeInput = document.getElementById("timeSlot");
  const activityInput = document.getElementById("activity");
  const addBtn = document.getElementById("addBtn");
  const entriesDiv = document.getElementById("entries");
  const clearBtn = document.getElementById("clearBtn");
  const downloadBtn = document.getElementById("downloadBtn");

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

  function renderEntries() {
    entriesDiv.innerHTML = "";
    if (entries.length === 0) {
      entriesDiv.innerHTML = "<p>No entries yet.</p>";
      return;
    }
    entries.forEach((e, index) => {
      const div = document.createElement("div");
      div.className = "entry";
      div.innerHTML = `
        <span>🕒 ${e.time}</span>
        <p>${e.activity}</p>
        <small>${e.date}</small>
      `;
      entriesDiv.appendChild(div);
    });
  }

  addBtn.onclick = () => {
    const time = timeInput.value.trim();
    const activity = activityInput.value.trim();
    if (!time || !activity) {
      alert("Please enter both time slot and activity!");
      return;
    }
    const entry = {
      time,
      activity,
      date: new Date().toLocaleDateString()
    };
    entries.push(entry);
    localStorage.setItem("dailyEntries", JSON.stringify(entries));
    timeInput.value = "";
    activityInput.value = "";
    renderEntries();
  };

  clearBtn.onclick = () => {
    if (confirm("Are you sure you want to clear all entries?")) {
      entries = [];
      localStorage.removeItem("dailyEntries");
      renderEntries();
    }
  };

  downloadBtn.onclick = () => {
    const data = JSON.stringify(entries, null, 2);
    const blob = new Blob([data], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `daily_tracker_${new Date().toLocaleDateString()}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  // Load existing data
  renderEntries();
</script>
</body>
</html>
Editor is loading...