Update index.html

index.html

@@ -160,14 +160,7 @@
             <label for="seconds-input">Seconds:</label>
             <input type="number" id="seconds-input" value="0" min="0">
         </div>
-        
-        <button id="start-timer">Start Timer</button>
-        <button id="pause">Pause</button>
-        <button id="reset">Reset</button>
-        <button id="start-stopwatch">Start Stopwatch</button>
-    </div>
-
-    <div>
+        <div>
         <label for="active-dot-color">Active Dot Color:</label>
         <input type="color" id="active-dot-color" value="#f39c12">
     </div>
@@ -175,6 +168,12 @@
         <label for="inactive-dot-color">Inactive Dot Color:</label>
         <input type="color" id="inactive-dot-color" value="#555555">
     </div>
+        
+        <button id="start-timer">Start Timer</button>
+        <button id="pause">Pause</button>
+        <button id="reset">Reset</button>
+        <button id="start-stopwatch">Start Stopwatch</button>
+    </div>
 
     <div class="timer-display" id="timer-display">00:00:00</div>
 
@@ -335,6 +334,22 @@ function updateGridRow(rows, previous, current, max) {
 updateDotColors();
 //ADDED STOP
 
+//NEW ADDED - Keyboard Functionality
+// Function to handle key press events
+function handleKeyPress(event) {
+  // Check if the pressed key corresponds to any action
+    if (event.key in keyActions) {
+        keyActions[event.key]();
+        event.preventDefault(); // Prevent the default action of the key if necessary
+    }
+}
+
+// Add event listener for keydown events
+document.addEventListener('keydown', handleKeyPress);
+
+
+//NEW ADDED STOP
+
 // Make sure the start function doesn't reset totalSeconds when resuming
 function start() {
     if (!isRunning) {