Final before submmission

khushi-joshi-05 · Aug 4, 2024 · b30cc42 · b30cc42
1 parent 2299c32
commit b30cc42
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 10 deletions.
diff --git a/Html-files/RateUs.html b/Html-files/RateUs.html
@@ -103,7 +103,7 @@
             <div class="order-0 ml-auto p-2">
                 <img
                     class="nav-link"
-                    src="../Images/navbar/sun.png"
+                    src="../Images/navbar/moon.png"
                     id="theme-toggle-icon"
                     alt="theme toggler button"
                 />

diff --git a/Html-files/cart.html b/Html-files/cart.html
@@ -231,7 +231,7 @@
                         </ul>
                     </div>
                     <div class="order-0 ml-auto p-2">
-                        <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+                        <img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
                     </div>
                     <div class="collapse navbar-collapse hamburgeritems enddiv order-3 ">
                         <ul class="navbar-nav end-links">

diff --git a/Html-files/contact.html b/Html-files/contact.html
@@ -158,7 +158,7 @@
         <div class="order-0 ml-auto p-2">
           <img
             class="nav-link"
-            src="../Images/navbar/sun.png"
+            src="../Images/navbar/moon.png"
             id="theme-toggle-icon"
             alt="theme toggler button"
           />

diff --git a/Html-files/login.html b/Html-files/login.html
@@ -122,7 +122,7 @@
 				</ul>
 			</div>
 			<div class="order-0 ml-auto p-2">
-				<img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+				<img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
 			</div>
 			<div class="collapse navbar-collapse hamburgeritems enddiv order-3 ">
 				<ul class="navbar-nav end-links">

diff --git a/Html-files/menu.html b/Html-files/menu.html
@@ -166,7 +166,7 @@
             </ul>
         </div>
         <div class="order-0 ml-auto p-2">
-            <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+            <img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
         </div>
         <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
             <ul class="navbar-nav end-links">

diff --git a/Html-files/navbar.js b/Html-files/navbar.js
@@ -5,10 +5,10 @@ themeToggleIcon.addEventListener("click", function () {
   document.body.classList.toggle("dark-theme");
   document.body.classList.toggle(":root")
   if (document.body.classList.contains("dark-theme")) {
-    themeToggleIcon.src = "Images/navbar/sun.png";
+    themeToggleIcon.src = "../Images/navbar/sun.png";
     themeToggleLogo.src = "Images/logo/Logo-Dark.png";
   } else {
-    themeToggleIcon.src = "Images/navbar/moon.png";
+    themeToggleIcon.src = "../Images/navbar/moon.png";
     themeToggleLogo.src="Images/logo/Logo-Light.png";
   }
 });

diff --git a/Html-files/offers.html b/Html-files/offers.html
@@ -215,7 +215,7 @@
         <div class="order-0 ml-auto p-2">
           <img
             class="nav-link"
-            src="../Images/navbar/sun.png"
+            src="../Images/navbar/moon.png"
             id="theme-toggle-icon"
             alt="theme toggler button"
           />

diff --git a/Html-files/services.html b/Html-files/services.html
@@ -132,7 +132,7 @@
                     </ul>
                 </div>
                 <div class="order-0 ml-auto p-2">
-                    <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button" />
+                    <img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button" />
                 </div>
                 <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
                     <ul class="navbar-nav end-links">

diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -122,7 +122,7 @@
 				</ul>
 			</div>
 			<div class="order-0 ml-auto p-2">
-				<img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+				<img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
 			</div>
 			<div class="collapse navbar-collapse hamburgeritems enddiv order-3 ">
 				<ul class="navbar-nav end-links">

diff --git a/script.js b/script.js
@@ -67,3 +67,17 @@ function displayVisitorCount() {
 }
 document.addEventListener('DOMContentLoaded', displayVisitorCount);
 
+//Themechange icon toggling behaviour
+let themeToggleIcon = document.getElementById("theme-toggle-icon");
+let themeToggleLogo = document.getElementById("theme-toggle-logo");
+themeToggleIcon.addEventListener("click", function () {
+  document.body.classList.toggle("dark-theme");
+  document.body.classList.toggle(":root")
+  if (document.body.classList.contains("dark-theme")) {
+    themeToggleIcon.src = "Images/navbar/sun.png";
+    themeToggleLogo.src = "Images/logo/Logo-Dark.png";
+  } else {
+    themeToggleIcon.src = "Images/navbar/moon.png";
+    themeToggleLogo.src="Images/logo/Logo-Light.png";
+  }
+});