From 0a162fb8dc74c42217c4fb79b69836b95d79741e Mon Sep 17 00:00:00 2001
From: bowen-H0 <13236665551@163.com>
Date: Tue, 24 Sep 2024 19:43:19 -0700
Subject: [PATCH] Update index.html

Add `readonly` attribute to `.in` input field

- Added the `readonly` attribute to the input element with class `in` to prevent direct user input via the keyboard while still allowing dynamic updates through JavaScript.(Keyboard input is already handled by JavaScript, so no need for manual input in the input field)
---
 index.html | 93 +++++++++++++++++++++++-------------------------------
 1 file changed, 39 insertions(+), 54 deletions(-)
diff --git a/index.html b/index.html
index a1c2928..259bdf0 100644
--- a/index.html
+++ b/index.html
@@ -1,62 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-<link rel="stylesheet" href="style.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
 
 </head>
-<body >
-
-       <div class="contain .gradient-background">
-
- <div class="cal">
-                                <input class="in">
-                                   <div class="NUMBER">
-                                    <button class="key operator">C</button>
-                                    <button class="key operator">X</button>
-                                    <button class="key operator">(</button>
-                                    <button class="key operator">)</button>
-
-                                           
-                                        
-                                           
-                                          <button class="key ">7</button>
-                                          
-                                            <button class="key">8</button>
-                                            <button class="key">9</button>
-                                            <button class="key operator">-</button>
-
-              
-                                            <button class="key">4</button>
-                                            <button class="key">5</button>
-                                            <button class="key">6</button>
-                                            <button class="key operator">*</button>                                              <button class="key">1</button>
-                     <button class="key">2</button>
-                                            <button class="key">3</button>
-                                            <button class="key operator">+</button>
-
-                                            <button class="key " style="text-align:center;">.</button>
-                                            
-                                            <button class="key" >0</button>
-                                            <button class="key">%</button>
-                         
-                                            
-                                            <button class="key operator">/</button>
-                                        <button class="key operator" style="width: 90%;  color:black;  background-color:#d8b4fe; ">=</button>
-                                   </div>
-
-                                     
-=
-                    </div>
-
-
-
-       </div>
-
 
+<body>
+  <div class="contain .gradient-background">
+
+    <div class="cal">
+      <!-- The "readonly" attribute disables direct keyboard input, 
+     but the value can still be updated via JavaScript.
+     (Keyboard input is already handled by JavaScript, so no need for manual input in the input field) -->
+      <input class="in" readonly>
+      <div class="NUMBER">
+        <button class="key operator">C</button>
+        <button class="key operator">X</button>
+        <button class="key operator">(</button>
+        <button class="key operator">)</button>
+        <button class="key ">7</button>
+        <button class="key">8</button>
+        <button class="key">9</button>
+        <button class="key operator">-</button>
+
+        <button class="key">4</button>
+        <button class="key">5</button>
+        <button class="key">6</button>
+        <button class="key operator">*</button> <button class="key">1</button>
+        <button class="key">2</button>
+        <button class="key">3</button>
+        <button class="key operator">+</button>
+        <button class="key " style="text-align:center;">.</button>
+        <button class="key">0</button>
+        <button class="key">%</button>
+        <button class="key operator">/</button>
+        <button class="key operator" style="width: 90%;  color:black;  background-color:#d8b4fe; ">=</button>
+      </div>=</div>
+  </div>
+  <script src="js.js"></script>
+</body>
 
-     <script src="js.js"></script>
-</body> 
 </html>
