From fe8cb00b0abc1b030b562c8f4490b78e9d72b0bc Mon Sep 17 00:00:00 2001
From: Swapnil Srivastava <142904704+Swapnilden@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:57:12 +0530
Subject: [PATCH] Update Landingpage.js

---
 js/Landingpage.js | 189 ++++++++++++++--------------------------------
 1 file changed, 58 insertions(+), 131 deletions(-)

diff --git a/js/Landingpage.js b/js/Landingpage.js
index 274f943..963b684 100644
--- a/js/Landingpage.js
+++ b/js/Landingpage.js
@@ -1,143 +1,76 @@
-// const dataArray = JSON.parse(jsonData);
-// console.log(dataArray)
-console.log("jsonData")
-console.log("FucY")
-//Adding color function on click by Priyas32
-  function buttonClick(ele) {
-    NavBar= document.getElementsByClassName("s1btn1");
-    console.log("Hi")
-    for(i=0; i<NavBar.length; i++)
-    {
-      NavBar[i].style.backgroundColor="white";
-      NavBar[i].style.color="black";
-    }
-    document.getElementById(ele).style.backgroundColor="#ff765d"
-    document.getElementById(ele).style.color="white";
-    //
-    var tbody = document.getElementById("tbody");
-    let get = Array.from(document.getElementsByClassName('mainContainer'));
-    get.forEach(element => {
-    element.remove(); 
-    });
-  const john = document.getElementById(ele);
-  // fetch function
+// Adding color function on click
+function buttonClick(ele) {
+  let NavBar = document.getElementsByClassName("s1btn1");
+  for (let i = 0; i < NavBar.length; i++) {
+    NavBar[i].style.backgroundColor = "white";
+    NavBar[i].style.color = "black";
+  }
+  let selectedElement = document.getElementById(ele);
+  selectedElement.style.backgroundColor = "#ff765d";
+  selectedElement.style.color = "white";
+
+  let tbody = document.getElementById("tbody");
+  Array.from(document.getElementsByClassName('mainContainer')).forEach(element => {
+    element.remove();
+  });
+
   fetch("../database/jsonData.json")
-  // fetch("http://localhost:3000/blogs")
-    .then(res => res.json())
+    .then(res => {
+      if (!res.ok) {
+        throw new Error('Network response was not ok ' + res.statusText);
+      }
+      return res.json();
+    })
     .then(json => {
-      console.log("data1", json);
-      console.log(String(john.innerHTML), "Hello sir bro ")
-      const jack = json.blogs.filter(item => {
-        return item.tags.includes(String(john.innerHTML))
-      })
-      console.log(jack, "jack")
-      jack.map(data => {
-        console.log("data1", data);
-        // tbody.innerHTML += td_fun(data);
-        tbody.append(td_fun(data));
-        
-      });
+      const filteredBlogs = json.blogs.filter(item => item.tags.includes(String(selectedElement.innerHTML)));
+      if (filteredBlogs.length === 0) {
+        tbody.innerHTML = "<p>No blogs found for this tag.</p>";
+      } else {
+        filteredBlogs.forEach(data => {
+          tbody.append(td_fun(data));
+        });
+      }
     })
     .catch(error => {
       console.error('Error:', error);
     });
-  }
-
-//Changes by priya
-
-// let tbody = document.getElementById("tbody")
-
-// document.addEventListener("DOMContentLoaded", function() {
-//   var tbody = document.getElementById("tbody");
-
-// // fetch function
-// fetch("http://localhost:3000/blogs")
-//   .then(res => res.json())
-//   .then(json => {
-//     json.map(data => {
-//       console.log("data1",data)
-//       // tbody.append(td_fun(data));
-//       tbody.innerHTML += td_fun(data);
-      
-//     })
-//   }) .catch(error => {
-//     console.error('Error:', error);
-//   });
-// });
-
-// // create td
-// function td_fun(item) {
-//   console.log("item",item)
-//   let td = document.createElement('div');
-//   td.innerHTML = `
-//     <div class="box1">
-//     <img src="" alt="" />
-//   <div class="boxtext">
-//     <div class="boxdiv">Technology</div>
-//     <h1>Lorem ipsum, dolor sit amet, consectetur adipisicing elit.</h1>
-//     <p style="font-size: 0.7em;" >
-//       Lorem ipsum dolor sit amet consectetur adipisicing elit.
-//       Temporibus fuga reiciendis voluptatum rerum enim eligendi,
-//       incidunt eveniet distinctio corporis repudiandae.
-//     </p>
-//     <div class="boxauthor">
-//       <img src="" alt="" class="boxauthorimg" />
-//       <div class="boxauthorsname">
-//         <div class="name">${item.author}</div>
-//         <div class="date" style="color: grey;" >xx.xx.xxxx</div>
-//       </div>
-//     </div>
-//   </div>
-// </div>
-// </div>
-//     `;
-//   return td;
-// }
-
-
-
-
-
-
-
-
+}
 
