Merge pull request #21 from Vibranium1/dark-mode-logo-align

Added dark mode logo
GDSC-PHCET · Oct 24, 2023 · 00bf1e3 · 00bf1e3
2 parents a7461d8 + 4439c3e
commit 00bf1e3
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -15,10 +15,9 @@
 <body>
   <div id="app">
     <h1>Simple To-Do List</h1>
-    <div id="dark-mode-toggle">
-      <label for="dark-mode-checkbox">Dark Mode</label>
-      <input type="checkbox" id="dark-mode-checkbox">
-    </div>
+    <div id="dark-mode-toggle" class="dark-mode-toggle">
+      <img src="moon.png" id="dark-mode-logo" alt="Dark Mode Feature" class="mode-logo">
+    </div>    
     <ul class="todo-list" id="todo-list">
     </ul>
     <input type="text" id="new-task" placeholder="New task" class="ToDoSearchBar">

diff --git a/moon.png b/moon.png
diff --git a/script.js b/script.js
@@ -1,12 +1,19 @@
+const darkModeToggle = document.getElementById("dark-mode-toggle");
+const darkModeLogo = document.getElementById("dark-mode-logo");
 const todoList = document.getElementById("todo-list");
 const newTaskInput = document.getElementById("new-task");
 const addButton = document.getElementById("add-button");
-const darkModeToggle = document.getElementById("dark-mode-checkbox");
 
-darkModeToggle.addEventListener("change", toggleDarkMode);
+
+darkModeToggle.addEventListener("click", toggleDarkMode);
 
 function toggleDarkMode() {
   document.body.classList.toggle("dark-mode");
+  if (document.body.classList.contains("dark-mode")) {
+    darkModeLogo.src = "sun.png"; // Switch to light mode
+  } else {
+    darkModeLogo.src = "moon.png"; // Switch to dark mode
+  }
 }
 
 addButton.addEventListener("click", addTask);

diff --git a/style.css b/style.css
@@ -13,6 +13,18 @@ body {
 
 }
 
+.dark-mode-toggle {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+}
+
+.mode-logo {
+  width: 30px;
+  height: 30px;
+}
+
 h1 {
   text-align: center;
 }

diff --git a/sun.png b/sun.png