Merge pull request #38 from hackbysarthak03/patch-1

Added a Simple Calculator
naveen3011 · Oct 9, 2022 · 8ddaa90 · 8ddaa90
2 parents 0f3f535 + 445fa96
commit 8ddaa90
Showing 1 changed file with 173 additions and 0 deletions.
diff --git a/Simple Calculator/Calculator.html b/Simple Calculator/Calculator.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <style>
+        .container{
+    text-align: center;
+}
+table{
+    margin: auto;
+
+
+}
+input{
+    width: 361px;
+height: 70px;
+font-size: 38px;
+    border-radius: 7px;
+    margin: 40px;
+    background-color: rgb(230, 230, 17);
+    font-weight: bold;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    border: 5px solid red;
+}
+button{
+    height: 60px;
+    width: 90px;
+    border-radius: 10px;
+    font-size: 30px;
+    margin: 0px;
+    z-index: 1;
+    background-color: rgb(5, 5, 252);
+    color:white;
+    transition:0.5s;
+    border:2px solid rgb(0, 0, 0);
+    font-weight: bold;
+}
+button:hover{
+    background-color:yellow;
+    color: white;
+    cursor: pointer;
+    width: 80px;
+    height: 58px;
+    border-radius: 14px;
+    font-size: 45px;
+    color: black;
+    font-weight: bold;
+
+}
+.num{
+    background-color: rgb(23, 27, 65);
+    border:4px solid yellow;
+}
+#clear{
+    background-color: red;
+}
+.calcu{
+    color:white;
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+#clear:hover{
+color: white;
+}
+.calc{
+    margin-top: 20px;
+    border: 10px solid black;
+    padding: 5px;
+    display: inline-block;
+    background-color:rgb(0, 0, 0);
+    opacity:0.8;
+    border-radius: 40px;
+    transition: 0.3s;
+
+
+}
+
+#equal{
+    background-color: rgb(9, 245, 9);
+    color: black;
+    font-size: 45px;
+    border:3px solid rgb(213, 250, 3);
+}
+#equal:hover{
+    background-color: greenyellow;
+
+}
+body{
+    background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);
+}
+
+    </style>
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator</title>
+</head>
+<body >
+<div class="calcu">
+Simple Calculator 
+    </div>
+    <div class="container">
+
+        <div class="calc">
+
+        <input name="screen" id="screen" type="text" readonly>
+           <table>
+
+               <tr>
+                <td><button id="clear">AC</button></td>
+                <td><button>(</button></td>
+                <td><button>)</button></td>
+                <td><button>/</button></td>
+            </tr>
+            <tr>
+                <td><button class="num">7</button></td>
+                <td><button class="num">8</button></td>
+                <td><button class="num">9</button></td>
+                <td><button>X</button></td>
+            </tr>
+            <tr>
+                <td><button class="num">4</button></td>
+                <td><button class="num">5</button></td>
+                <td><button class="num">6</button></td>
+                <td><button>-</button></td>
+            </tr>
+            <tr>
+                <td><button class="num">1</button></td>
+                <td><button class="num">2</button></td>
+                <td><button class="num">3</button></td>
+                <td><button >+</button></td>
+            </tr>
+            <tr>
+                <td><button class="num">0</button></td>
+                <td><button class="num">00</button></td>
+                <td><button>.</button></td>
+                <td><button id="equal">=</button></td>
+            </tr>
+           </table>
+     </div></div>
+
+
+
+</body>
+<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 = screenValue;
+}
+else if(buttonText == 'AC'){
+    screenValue = " ";
+    screen.value = screenValue;
+}
+else if(buttonText=='='){
+    screen.value = eval(screenValue);
+}else{
+    screenValue += buttonText;
+    screen.value = screenValue;
+}
+})
+}
+</script>
+</html>