toggle button implement

jinx-vi-0 · Oct 29, 2024 · def4113 · def4113
1 parent 1b39a7f
commit def4113
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 19 deletions.
diff --git a/public/js/script.js b/public/js/script.js
@@ -1,26 +1,32 @@
 document.addEventListener('DOMContentLoaded', function(){
   const darkModeToggle = document.getElementById("dark-mode-toggle");
+  const icon=document.getElementById('dark-icon');
   const body = document.body;
-
+  
   const savedDarkMode = localStorage.getItem('darkMode');
   if (savedDarkMode == 'enabled') {
+
     body.classList.add('dark-mode');
+    icon.classList.add('fa-sun')
   } else {
     body.classList.remove('dark-mode');
-    if (darkModeToggle) darkModeToggle.textContent ='Dark Mode';
+    icon.classList.add('fa-moon')
   }
 
 
   if (darkModeToggle) {
+
     darkModeToggle.addEventListener("click", function() {
         body.classList.toggle("dark-mode");
-
+      
         if (body.classList.contains('dark-mode')){
           localStorage.setItem('darkMode','enabled');
-          darkModeToggle.textContent ="Light Mode";
+          icon.classList.remove('fa-moon');
+          icon.classList.add('fa-sun');
         } else {
           localStorage.setItem('darkMode','disabled');
-          darkModeToggle.textContent ="Dark Mode";
+          icon.classList.remove('fa-sun');
+          icon.classList.add('fa-moon');
         }
     });
 }

diff --git a/views/contact.ejs b/views/contact.ejs
@@ -1,5 +1,5 @@
-<section class="contact-section">
-    <div class="contact-container">
+<section class="welcome-section ">
+    <!-- <div class="contact-container"> -->
       <h1>Contact Us</h1>
       <p>If you have any questions or feedback, feel free to reach out!</p>
 
@@ -25,5 +25,5 @@
         </div>
         <button type="submit" class="btn-submit">Send Message</button>
       </form>
-    </div>
+    <!-- </div> -->
   </section>
diff --git a/views/layouts/main.ejs b/views/layouts/main.ejs
@@ -16,13 +16,7 @@
   <div class="container">
 
     <%- include('../partials/header.ejs')  %>
-    <!-- Dark Mode Toggle Button -->
-    <div>
-      <button id="dark-mode-toggle">Dark Mode</button>
-  </div>
-
-    <%- include('../partials/header.ejs', { currentRoute: locals.currentRoute }) %>
-
+
     <main class="main">
       <%- body %>
     </main>

diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -12,9 +12,6 @@
       <li>
         <a href="/contact" class="<%= isActiveRoute('/contact', currentRoute) %>">Contact</a>
       </li>
-      <li>
-        <a href="/admin" class="<%= isActiveRoute('/admin', currentRoute) %>">Login</a>
-      </li>
     <li>
         <a href="/add-post" class="<%= isActiveRoute('/admin', currentRoute) %>">Post</a>
       </li>
@@ -38,7 +35,12 @@
         <button id="LogIn" onclick="window.location.href = '/admin'">Log In</button>
       <% } %>
 
-
+       <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" style="margin-left: 0.5rem;">
+        <i class="fa-solid" id="dark-icon"></i>
+      </button>
+
+
   </div>
 
 </header>