From 1f3a8251f346fe8f8d2bd56ffbe9cf0e76c1623f Mon Sep 17 00:00:00 2001
From: Ayush Singh <ayush1009208@gmail.com>
Date: Sat, 12 Oct 2024 02:49:11 +0530
Subject: [PATCH 1/2] Added toggle

---
 index.html |  7 +++-
 script.js  | 29 ++++++++++++++++
 style.css  | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 133 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index df413bd..d93f3a3 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,13 @@ <h1>Todo-List</h1>
         </div>
         <div class="js-add-html js-add-grid"></div>
 
+        <!-- Theme Toggle Button -->
+        <button id="theme-toggle" onclick="toggleTheme();">
+            <img src="assets/theme-icon.png" alt="Toggle Theme" width="20" height="20"> 
+            Switch to Dark Mode
+        </button>
+        
     </div>
     <script src="script.js"></script>
 </body>
 </html>
-
diff --git a/script.js b/script.js
index 64d43e4..d4a8cb8 100644
--- a/script.js
+++ b/script.js
@@ -104,4 +104,33 @@ function updateTodo(index) {
 
 // Initialize the todo list on page load
 updateTodoList();
+// Load the theme from localStorage when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme');
+    const body = document.body;
+    const themeToggleButton = document.getElementById('theme-toggle');
+
+    if (savedTheme === 'dark') {
+        body.classList.add('dark-mode');
+        themeToggleButton.innerHTML = 'Switch to Light Mode';
+    }
+});
+
+// Function to toggle the dark mode and save the preference
+function toggleTheme() {
+    const body = document.body;
+    const themeToggleButton = document.getElementById('theme-toggle');
+
+    // Toggle the dark-mode class on the body
+    body.classList.toggle('dark-mode');
+
+    // Save the current theme in localStorage
+    if (body.classList.contains('dark-mode')) {
+        localStorage.setItem('theme', 'dark');
+        themeToggleButton.innerHTML = 'Switch to Light Mode';
+    } else {
+        localStorage.setItem('theme', 'light');
+        themeToggleButton.innerHTML = 'Switch to Dark Mode';
+    }
+}
 
diff --git a/style.css b/style.css
index 6bf70eb..246486d 100644
--- a/style.css
+++ b/style.css
@@ -9,6 +9,37 @@ body {
     background: url('assets/background.png') no-repeat center center fixed;
     background-size: cover;
 }
+#theme-toggle {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+    display: inline-flex;
+    align-items: center;
+}
+
+#theme-toggle:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+}
+
+.dark-mode #theme-toggle {
+    background-color: #333;
+    color: #fff;
+}
+
+.dark-mode #theme-toggle:hover {
+    background-color: #555;
+}
+#theme-toggle img {
+    margin-right: 8px;
+}
+
 
 h1 {
     text-align: center;
@@ -117,4 +148,71 @@ h1 {
 .js-delete-button img,
 .js-edit-button img {
     margin-right: 5px;
+}
+
+
+/* Dark mode styles */
+.dark-mode {
+    background-color: #333;
+    color: #fff;
+}
+
+.dark-mode .js-name-input,
+.dark-mode .js-date-input,
+.dark-mode .js-time-input {
+    background-color: #444;
+    color: #fff;
+    border: 1px solid #555;
+}
+
+.dark-mode .js-add-grid {
+    background-color: rgba(50, 50, 50, 0.9);
+}
+
+.dark-mode .js-add-button {
+    background-color: #28a745;
+}
+
+.dark-mode .js-add-button:hover {
+    background-color: #218838;
+}
+
+.dark-mode .js-delete-button {
+    background-color: #dc3545;
+}
+
+.dark-mode .js-delete-button:hover {
+    background-color: #c82333;
+}
+
+.dark-mode .js-edit-button {
+    background-color: #007bff;
+}
+
+.dark-mode .js-edit-button:hover {
+    background-color: #0056b3;
+}
+
+/* Button styling for dark mode */
+.dark-mode button#theme-toggle {
+    background-color: #444;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.dark-mode .small-container {
+    background-color: #444;
+    color: #fff;           
+    padding: 10px;         
+    border: 1px solid #555; 
+    margin-bottom: 10px;   
+    border-radius: 5px;     
+}
+
+/* Dark mode button styles */
+.dark-mode .js-delete-button, 
+.dark-mode .js-edit-button {
+    color: #fff; 
 }
\ No newline at end of file

From 80f0af2eb259e6ace99eaff3ce587a1e3d72d3c8 Mon Sep 17 00:00:00 2001
From: Ayush Singh <ayush1009208@gmail.com>
Date: Sun, 13 Oct 2024 11:50:11 +0530
Subject: [PATCH 2/2] Review

---
 eslint.config.mjs | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 eslint.config.mjs

diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..1baba1b
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,11 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];
\ No newline at end of file