reset button

index.html

@@ -53,6 +53,10 @@ <h1 class="subtitle">Todo-List</h1>
           <button class="js-cancel-button" title="Cancel">
             <i class="fa-solid fa-times"></i>
           </button>
+          <button class="js-reset-button" onclick="resetForm();">
+            <img src="reset2.png" alt="Reset" width="16" height="16" /> Reset
+          </button>
+
         </div>
         <div id="js-success-notification" style="display: none">
           <p>Task completed 🎉</p>

script.js

@@ -181,6 +181,18 @@ function updateTodoList() {
         : priorityOrder[b.priority] - priorityOrder[a.priority];
     }
   });
+
+  function resetForm() {
+    // Get the input fields
+    const nameInput = document.querySelector('.js-name-input');
+    const dateInput = document.querySelector('.js-date-input');
+    const timeInput = document.querySelector('.js-time-input');
+
+    // Clear their values
+    nameInput.value = '';
+    dateInput.value = '';
+    timeInput.value = '';
+  }
 
   const addElement = document.querySelector('.js-add-html');
   todoListhtml = '';

style.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');
 
 body {
@@ -195,6 +195,20 @@ h1 {
   color: white;
 }
 
+.js-reset-button {
+  background-color: #f44336; /* Red color */
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+.js-reset-button:hover {
+  background-color: #d32f2f; /* Darker red */
+}
+
 .js-delete-button:hover {
   background-color: darkred;
 }