Emmanuil 4 years ago
parent
commit
5def42f75b
2 changed files with 48 additions and 16 deletions
  1. 33 16
      js-06/index.html
  2. 15 0
      js-06/js.js

+ 33 - 16
js-06/index.html

@@ -1,22 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <style>
-        table td {
-            border: 1px solid black;
-            padding: 20px;
-            width: 20px;
-            text-align: center;
-            font-size: 20px;
-            cursor: pointer;
-        }
+      body {
+        padding: 10px;
+      }
+      table td {
+        border: 1px solid black;
+        padding: 20px;
+        width: 20px;
+        text-align: center;
+        font-size: 20px;
+        cursor: pointer;
+      }
+      input {
+        width: 100%;
+        height: 40px;
+        margin: 3px 0;
+        font-size: 30px;
+      }
+      #calc {
+        width: calc(100% + 4px);
+        text-transform: uppercase;
+      }
     </style>
-</head>
-<body>
-    
+  </head>
+  <body>
+    <input type="number" id="number1" /> <br />
+    <input type="number" id="number2" /> <br />
+    <input type="number" id="result" /> <br />
+    <input type="button" id="calc" value="calc"/>
+
     <script src="js.js"></script>
-</body>
-</html>
+  </body>
+</html>

+ 15 - 0
js-06/js.js

@@ -39,3 +39,18 @@
 // };
 // table.onmouseover = (event) => changeBg(event, "black", "white");
 // table.onmouseout = (event) => changeBg(event, "", "");
+
+// CALC
+// calc.onclick = function () {
+//   resultNumber = +number1.value + +number2.value;
+//   var result = document.getElementById("result");
+//   result.value = resultNumber;
+// };
+
+
+// Calc Live
+// function calc() {
+//   result.value =( (+number1.value) + (+number2.value));
+// }
+// number1.oninput = calc;
+// number2.oninput = calc;