+// DOMContentLoaded event listener
 document.addEventListener("DOMContentLoaded", function() {
-  var tbody = document.getElementById("tbody");
-  var tmain = document.getElementById("sec2");
+  let tbody = document.getElementById("tbody");
+  let tmain = document.getElementById("sec2");
 
-  // fetch function
   fetch("../database/jsonData.json")
-  // fetch("http://localhost:3000/blogs")
-    .then(res => res.json())
+    .then(res => {
+      if (!res.ok) {
+        throw new Error('Network response was not ok ' + res.statusText);
+      }
+      return res.json();
+    })
     .then(json => {
-      console.log("data1", json);
-      json.blogs.map(data => {
-        console.log("data1", data);
-        // tbody.innerHTML += td_fun(data);
+      json.blogs.forEach(data => {
         tbody.append(td_fun(data));
-        
       });
-      tmain.append(td_fun1(json));
+      tmain.append(td_fun1(json.blogs[0]));
     })
     .catch(error => {
       console.error('Error:', error);
     });
 });
 
-// create td
+// Create td function
 function td_fun(item) {
-  // console.log("item", item);
   let div = document.createElement('div');
   div.className = "mainContainer";
   div.innerHTML = `
-    <div class="box1" key="item.id">
+    <div class="box1">
       <img src=${item.imageurl} alt="" />
       <div class="boxtext">
         <div class="boxdiv">${item.tags}</div>
         <a href="../blog.html?id=${item.id}"><h1>${item.title}</h1></a>
         <a href="../blog.html?id=${item.id}"><p class="boxContent">
-        ${item.content.slice(0,180)}
+          ${item.content.slice(0, 180)}
         </p></a>
         <div class="boxauthor">
           <img src=${item.img0} alt="" class="boxauthorimg" />
@@ -152,30 +85,24 @@ function td_fun(item) {
   return div;
 }
 
-
-function td_fun1(item) {
-  let data = item.blogs[0]
-  console.log("item-mini", item.blogs[0]);
-  console.log("item-mini", item ,item.index);
+function td_fun1(data) {
   let div = document.createElement('div');
   div.innerHTML = `
-     <div class="sec2content">
-        <img src=${data.imageurl} alt="" />
-        <div class="s2text">
-          <div class="div">${data.tags}</div>
-          <h1>${data.title}</h1>
-          <p">
-          ${data.content.slice(0, 500)}
-          </p>
-          <div class="author">
-            <img src=${data.img0} alt="" class="authorimg" />
-            <div class="authorsname">
-              <div class="name namestyle">${data.author}</div>
-              <div class="date datestyle" style="color: grey;">${data.date}</div>
-            </div>
+    <div class="sec2content">
+      <img src=${data.imageurl} alt="" />
+      <div class="s2text">
+        <div class="div">${data.tags}</div>
+        <h1>${data.title}</h1>
+        <p>${data.content.slice(0, 500)}</p>
+        <div class="author">
+          <img src=${data.img0} alt="" class="authorimg" />
+          <div class="authorsname">
+            <div class="name namestyle">${data.author}</div>
+            <div class="date datestyle" style="color: grey;">${data.date}</div>
           </div>
         </div>
       </div>
+    </div>
   `;
   return div;
 }