some-code

index.html

@@ -141,8 +141,8 @@ <h3> <i class="fa-solid fa-angle-up"></i>Back To Top</h3>
                 <input type="text" placeholder="Jamshed Town, Karachi">
             </div>
             <div class="search__bar">
-                <input type="text" placeholder="Find Cars, Mobile Phones and more...">
-                <i class="fa-solid fa-search"></i>
+                <input type="text"  id="txt" placeholder="Find Cars, Mobile Phones and more...">
+                <i class="fa-solid fa-search" onclick="search()"></i>
             </div>
             <div class="login__sell" id="login__sell">
                 <button href="" class="login__btn" onclick="openLogin()">Login</button>
@@ -152,16 +152,10 @@ <h3> <i class="fa-solid fa-angle-up"></i>Back To Top</h3>
     </div>
     <div class="third__navbar">
         <div class="select__itself">
-            <a href="">All category <i class="fa-solid fa-angle-down"></i></a>
+            <a href="">All category</a>
         </div>
-        <div class="links">
-            <a href="#">Mobile Phones</a>
-            <a href="#">Cars</a>
-            <a href="#">Motercycles</a>
-            <a href="#">House</a>
-            <a href="#">TV - Video - Audio</a>
-            <a href="#">Tablets</a>
-            <a href="#">Land & Plots</a>
+        <div class="links" id="links">
+
         </div>
     </div>
     <div class="ad">
@@ -266,6 +260,56 @@ <h4>FOLLOW US</h4>
     </footer>
 </body>
 <script>
+    var categories = [
+        "Mobile Phones",
+        "Cars",
+        "Motercycles",
+        "House",
+        "Tv - Video - Audio",
+        "Tablets",
+        "Land & Ports"
+    ]
+
+    categories.map((data) => {
+        document.getElementById("links").innerHTML += `
+        <button onclick="categorySet(this)">${data}</button>
+        `
+    })
+
+    function search() {
+        var flage = false
+        var data = JSON.parse(localStorage.getItem("products"))
+        var txt = document.getElementById("txt").value;
+        for (let i = 0; i < data.length; i++) {
+            if (data[i].name === txt) {
+                console.log(data[i].name === txt);
+                console.log(txt);
+                flage =true
+                  document.getElementById("cards").innerHTML += `
+                  <div onclick="productDetail(${index})" class="card">
+                      <div class="img__featured">
+                          <img src="${data[i].image}" alt="">
+                          <p class="featured">featured</p>
+                      </div>
+                      <div class="card__content">
+                          <div class="card__content-gap">
+                              <div class="name__heart">
+                                  <h4>${data[i].name}</h4>
+                                  <i class="fa-solid fa-heart"></i>
+                              </div>
+                              <h2>Rs ${data[i].price}</h2>
+                          </div>
+                          <h5>${data[i].location}</h5>
+                      </div>
+                  </div>
+                  `
+            }
+        }
+        if (flage === false) {
+            alert("Not Exits")
+        }
+    }
+
     function showData() {
         var data = JSON.parse(localStorage.getItem("users"))
         var email = localStorage.getItem("email")
@@ -301,7 +345,7 @@ <h4>FOLLOW US</h4>
     }
     showData()
     var data = JSON.parse(localStorage.getItem("products"))
-    data.map((card , index) => {
+    data.map((card, index) => {
         document.getElementById("cards").innerHTML += `
                    <div onclick="productDetail(${index})" class="card">
                        <div class="img__featured">
@@ -325,13 +369,13 @@ <h5>${card.location}</h5>
 
     function productDetail(index) {
         console.log(data);
-        localStorage.setItem("productName" , data[index].name)
-        localStorage.setItem("name" , data[index].profileName)
-        localStorage.setItem("description" , data[index].description)
-        localStorage.setItem("image" , data[index].image)
-        localStorage.setItem("price" , data[index].price)
-        localStorage.setItem("location" , data[index].location)
-        localStorage.setItem("phone" , data[index].profilePhone)
+        localStorage.setItem("productName", data[index].name)
+        localStorage.setItem("name", data[index].profileName)
+        localStorage.setItem("description", data[index].description)
+        localStorage.setItem("image", data[index].image)
+        localStorage.setItem("price", data[index].price)
+        localStorage.setItem("location", data[index].location)
+        localStorage.setItem("phone", data[index].profilePhone)
         window.location.href = "./productDetails.html"
     }
 

style.css

@@ -178,10 +178,22 @@ b {
     margin-right: 20px;
 }
 
+.links button {
+    font-size: 17px;
+    border: 0;
+    background: none;
+    text-decoration: none;
+    color: #012f34;
+    margin-right: 10px;
+}
+
 .select__itself a {
     font-size: 17px;
+    border: 0;
+    background: none;
     text-decoration: none;
     color: #012f34;
+    margin-right: 10px;
 }
 
 .select__itself i {
@@ -216,7 +228,7 @@ b {
 
 .fresh__recomandation {
     width: 100%;
-    height: 100vh;
+    height: auto;
     margin-top: 30px;
 }
 
@@ -250,6 +262,7 @@ b {
 
 .img__featured {
     width: 100%;
+    border-bottom: 1px solid #012f34;
     height: 200px;
     overflow: hidden;
     position: relative;
@@ -262,12 +275,13 @@ b {
 .img__featured img {
     width: 100%;
     object-fit: cover;
+    height: 100%;
 }
 
 .img__featured .featured {
     position: absolute;
-    bottom: 20px;
-    left: 10px;
+    bottom: 7px;
+    left: 4px;
     background-color: #ffce32;
     text-transform: uppercase;
     padding: 5px;
@@ -759,7 +773,7 @@ p {
     justify-content: space-between;
 }
 
- .avaar {
+.avaar {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -779,4 +793,5 @@ p {
     background: none;
     margin-top: 10px;
     cursor: pointer;
-}
+}
+