Create Full code

Jaskaran-Techno · Jan 22, 2022 · 6838630 · 6838630
1 parent c15d7e0
commit 6838630
Showing 1 changed file with 103 additions and 0 deletions.
diff --git a/Full code b/Full code
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Javascript Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <div class = "container">
+     <h1>Calculator</h1>
+
+     <div class="calculator">
+         <input type="text" name="screen" id="search">
+     <table>
+         <tr>
+         <td><button>(</button></td>
+         <td><button>)</button></td>
+         <td><button>C</button></td>
+         <td><button>%</button></td>
+         </tr>
+     <tr>
+         <td><button>7</button></td>
+         <td><button>8</button></td>
+         <td><button>9</button></td>
+         <td><button>X</button></td>
+     </tr>
+     <tr>
+         <td><button>4</button></td>
+         <td><button>5</button></td>
+         <td><button>6</button></td>
+         <td><button>-</button></td>
+     </tr>
+     <tr>
+         <td><button>1</button></td>
+         <td><button>2</button></td>
+         <td><button>3</button></td>
+         <td><button>+</button></td>
+     </tr>
+         <tr>
+             <td><button>0</button></td>
+             <td><button>.</button></td>
+             <td><button>=</button></td>
+             <td><button>/</button></td>
+         </tr>
+     </table>
+     </div>
+
+ </div>
+ <style>
+     .container {
+    text-align: center;
+    margin: top:23px;
+}
+table {
+    margin: auto;
+}
+input {
+    font-size: 34px;
+    border: 5px solid black;
+    border-radius: 4px;
+}
+button {
+    font-size: 30px;
+    background: aliceblue;
+    width: 102px;
+    height: 58px;
+}
+.calculator {
+    display: inline-block;
+}
+
+ </style>
+</body>
+<script src = "index.js"></script>
+<script>
+     let screen = document.getElementById('screen');
+buttons = document.querySelectorAll('button');
+let screenValue = '';
+for (item of buttons){
+    item.addEventListener('click', (e)=>{
+        buttonText = e.target.innerText;
+        console.log('Button text is ', buttonText)
+        if(buttonText=='X'){
+            buttonText = '*';
+            screenValue += buttonText;
+            screen.value += buttonText;
+        }
+        else if (buttonText == 'C'){
+            screen.value = "";
+            screen.value = screenValue;
+        }
+        else if (buttonText == '='){
+            screen.value = eval(screenValue);
+        }
+        else{
+            screenValue = buttonText;
+            screen.value = screenValue;
+        }
+
+    })
+}
+</script>
+</html>