insights.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="styles.css" />
    <title>Insights - Mindfulness Journal</title>
  </head>
  <body>
    <header>
      <h1>Mindfulness Journal</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="journal.html">Journal</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>Insights</h2>
      <ul class="insights-list" id="insightsList">
        <!-- Insights will be dynamically added here -->
      </ul>
    </main>
    <footer>
      <p>&copy; 2023 Mindfulness Journal App</p>
    </footer>
    <script>
      const insightsList = document.getElementById("insightsList");

      // Clear existing entries
      insightsList.innerHTML = "";

      // Get entries from localStorage
      const entries = JSON.parse(localStorage.getItem("journalEntries")) || [];

      // Loop through entries and create list items
      entries.forEach((entry) => {
        const listItem = document.createElement("li");
        listItem.innerHTML = `
            <p><strong>Thoughts:</strong> ${entry.thoughts}</p>
            <p><strong>Mood:</strong> ${entry.mood}</p>
            <p><strong>Activities:</strong> ${entry.activities}</p>
            <p class="timestamp"><strong>Timestamp:</strong> ${entry.timestamp}</p>
        `;
        insightsList.appendChild(listItem);
      });
    </script>
  </body>
</html>