Fix dark mode cart icon and page number visibility regarding issue #120

account.html

@@ -8,6 +8,7 @@
     <title>Account Details</title>
     <!-- <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
         rel="stylesheet">
@@ -56,7 +57,10 @@
                 </ul>
             </nav>
             <a href="cart.html">
-                <img class="cart-image" src="images/cart.png" width="30px" height="30px">
+
+                <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
+
+                <img class="cart-image" src="images/cart.png" width="30px" height="30px"
             </a>
             <div class="toggle">
                 <i class="fa-solid fa-moon toggle-icon"></i>
@@ -171,8 +175,12 @@ <h3>Follow Us</h3>
             Indicator.style.transform = "translateX(0px)";
         }
         const ball = document.querySelector(".toggle-ball");
+
+        const items = document.querySelectorAll(".row,body,.cartIcon,.container,.menu-icon,.navbar,.header,.toggle");
+
         const items = document.querySelectorAll(".row,body,.container,.menu-icon,.navbar,.header,.toggle");
         const cartImage = document.querySelector(".cart-image");
+
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{

allproducts.html

@@ -14,6 +14,7 @@
         <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
 
     <link rel="icon" type="image/x-icon" href="images/logo-white.png"> -->
     <link rel="stylesheet" href="style.css" />
@@ -59,7 +60,11 @@
                 </ul>
             </nav>
             <a href="cart.html">
+
+                <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
+
                 <img class="cart-image" src="images/cart.png" width="30px" height="30px">
+
             </a>
             <div class="toggle">
                 <i class="fa-solid fa-moon toggle-icon"></i>
@@ -314,8 +319,12 @@ <h3>Follow Us</h3>
             }
         }
         const ball = document.querySelector(".toggle-ball");
+
+        const items = document.querySelectorAll(".row,body,.cartIcon,.page-btn,.menu-icon,.container,.navbar,.header,.toggle");
+
         const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
         const cartImage = document.querySelector('.cart-image');
