Bug Fixes for Search Bar Functionality and Chatbot Response Issue

chatBot/script.js

@@ -7,7 +7,7 @@ const chatbotCloseBtn = document.querySelector('.chatbot__header span');
 let userMessage;
 // Need GPT key
 const inputInitHeight = chatInput.scrollHeight;
-const API_KEY = '033f3bcc57msh4cbeceaaa74b3fbp172fd5jsn8008c32db481'; // ~IMPORTANT~
+const API_KEY = '262e9be1afmsh2f9a771f4813961p1a1116jsnb48bc5e6075a'; // ~IMPORTANT~
 
 const createChatLi = (message, className) => {
   const chatLi = document.createElement('li');
@@ -17,15 +17,15 @@ const createChatLi = (message, className) => {
 };
 
 const generateResponse = (incomingChatLi) => {
-  const API_URL = 'https://chatgpt53.p.rapidapi.com/';
+  const API_URL = 'https://apiaiserg-osipchukv1.p.rapidapi.com/addContext';
   const messageElement = incomingChatLi.querySelector('p');
 
   const requestOptions = {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      "X-RapidAPI-Key": "033f3bcc57msh4cbeceaaa74b3fbp172fd5jsn8008c32db481", // ! IMPORTANT !
-      "X-RapidAPI-Host": "chatgpt53.p.rapidapi.com",
+      "X-RapidAPI-Key": "262e9be1afmsh2f9a771f4813961p1a1116jsnb48bc5e6075a", // ! IMPORTANT !
+      "X-RapidAPI-Host": "ApiAIserg-osipchukV1.p.rapidapi.com",
     },
     body: JSON.stringify({
       messages: [{ role: "user", content: userMessage }],
@@ -83,4 +83,4 @@ chatbotToggle.addEventListener('click', () =>
 chatbotCloseBtn.addEventListener('click', () =>
   document.body.classList.remove('show-chatbot')
 );
-sendChatBtn.addEventListener('click', handleChat);
+sendChatBtn.addEventListener('click', handleChat);

css/sec1.css

@@ -31,6 +31,16 @@
     color: white;
 }
 
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search-container {
+    position: relative;
+}
+
 .search {
     height: 3rem;
     width: 34rem;
@@ -50,6 +60,25 @@
     padding-left: 1rem;
 }
 
+.search-button {
+    position: absolute;
+    right: 0;
+    top: -3.9rem;
+    height: 100%;
+    width: 3.5rem;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search-button i {
+    font-size: 1.5vw; /* Adjust size based on your preference */
+    color: rgba(0, 0, 0, 0.6); /* Adjust color based on your preference */
+}
+
 .s1part2 {
     /* border: 1px solid black; */
     height: 5vw;

index.html

@@ -111,8 +111,14 @@
         })
       </script>
     </div>
-    <input class="search" placeholder="Search"></input>
-    <div class="buttons">
+    <div class="container">
+      <div class="search-container">
+        <input class="search" id="searchInput" placeholder="Search">
+        <button class="search-button" onclick="performSearch()">
+          <i id="searchIcon" class="fas fa-search"></i>
+        </button>
+      </div>
+    </div>    <div class="buttons">
       <button class="s1btn1" >All</button>
       <button class="s1btn1" style="background-color: white;color:black;" id = 'Tech' onclick="buttonClick('Tech')">Technology</button>
       <button class="s1btn1"style="background-color: white;color:black;" id = 'branding' onclick="buttonClick('branding')">Branding </button>
@@ -222,6 +228,62 @@ <h3 class="chatbox__title">Blogzen 24/7</h3>
 
   <script src="./chatBot/script.js"></script>
   <script src="js/theme.js"></script>
+  <script>
+    function performSearch() {
+      // Get the search input value
+      var searchTerm = document.getElementById("searchInput").value;
+
+      // Clear existing search results
+      var tbody = document.getElementById("tbody");
+      tbody.innerHTML = '';
+
+      // Fetch data and filter based on the search term
+      fetch("../database/jsonData.json")
+          .then(res => res.json())
+          .then(json => {
+              console.log("Searching for:", searchTerm);
+              console.log("Data:", json);
+
+              // Filter data based on the search term
+              const filteredData = json.blogs.filter(item => {
+                  // Assuming 'title' is the property you want to search in
+                  return item.title.toLowerCase().includes(searchTerm.toLowerCase());
+              });
+
+              // Display filtered data
+              filteredData.forEach(data => {
+                  tbody.appendChild(createBlogElement(data));
+              });
+          })
+          .catch(error => {
+              console.error('Error:', error);
+          });
+    }
+
+    // Function to create HTML element for a blog entry
+    function createBlogElement(data) {
+      var blogDiv = document.createElement('div');
+      blogDiv.className = 'mainContainer';
+      blogDiv.innerHTML = `
+        <div class="box1">
+          <img src="${data.imageurl}" alt="" />
+          <div class="boxtext">
+            <div class="boxdiv">${data.tags}</div>
+            <a href="../blog.html?id=${data.id}"><h1>${data.title}</h1></a>
+            <a href="../blog.html?id=${data.id}"><p class="boxContent">${data.content.slice(0, 180)}</p></a>
+            <div class="boxauthor">
+              <img src="${data.img0}" alt="" class="boxauthorimg" />
+              <div class="boxauthorsname">
+                <div class="name">${data.author}</div>
+                <div class="date">${data.date}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+      return blogDiv;
+    }
+  </script>
 </body>
 <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> -->