forum.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Forum_page</title>
  <link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>

  <section class="forum-section">
    <h3 id="welcome-message">Welcome to forum!</h3>
    <br>
    <p>
      Here you can see what topics there are so far. 
      You can create a new post by fill in your name, title and content.
      To read a post's content or send a comment - click read more!
    </p>

    <!-- Form create new post -->
    <form class="new-post-form" id="new-post-form" action="/addpost" method="post">
      <input type="text" name="author" placeholder="Your Name" required />
      <input type="text" name="heading" placeholder="Title" required />
      <textarea name="body" placeholder="Content" required></textarea>
      <button type="submit">Create Post</button>
    </form>
    <hr>

    <!-- Display all posts  -->
    <div id="post-container"></div>
  </section>

  <script>

    // redirect to the view post page
    function viewPost(postId) {
      window.location.href = `/viewpost/${postId}`;
    }

    document.addEventListener("DOMContentLoaded", function () {
      // Fetch posts and render on page forum
      fetch("/getposts")
        .then((response) => response.json())
        .then((posts) => {
          const postsContainer = document.getElementById("post-container");
          posts.forEach((post) => {
            const postElement = document.createElement("div");
            postElement.innerHTML = `
            Author:${post.author}<br>
            <strong>${post.heading}</strong><br>
              Created at: ${new Date(post.created_at).toLocaleString()}<br>
              <button onclick="viewPost(${post.post_id})">Read more</button>
              <hr>
            `;
            postsContainer.appendChild(postElement);
          });
        });
    });
  </script>
</body>
</html>