Merge pull request #14 from Hilda-Enyioko/hillary

Hillary

Blog Page/Blogpost/blog.js

@@ -0,0 +1,63 @@
+const blogId = localStorage.getItem("blogId");
+console.log({ blogId });
+
+// Function to fetch a single blog post by ID from an API
+const fetchBlogPost = async (id) => {
+  // Replace this with your actual API endpoint
+  const response = await fetch(`https://api.example.com/blog/${id}`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  const data = await response.json();
+  return data;
+};
+
+// Function to render the blog post
+const renderBlogPost = (post) => {
+  console.log("post", post);
+  //   const blogTitle = document.getElementById("blog-title");
+  //   const blogContainer = document.getElementById("blog-read");
+  //   const writtenDate = document.getElementById("written-date");
+
+  //   // Set the blog title
+  //   blogTitle.textContent = post.title;
+
+  //   // Create blog content
+  //   blogContainer.innerHTML = `
+  //       <div class="blog-post">
+  //         <h2>${post.title}</h2>
+  //         <p>${post.content}</p>
+  //         <p><strong>Author:</strong> ${post.author}</p>
+  //         <p><em>${new Date(post.date).toLocaleDateString()}</em></p>
+  //       </div>
+  //     `;
+};
+
+// Function to get the blog ID from the URL path
+const getBlogIdFromUrl = () => {
+  const pathParts = window.location.pathname.split("/");
+  console.log({ pathParts });
+  return pathParts[pathParts.length - 1]; // Get the last part of the path
+};
+
+// Main function to fetch and render the blog post
+const initializeBlog = async () => {
+  const blogId = getBlogIdFromUrl();
+  if (!blogId) {
+    document.getElementById("blog-container").innerHTML =
+      "<p>Blog post not found.</p>";
+    return;
+  }
+
+  try {
+    const blogPost = await fetchBlogPost(blogId);
+    renderBlogPost(blogPost);
+  } catch (error) {
+    console.error("Error fetching the blog post:", error);
+    document.getElementById("blog-container").innerHTML =
+      "<p>Error loading blog post.</p>";
+  }
+};
+
+// Initialize the blog on page load
+// window.addEventListener("DOMContentLoaded", initializeBlog);

Blog Page/Blogpost/post.html

@@ -78,23 +78,23 @@
 
       <div class="main">
         <div class="blog-hero">
-          <h1>Religion: The Accidental Enemy</h1>
+          <h1 id="blog-title">Religion: The Accidental Enemy</h1>
           <h3 class="author">
             written By:
             <a href="https://www.instagram.com/kemuel_kefas_sinna/"
               >Kemuel Kefas</a
             >
           </h3>
-          <h3>5 min read. June 15 2023</h3>
-          <img src="images/blogimg1.webp" alt="" />
+          <h3>5 min read. <span id="date-written">June 15 2023</span></h3>
+          <img src="images/blogimg1.webp" alt="" id="image" />
           <p>Photo Credit: Freepik</p>
         </div>
 
         <audio controls loop>
-          <source src="images/audio5.mp3" />
+          <source src="images/audio5.mp3" id="audio" />
         </audio>
 
-        <div class="blog-read">
+        <div class="blog-read" id="blog-read">
           <p>
             Where I come from, the worst enemy is religion. Religion is simply a
             set of principles that guides our way of life. Merriam-Webster
@@ -433,5 +433,6 @@ <h2>About Us</h2>
       });
     </script>
     <script src="../../subscribe.js"></script>
+    <script src="./blog.js"></script>
   </body>
 </html>

Blog Page/blog.html

@@ -75,6 +75,9 @@
       </nav>
 
       <div class="main">
+        <!-- Placeholder -->
+        <span id="blog-id" style="display: none"></span>
+
         <div class="blog-hero">
           <h1>Blog Posts</h1>
           <form action="">

Blog Page/script.js

@@ -27,7 +27,6 @@ document.addEventListener("DOMContentLoaded", () => {
       const response = await fetch(
         "https://inclusive-talks.vercel.app/api/trpc/getAllPost"
       );
-      console.log(response);
 
       // Check if the request was successful
       if (!response.ok) {
@@ -36,12 +35,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
       // Parse the JSON response
       const res = await response.json();
-      console.log({ res });
       const { data } = res.result;
       console.log(data);
 
       const postsContainer = document.getElementById("blog-container");
-      console.log(postsContainer);
+      const postId = document.getElementById("blog-id");
 
       function getFirst50Words(text) {
         // Split the text into words
@@ -51,12 +49,13 @@ document.addEventListener("DOMContentLoaded", () => {
         let first50Words = words.slice(0, 50);
 
         // Join the first 50 words into a string
-        return first50Words.join(" ") + (words.length > 50 ? "..." : "");
+        return first50Words.join(" ") + (words.length > 50 ? "" : "");
       }
 
       // Iterate over the posts and create HTML for each post
-      data.forEach((post) => {
+      data.forEach((post, i) => {
         const postElement = document.createElement("div");
+
         postElement.className = "blog-section";
         postElement.innerHTML = `
         <div class="blog-post">
@@ -68,8 +67,8 @@ document.addEventListener("DOMContentLoaded", () => {
             <h4>Written By: ${post.writtenBy}</h4>
             <p>
               ${getFirst50Words(post.text)}
-              <a href="../Blog Page/Gratitude for diversity/post.html"
-                >CONTINUE READING....</a
+              <a href="../Blog Page/Blogpost/post.html"
+                onclick="setId(${post.id})">CONTINUE READING....</a
               >
             </p>
           </div>
@@ -82,6 +81,10 @@ document.addEventListener("DOMContentLoaded", () => {
                   `;
         postsContainer.insertBefore(postElement, postsContainer.firstChild);
       });
+      const setId = (id) => {
+        localStorage.setItem("blogId", id);
+        console.log("working");
+      };
     } catch (error) {
       console.error("Error fetching posts:", error);
     }

subscribe.js

@@ -30,26 +30,18 @@ document.getElementById("sub-btn").addEventListener("click", async () => {
       }
     );
 
-    console.log(response);
+    console.log("body", response.body);
+    console.log("text", response.statusText);
 
     if (response.ok) {
       feedback.textContent =
         "Subscription successful! You will get updates on your email";
       feedback.style.color = "green";
       feedback.style.display = "block";
       emailInput.value = ""; // Clear the input field
-    } else if (
-      response.statusText == "Bad Request" ||
-      response.statusText == ""
-    ) {
-      const errorData = await response.json();
-      feedback.textContent = errorData.message || "Email already exist";
-      feedback.style.color = "red";
-      feedback.style.display = "block";
     } else {
       const errorData = await response.json();
-      feedback.textContent =
-        errorData.message || "Subscription failed. Please try again.";
+      feedback.textContent = "Email already exist";
       feedback.style.color = "red";
       feedback.style.display = "block";
     }