From 7c0c1a25d3f11eb5dd48daa279fc6426b5450e9c Mon Sep 17 00:00:00 2001
From: Vijay Shanker Sharma <vijayshankersharma1973@gmail.com>
Date: Sun, 2 Jun 2024 11:49:17 +0530
Subject: [PATCH 1/2] Added Search funtionality

---
 chatBot/script.js | 10 +++---
 css/sec1.css      | 58 ++++++++++++++++++++++++++--------
 index.html        | 80 ++++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 122 insertions(+), 26 deletions(-)

diff --git a/chatBot/script.js b/chatBot/script.js
index da12ce5..f5f3752 100644
--- a/chatBot/script.js
+++ b/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);
\ No newline at end of file
diff --git a/css/sec1.css b/css/sec1.css
index 7a4a56e..4ebf77f 100644
--- a/css/sec1.css
+++ b/css/sec1.css
@@ -30,23 +30,50 @@
     color: white;
 }
 
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search-container {
+    position: relative;
+}
+
 .search {
     height: 3vw;
     width: 34vw;
     border-radius: 2vw;
-    position: relative;
-    left: 33vw;
-    right: 33vw;
-    top: -4.5vw;
-    background-color: white;
+    padding-left: 1rem;
+    padding-right: 3.5rem; /* Adjust padding to make space for the icon */
     border: none;
     box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155);
-    color: rgba(0, 0, 0, 0.148);
+    color: black;
 }
 
-.search[placeholder] {
-    color: black;
-    padding-left: 1rem;
+.search::placeholder {
+    color: black !important; /* Ensure placeholder text appears in black */
+}
+
+
+.search-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    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 {
@@ -64,17 +91,22 @@
     text-decoration: underline;
 }
 
-.s1btn1 {
+.button-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
+  }
+  
+  .s1btn1 {
     height: 2.4vw;
-    width:fit-content;
     padding: 2px;
     margin: 0 0.7vw;
     border: none;
     border-radius: 1vw;
     background-color: #ff765d;
     color: white;
-
-}
+  }
+  
 
 .s1part2 a {
     margin: 0 0.7vw;
diff --git a/index.html b/index.html
index f91ea48..77f03a7 100644
--- a/index.html
+++ b/index.html
@@ -111,14 +111,22 @@
         })
       </script>
     </div>
-    <input class="search" placeholder="Search"></input>
-    <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>
-          <button class="s1btn1"style="background-color: white;color:black" id = 'news' onclick="buttonClick('news')" >News</button>
-            <button class="s1btn1"style="background-color: white;color:black"  id = 'AI' onclick="buttonClick('AI')" > AI</button>
-              <button class="s1btn1"style="background-color: white;color:black" id = 'Management' onclick="buttonClick('Management')" >Management</button>
-                <button class="s1btn1"style="background-color: white;color:black" id = 'Design' onclick="buttonClick('Design')">Design</button>
+    <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="button-container">
+      <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>
+      <button class="s1btn1" style="background-color: white;color:black" id='news' onclick="buttonClick('news')">News</button>
+      <button class="s1btn1" style="background-color: white;color:black" id='AI' onclick="buttonClick('AI')">AI</button>
+      <button class="s1btn1" style="background-color: white;color:black" id='Management' onclick="buttonClick('Management')">Management</button>
+    </div>
   </div>
   <!-- Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 
@@ -196,6 +204,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/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> -->
 

From 47ab66ba9aa6a5bed77be41fc0b15e79ee6369c0 Mon Sep 17 00:00:00 2001
From: Vijay Shanker Sharma <vijayshankersharma1973@gmail.com>
Date: Mon, 10 Jun 2024 15:44:53 +0530
Subject: [PATCH 2/2] Recolved issues

---
 css/sec1.css | 91 ++++++++++++++++++++++++++++++++++------------------
 index.html   | 52 ++++++++++++++++++++++--------
 2 files changed, 98 insertions(+), 45 deletions(-)

diff --git a/css/sec1.css b/css/sec1.css
index 4ebf77f..5bf8d26 100644
--- a/css/sec1.css
+++ b/css/sec1.css
@@ -7,30 +7,30 @@
 
 
 .sec1 {
-    height: 20vw;
+    height: 20rem;
     margin-top: 110px;
+    width: 100%;
 }
 
 .s1part1 {
-    height: 7vw;
-    width: 80vw;
-    margin: 3.2vw auto;
-    border-radius: 2vw;
+    height: 7rem;
+    width: 97%;
+    margin: 3.2rem 2%;
+    border-radius: 2rem;
     background-color: #7D41E2;
     box-shadow: 0 2px 1px rgba(0, 0, 0, 0.199);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
 }
 
 .s1part1 span {
-    position: relative;
-    top: 1.3vw;
-    left: 37vw;
     font-size: 2.7em;
     font-weight: bold;
     color: white;
 }
 
-
 .container {
     display: flex;
     justify-content: center;
@@ -42,25 +42,28 @@
 }
 
 .search {
-    height: 3vw;
-    width: 34vw;
-    border-radius: 2vw;
-    padding-left: 1rem;
-    padding-right: 3.5rem; /* Adjust padding to make space for the icon */
+    height: 3rem;
+    width: 34rem;
+    border-radius: 2rem;
+    position: relative;
+    top: -2.5rem;
+    background-color: white;
     border: none;
     box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155);