+
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{

cart.html

@@ -9,7 +9,15 @@
     <link rel="stylesheet" href="style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
+
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
     <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
@@ -42,6 +50,27 @@
             </div>
             <img src="images/menu.png" class="menu-icon" onclick="menutoggle()" />
         </div>
+
+        <nav>
+          <ul id="MenuItems">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="allproducts.html">Products</a></li>
+            <li><a href="">About</a></li>
+            <li><a href="">Contact</a></li>
+            <li><a href="account.html">Account</a></li>
+          </ul>
+        </nav>
+        <a href="cart.html">
+          <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
+        </a>
+        <div class="toggle">
+          <i class="fa-solid fa-moon toggle-icon"></i>
+          <i class="fa-solid fa-sun toggle-icon"></i>
+          <div class="toggle-ball"></div>
+       </div>
+        <img src="images/menu.png" class="menu-icon" onclick="menutoggle()" />
+      </div>
+
     </div>
     <!-- --------------------cart item details--------->
     <div class="small-container cart-page">
@@ -239,6 +268,22 @@ <h3>Follow Us</h3>
       )}</td></tr><tr><td>Total</td><td>Rs. ${Number(
         (subTotal + subTotal / 7.78).toFixed(2)
       )}</td></tr></table>`;
+
+    }
+    renderItemsAndCosts(); //rendering the cart items and the costs initially
+    // to remove the row of item
+    function removeItem() {
+      const idNumber = event.target.id.split("-")[1]; //eg. if remove-3 btn is clicked, idNumber = 3
+      retrievedUser.cart.splice(idNumber,1); //removing the item from the cart array, whose 'remove' button is clicked
+      let updatedCart = {cart:retrievedUser.cart}  //saving the new cart array to a new variable in the format how cart items are saved
+      // console.log(updatedCart)
+      localStorage.setItem("user",JSON.stringify(updatedCart)) //updating the localStorage cart items
+      renderItemsAndCosts();
+    }
+    const ball = document.querySelector(".toggle-ball");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+        ball.addEventListener("click",()=>{
+
         }
         renderItemsAndCosts(); //rendering the cart items and the costs initially
         // to remove the row of item
@@ -257,6 +302,7 @@ <h3>Follow Us</h3>
         const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
         ball.addEventListener("click", () => {
 
+
             items.forEach(item => {
                 item.classList.toggle("active")
             })

contact.html

@@ -12,6 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
         rel="stylesheet">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="icon" type="image/x-icon" href="images/logo-white.png">
     <link type="text/css" rel="stylesheet" href="path-to-fontawesome/font-awesome.css"> -->
@@ -57,7 +58,11 @@
                 </ul>
             </nav>
             <a href="cart.html">
+
+                <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
+
                 <img class="cart-image" src="images/cart.png" width="30px" height="30px">
+
             </a>
             <div class="toggle">
                 <i class="fa-solid fa-moon toggle-icon"></i>
@@ -105,20 +110,27 @@ <h1 class="form-title">Contact Us</h1>
             }
         }
         const ball = document.querySelector(".toggle-ball");
+
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+
         const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
         const cartImage = document.querySelector(".cart-image");
         const formTitle = document.querySelector(".form-title");
         console.log(formTitle);
         // const menuItems = document.querySelector('#menuItems');
+
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{
                 item.classList.toggle("active")
             })
             ball.classList.toggle("active")
+
+
             MenuItems.classList.toggle("active")
             cartImage.classList.toggle("bgm-change")
             formTitle.classList.toggle("active")
+
         })
     </script>
 

index.html

@@ -18,6 +18,7 @@
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+
     <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
     <link
@@ -52,8 +53,11 @@
               <li><a href="account.html">Account</a></li>
             </ul>
           </nav>
-          <a href="cart.html" class="cart-hover">
+
+            <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
+
             <img class="cart-image" src="images/cart.png" width="30px" height="30px" />
+
           </a>
           <div class="toggle">
             <i class="fa-solid fa-moon toggle-icon"></i>
@@ -510,10 +514,14 @@ <h3>Follow Us</h3>
 
 
       const ball = document.querySelector(".toggle-ball");
+
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+
         const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
         const cartImage = document.querySelector(".cart-image");
         const effects = document.querySelector(".effects");
         // const menuItems = document.querySelector('#menuItems');
+
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{

productdetail.html

@@ -8,10 +8,19 @@
     <title>Product Details</title>
     <link rel="stylesheet" href="style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
+
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+
     <link rel="icon" type="image/x-icon" href="images/logo.png" />
 </head>
 
@@ -42,6 +51,27 @@
             </div>
             <img src="images/menu.png" class="menu-icon" onclick="menutoggle()" />
         </div>
+
+        <nav>
+          <ul id="MenuItems">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="allproducts.html">Products</a></li>
+            <li><a href="">About</a></li>
+            <li><a href="contact.html">Contact</a></li>
+            <li><a href="account.html">Account</a></li>
+          </ul>
+        </nav>
+        <a href="cart.html">
+          <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
+        </a>
+        <div class="toggle">
+          <i class="fa-solid fa-moon toggle-icon"></i>
+          <i class="fa-solid fa-sun toggle-icon"></i>
+          <div class="toggle-ball"></div>
+       </div>
+        <img src="images/menu.png" class="menu-icon" onclick="menutoggle()" />
+      </div>
+
     </div>
     <!----------single product details-------->
     <div class="small-container single-product" data-aos="fade-up">
@@ -296,10 +326,16 @@ <h3>Follow Us</h3>
             showToast();
         };
 
+
+      const ball = document.querySelector(".toggle-ball");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+        ball.addEventListener("click",()=>{
+
         const ball = document.querySelector(".toggle-ball");
         const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
         ball.addEventListener("click", () => {
 
+
                 items.forEach(item => {
                     item.classList.toggle("active")
                 })