Added more products

index.html

@@ -16,11 +16,15 @@
         <nav class="navbar navbar-expand-lg py-2 shadow position-fixed z-3 bg-white w-100 ">
             <div class="container ">
                 <a class="navbar-brand fs-1 position-relative" style="font-weight: 800;" href="#">Selling</a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                <i style="display: none;"   id="cart" class="position-relative nav-link active fas fa-shopping-cart fs-3 order-lg-last" aria-current="page" href="index.html">
+
+                </i>
+                <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
-                <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
+
+                <div class="collapse navbar-collapse flex-grow-0 " id="navbarSupportedContent">
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                         <li class="nav-item px-3 ">
                             <a class="nav-link active select " aria-current="page" href="#home">Home</a>
@@ -47,21 +51,16 @@
                         <li class="nav-item px-3 dropdown " style="display: none;"   id="user">
                             <a class="nav-link active  dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"></a>
 
-                        <ul class="dropdown-menu">
-                            <li class="" >
-                                <a class="dropdown-item fw-bold" id="viewProdcuts" href="index.html">View all products</a>
-                            </li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li class=" " id="logout" >
-                                <a class="dropdown-item fw-bold" id="logoutLink" href="index.html">Log out</a>
-                            </li>   
-                        </ul>
-                        </li>
-
-                        <li class="nav-item px-3" style="display: none;"   id="cart" >
-                            <i class="nav-link active fas fa-shopping-cart fs-3"  aria-current="page" href="index.html"></i>
+                            <ul class="dropdown-menu">
+                                <li class="" >
+                                    <a class="dropdown-item fw-bold" id="viewProdcuts" href="index.html">View all products</a>
+                                </li>
+                                <li><hr class="dropdown-divider"></li>
+                                <li class=" " id="logout" >
+                                    <a class="dropdown-item fw-bold" id="logoutLink" href="index.html">Log out</a>
+                                </li>   
+                            </ul>
                         </li>
-
                     </ul>    
                 </div>
             </div>
@@ -93,15 +92,15 @@ <h2>Our Products</h2>
             <div class="row gy-4 mt-5 justify-content-center">
                 <div class="col-md-3">
                     <label class="fw-bold d-block text-center" for="">Search with product</label>
-                    <input type="text" style="border: 2px solid rgb(44, 44, 44);" class=" w-100 mt-2 px-2 py-1" name="" id="Pname" placeholder="Enter a product name">
+                    <input type="text" style="border: 2px solid rgb(60, 60, 60);" class=" w-100 mt-2 px-2 py-1" name="" id="Pname" placeholder="Enter a product name">
                 </div>
                 <div class="col-md-3">
                     <label  class="fw-bold d-block text-center" for="">Search with Catagory</label>
-                    <input type="text" style="border: 2px solid rgb(44, 44, 44);" class=" w-100  mt-2 px-2 py-1" name="" id="Pcatagory" placeholder="Enter a product catagory">
+                    <input type="text" style="border: 2px solid rgb(60, 60, 60);" class=" w-100  mt-2 px-2 py-1" name="" id="Pcatagory" placeholder="Enter a product catagory">
                 </div>
                 <div class="col-md-3">
                     <label class="fw-bold d-block text-center" for="">Search with budget</label>
-                    <input type="number" style="border: 2px solid rgb(44, 44, 44);"  class=" w-100  mt-2 px-2 py-1" name="" id="budget" placeholder="Enter your budget">
+                    <input type="number" style="border: 2px solid rgb(60, 60, 60);"  class=" w-100  mt-2 px-2 py-1" name="" id="budget" placeholder="Enter your budget">
                 </div>
             </div>
             <div class="row mt-3 gy-5 justify-content-center" id="productsContainer">
@@ -751,5 +750,6 @@ <h4 class="fw-bold">Have a Question?</h4>
     <script src="js/bootstrap.bundle.min.js"></script>
     <script src="js/countDown.js"></script>
     <script src="js/search.js"></script>
+    <script src="js/script.js"></script>
 </body>
 </html>

js/script.js

