Merge pull request #44 from robustus-atrax/feat/input-directly-from-keyboard

feat/take input directly from keyboard

Author: harsh98trivedi

index.html

@@ -65,43 +65,43 @@ <h1>
             <input type="text" name="screen" id="answer" readonly>
             <table>
                 <tr>
-                    <td><button>(</button></td>
-                    <td><button>)</button></td>
+                    <td><button value="(">(</button></td>
+                    <td><button value=")">)</button></td>
                     <td>
                         <div class="row">
                             <div class="col">
-                                <button onclick="clearAll()">C</button>
+                                <button value="C" onclick="clearAll()">C</button>
                             </div>
                             <div class="col">
-                                <button onclick="deleteLastEntry()">CE</button>
+                                <button value="CE" onclick="deleteLastEntry()">CE</button>
                             </div>
                         </div>
                     </td>
-                    <td><button>%</button></td>
+                    <td><button value="%">%</button></td>
                 </tr>
                 <tr>
-                    <td><button>7</button></td>
-                    <td><button>8</button></td>
-                    <td><button>9</button></td>
-                    <td><button>X</button></td>
+                    <td><button value="7">7</button></td>
+                    <td><button value="8">8</button></td>
+                    <td><button value="9">9</button></td>
+                    <td><button value="*">X</button></td>
                 </tr>
                 <tr>
-                    <td><button>4</button></td>
-                    <td><button>5</button></td>
-                    <td><button>6</button></td>
-                    <td><button>-</button></td>
+                    <td><button value="4">4</button></td>
+                    <td><button value="5">5</button></td>
+                    <td><button value="6">6</button></td>
+                    <td><button value="-">-</button></td>
                 </tr>
                 <tr>
-                    <td><button>1</button></td>
-                    <td><button>2</button></td>
-                    <td><button>3</button></td>
-                    <td><button>+</button></td>
+                    <td><button value="1">1</button></td>
+                    <td><button value="2">2</button></td>
+                    <td><button value="3">3</button></td>
+                    <td><button value="+">+</button></td>
                 </tr>
                 <tr>
-                    <td><button>0</button></td>
-                    <td><button style="font-weight: bold;">.</button></td>
-                    <td><button>/</button></td>
-                    <td><button style="background-color: #25db72; font-weight: bold; color: #ecf0f1;">=</button></td>
+                    <td><button value="0">0</button></td>
+                    <td><button value="." style="font-weight: bold;">.</button></td>
+                    <td><button value="/">/</button></td>
+                    <td><button value="=" style="background-color: #25db72; font-weight: bold; color: #ecf0f1;">=</button></td>
                 </tr>
             </table>
             <hr style="max-width: 50vw;">
@@ -154,18 +154,22 @@ <h1>
         if (/[0-9]/.test(key)) {
             handleButtonPress(key);
         }
-        //  operator key is pressed (+, -, *, /), trigger the corresponding operator button press
-        if (/[\+\-\*\/%]/.test(key)) {
+        //  operator key is pressed (+, -, *, /, %), trigger the corresponding operator button press
+        if (/[\.\+\-\*\/%()]/.test(key)) {
             handleButtonPress(key);
         }
     }
     function handleButtonPress(value) {
         // This function simulates the button press of the calculator for the given value
         // Find the corresponding button element based on the value
         const button = document.querySelector(`button[value="${value}"]`);
-        if (button) {
-            button.click();
-        }
+
+        button.classList.add('clicked')
+        button.click();
+        
+        setTimeout(() => {
+            button.classList.remove('clicked')
+        }, 70)
     }
 </script>
 </html>

styles/style.css

@@ -313,4 +313,9 @@ input:checked + .toggle-slider:before {
 /* Negative Numbers */
 .negative {
     color: red;
-  }
+  }
+
+/* visual effect on pressing button */
+.clicked {
+    transform: scale(0.68); /* Slightly shrink the button */
+}