Script updated for Bug

Author: Rivalcoder

image.png

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>To-Do List with Delete Button</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/x-icon" href="sources\website.png">
     <!-- Link to Font Awesome for icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -16,13 +17,15 @@
     <!-- <div class="logo">
         <img src="sources\a.jpeg" alt="My Logo" style="width: 50px; height:50px;border-radius: 50%;">
     </div> -->
+    <button id="resetButton" onclick="reset()">Help in Bug</button>
+
     <h2>Remind list</h2>
     <div class="box1">
     <input type="text" id="taskInput" class="inp" placeholder="Enter a Quick Task to Add..">
     <button class="add"id="add" onclick="addTask(),effect()">Add Task</button>
     </div>
     <ul id="taskList"></ul>
-
+   
     <script src="script.js"></script>
 </body>
 </html>

index.html

@@ -110,4 +110,26 @@ function displayTasks() {
     });
 }
 
+
+function reset() {
+    if (confirm("Are you sure you want to reset all tasks?")) {
+        console.log("Enter the reset phase");
+        
+        let tasks = [];
+        localStorage.setItem('tasks', JSON.stringify(tasks));
+        
+        const taskList = document.getElementById('taskList');
+        taskList.innerHTML = '';
+    } else {
+        console.log("Reset cancelled");
+    }
+}
+
+
+function showResetButton() {
+    const resetButton = document.getElementById('resetButton');
+    resetButton.classList.add('visible');
+}
+
+showResetButton();
 window.onload = displayTasks;

script.js

@@ -121,6 +121,21 @@ li {
     padding: 10px; 
 }
 
+#resetButton {
+    position: fixed;
+    color: #8E0E00;
+    top: 10px;
+    right: 10px;
+    opacity: 0; 
+    transition: opacity 0.3s;
+}
+
+#resetButton.visible {
+    opacity: 1;
+}
+
+
+
 @media (max-width: 600px) {
     h2 {
         font-size: 2rem;