@@ -5,11 +5,11 @@ const logoutLink = document.getElementById("logoutLink")
 const user = document.getElementById("user")
 const cart = document.getElementById('cart')
 let isSigned = localStorage.getItem("signed") === "true"
+let btns
 
 logoutLink.addEventListener('click', ()=> localStorage.setItem("signed", "false"))
 
 window.onload = function () {
-    isSigned = localStorage.getItem("signed") === "true"
     if (isSigned) {
         login.style.display = "none"
         reg.style.display = "none"
@@ -19,4 +19,16 @@ window.onload = function () {
         user.firstElementChild.textContent = `${localStorage.getItem("firstName")} ${localStorage.getItem("lastName")}`
 
     }
+    btns = document.getElementsByClassName("cartBtn")
+    Array.from(btns).forEach(function (btn) {
+        btn.addEventListener("click", addToCart)    
+    })
+}
+
+function addToCart(event) {
+    if (!isSigned) {
+        location.assign("login.html")
+    }
+    let i = Array.from(btns).indexOf(event["target"])
+
 }

js/search.js

@@ -37,9 +37,9 @@ let prodcuts = [
     },
     {
         id: 4,
-        name: "Black Sunglasses",
+        name: "Brown Sunglasses",
         image: "images/sunglasses2.png",
-        price: "$700.00", 
+        price: "$70.00", 
         catagory: "Accessories"
 
     },
@@ -67,6 +67,38 @@ let prodcuts = [
         catagory: "Fashion"
 
     },
+    {
+        id: 8,
+        name: "Grey Pants",
+        image: "images/pants2.png",
+        price: "$50.00",
+        catagory: "Fashion"
+
+    },
+    {
+        id: 9,
+        name: "Headphones",
+        image: "images/headphones1.png",
+        price: "$120.00",
+        catagory: "Accessories"
+
+    },
+    {
+        id: 10,
+        name: "Argentina Shirt",
+        image: "images/Argentina.png",
+        price: "$110.00",
+        catagory: "Sport"
+
+    },
+    {
+        id: 11,
+        name: "Addidas Shorts",
+        image: "images/shorts2.png",
+        price: "$75.00",
+        catagory: "Sport"
+
+    },
 
 ]
 let productsToDraw = [...prodcuts]
@@ -99,23 +131,32 @@ function renderProducts() {
             <div class="image overflow-hidden position-relative">
                 <img src="${productsToDraw[i].image}" loading="lazy" class="img-fluid  bg-secondary bg-opacity-10 rounded-top" alt="Golden Watch">
             </div>
-            <div class="px-4 py-4 border">
-                <h5 class="">${productsToDraw[i].name}</h5>
-                <p class="opacity-75 mb-1 fw-bold">${productsToDraw[i].price}</p>
-                <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
+            <div class="px-4 py-4 border border-top-0">
+                <h5 class="fw-bold">${productsToDraw[i].name}</h5>
+                <p class="opacity-75 mb-1 " style="font-weight:600;">Price: ${productsToDraw[i].price}</p>
+                <i class="fas fa-star py-2" style="color: rgb(255, 192, 34);"></i>
                 <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
                 <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
                 <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
                 <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
                 <p class="opacity-75">Catagory: ${productsToDraw[i].catagory}</p>
                 <div class="d-flex justify-content-between align-items-center">
-                    <button class="btn rounded-0 fw-bold btn3 bg-white" style="transition: .3s; color: var(--primary); border: 2px solid var(--primary); ">Add to cart</button>
+                    <button  class="cartBtn btn rounded-0 fw-bold btn3 bg-white" style="transition: .3s; color: var(--primary); border: 2px solid var(--primary); ">Add to cart</button>
                     <i class="fas fa-heart fa-2x text-secondary" style="cursor: pointer;"></i>
                 </div>
             </div>
         </div>
     </div>
         `
     }
+    if (productsToDraw.length == 0) {
+        let h2 = document.createElement("h2")
+        h2.textContent = "No prodcuts were found!"
+        h2.style.textAlign = "center"
+        productsContainer.appendChild(h2)
+    }
 }
-window.onload = renderProducts
+renderProducts()
+window.onload = function () {
+
+}