add clear button, set inputmode on text inputs

jere-mie · Nov 9, 2024 · a502229 · a502229
1 parent 8e2ec95
commit a502229
Showing 1 changed file with 27 additions and 4 deletions.
diff --git a/currency/index.html b/currency/index.html
@@ -39,23 +39,40 @@
         input[type="text"]:focus {
             background-color: #d0d0d0;
         }
+
+        button.clear-btn {
+            padding: 0.5rem 1rem;
+            font-size: 1.2rem;
+            margin-top: 20px;
+            border: none;
+            border-radius: 0.25rem;
+            background-color: #082098;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.2s ease-in-out;
+        }
+
+        button.clear-btn:hover {
+            background-color: #112dbb;
+        }
     </style>
 </head>
 <body>
     <h1 style="text-align: center;">Currency Converter</h1>
     <div style="display: flex; flex-direction: column; align-items: center;">
         <div>
             <label for="cad">🍁 CAD</label>
-            <input type="text" name="cad" id="cad" value="0.0">
+            <input type="text" name="cad" id="cad" value="" inputmode="decimal">
         </div>
         <div>
-            <label for="usd">⭐ USD</label>
-            <input type="text" name="usd" id="usd" value="0.0">
+            <label for="usd">🦅 USD</label>
+            <input type="text" name="usd" id="usd" value="" inputmode="decimal">
         </div>
         <div>
             <label for="dop">🏝️ DOP</label>
-            <input type="text" name="dop" id="dop" value="0.0">
+            <input type="text" name="dop" id="dop" value="" inputmode="decimal">
         </div>
+        <button class="clear-btn" onclick="clearInputs()">Clear</button>
     </div>
 
     <script>
@@ -92,6 +109,12 @@ <h1 style="text-align: center;">Currency Converter</h1>
                 }
             }
         }
+
+        function clearInputs() {
+            cad.value = "";
+            usd.value = "";
+            dop.value = "";
+        }
     </script>
 </body>
 </html>