views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Topics</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
  <%- include('partials/header.ejs') %>

  <div id="loading-message" class="text-lg font-semibold mb-4">
    Fetching tutorial topics, please wait...
  </div>

  <main id="topics-container" class="container mx-auto px-4 py-8 flex-grow" style="display: none;">
    <h1 class="text-4xl font-bold mb-8">List of tutorial topics generated in the past month:</h1>
      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" id="topics-list">
      </div>
  </main>
  <%- include('partials/footer.ejs') %>
</body>
</html>

<script>
  async function fetchTopics() {
    try {
      const response = await fetch('/topics');
      const topics = await response.json();
      return topics;
    } catch (error) {
      console.error('Error fetching topics:', error);
    }
  }

  async function displayTopics() {
  const topics = await fetchTopics();
  const loadingMessage = document.getElementById('loading-message');
  const topicsContainer = document.getElementById('topics-container');
  const topicsList = document.getElementById('topics-list');

  if (topics && topics.length) {
    loadingMessage.style.display = 'none';
    topicsContainer.style.display = 'block';
    topics.forEach((topic) => {
      const topicCard = document.createElement('div');
      topicCard.className = 'bg-white p-6 rounded-lg shadow-md';
      topicCard.id = topic.id;
      topicCard.textContent = topic.content;

      // Create an anchor element to wrap the topic card
      const topicLink = document.createElement('a');
      topicLink.href = `/topics/${topic.id}`;
      topicLink.style.textDecoration = 'none'; // Optional: remove the default underline for links

      // Append the topic card to the anchor element
      topicLink.appendChild(topicCard);

      // Append the anchor element to the topics list
      topicsList.appendChild(topicLink);
    });
  } else {
    loadingMessage.textContent = 'Error fetching tutorial topics.';
  }
}

displayTopics();
</script>