-    color: black;
+    color: rgba(0, 0, 0, 0.148);
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
-.search::placeholder {
-    color: black !important; /* Ensure placeholder text appears in black */
+.search[placeholder] {
+    color: black;
+    padding-left: 1rem;
 }
 
-
 .search-button {
     position: absolute;
     right: 0;
-    top: 0;
+    top: -3.9rem;
     height: 100%;
     width: 3.5rem;
     background-color: transparent;
@@ -90,23 +93,49 @@
 .s1part2 a:hover {
     text-decoration: underline;
 }
-
-.button-container {
+.buttons{
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
-    flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
-  }
-  
-  .s1btn1 {
-    height: 2.4vw;
-    padding: 2px;
-    margin: 0 0.7vw;
+    align-items: center;
+    margin: -2rem 0.7rem;
+
+}
+.s1btn1 {
+    /* width:fit-content;
+    padding: .9rem;
+    margin: 0 0.7rem;
     border: none;
-    border-radius: 1vw;
+    border-radius: 1rem;
+    background-color: #ff765d;
+    color: white; */
+    cursor: pointer;
+    height: 2.5rem;
+    width: 7.2rem;
+    margin: 0 ;
+    border-radius: 1rem;
+    border: none;
+    border: 1px solid #ff765d;
+    background-color: white;
+    margin: 0 0.5rem;
+    font-size: 1rem;
+    color: black;
+    font-weight: bold;
+
+    
+}
+
+/* add hovering effect to s1btn1 buttons */
+/* .s1btn1:hover {
     background-color: #ff765d;
     color: white;
-  }
-  
+    cursor: pointer;
+} */
+
+.s1btn1-recent:hover{
+    color: #fff;
+    background-color: #ff765d;
+}
 
 .s1part2 a {
     margin: 0 0.7vw;
diff --git a/index.html b/index.html
index 77f03a7..3b5858f 100644
--- a/index.html
+++ b/index.html
@@ -43,10 +43,10 @@
     <div class="navs2">
       <!-- <img src="img/final logo 1.png" alt="" /> -->
       <img src="assests/moon.png" alt="image" id="themeImg">
-      <button onclick="click" id="loginButton" class="button_nav txtColor1" style="border: 1px solid #f6f8f9; background-color:#208FF4 ; color: white;">Log
+      <button onclick="click" id="loginButton" class="button_nav txtColor hello" >Log
         In</button>
       <button id="signup" class="button_nav txtColor">Sign Up</button>
-      <button onclick="click" id="Calender" class="button_nav txtColor1" style="border: 1px solid #f6f8f9; background-color:#208FF4 ; color: white;">Calendar</button>
+      <button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
     </div>
   </div>
 <!--Calender-->
@@ -118,19 +118,19 @@
           <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>
+        <button class="s1btn1"style="background-color: white;color:black" id = 'news' onclick="buttonClick('news')" >News</button>
+          <button class="s1btn1"style="background-color: white;color:black"  id = 'AI' onclick="buttonClick('AI')" > AI</button>
+            <button class="s1btn1"style="background-color: white;color:black" id = 'Management' onclick="buttonClick('Management')" >Management</button>
+              <button class="s1btn1"style="background-color: white;color:black" id = 'Design' onclick="buttonClick('Design')">Design</button>
     </div>
-    <div class="button-container">
-      <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>
-      <button class="s1btn1" style="background-color: white;color:black" id='news' onclick="buttonClick('news')">News</button>
-      <button class="s1btn1" style="background-color: white;color:black" id='AI' onclick="buttonClick('AI')">AI</button>
-      <button class="s1btn1" style="background-color: white;color:black" id='Management' onclick="buttonClick('Management')">Management</button>
-    </div>
+   
   </div>
   <!-- Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 
-
   <div class="sec2buttons">
     <button class="sec2btn2" style="background-color: #ff765d; color: white">
       Trending
@@ -165,11 +165,35 @@
     </div>
     <div class="newsletter">
       <div class="footer_titles">Subscribe to our newsletter</div>
-      <form>
-        <input type="text" id="emailId" name="email" placeholder="Your Email">
-        <button  type="submit">Subscribe</button>
+      <form id="subscriptionForm">
+        <input type="email" id="emailId" name="email" placeholder="Your Email" required>
+        <button type="submit">Subscribe</button>
       </form>
+      <div id="subscriptionMessage" style="display: none;">You have subscribed successfully!</div>
     </div>
+    
+    <script>
+      document.getElementById("subscriptionForm").addEventListener("submit", function(event) {
+        event.preventDefault(); // Prevent the form from submitting
+    
+        // Get the email input value
+        var email = document.getElementById("emailId").value;
+    
+        // Email validation using regular expression
+        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+          alert("Please enter a valid email address.");
+          return;
+        }
+    
+        // Simulate subscription (you may replace this with actual subscription code)
+        // For now, just displaying the success message
+        document.getElementById("subscriptionMessage").style.display = "block";
+      });
+    </script>
+    
+    
+    
     <div class="contact">
       <div class="footer_titles">Contact Us</div>
       <a href="mailto:Blogzen@gmail.com"><div class="mail">Blogzen@gmail.com</div></a>