Merge pull request #843 from saikrishna823/Calculator-saikrishna823

PBJI · web-flow · commit 1cbdd07c8f60 · 2023-10-11T01:33:16.000+05:30
Completed Adding Calculator App
diff --git a/Calculator/saikrishna823/calculator.js b/Calculator/saikrishna823/calculator.js
@@ -0,0 +1,16 @@
+let inputBtn=document.getElementById("inputBtn")
+let buttons=document.querySelectorAll(".button");
+const evalButton=document.getElementById("evalButton");
+const clearBtn=document.querySelector(".clearBtn");
+buttons.forEach((button)=>{
+ button.onclick=()=>{
+        inputBtn.value+=button.textContent;
+    }
+    })
+;
+evalButton.onclick=()=>{
+    inputBtn.value=eval(inputBtn.value);
+}
+clearBtn.onclick=()=>{
+    inputBtn.value=" ";
+}
diff --git a/Calculator/saikrishna823/index.html b/Calculator/saikrishna823/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Calculator
+        </title>
+    </head>
+<link href="styles.css" rel="stylesheet">
+<body>
+    <span id="container">
+         <h1>Calculator</h1>
+        <div class="input">
+           <input type="text" id="inputBtn">
+           <button type="reset" class="clearBtn">C</button>
+        </div>
+        <div class="input-buttons">
+            <div class="button">1</div>
+            <div class="button">2</div>
+            <div class="button">3</div>
+            <div class="button">/</div>
+            <div class="button">4</div>
+            <div class="button">5</div>
+            <div class="button">6</div>
+            <div class="button">-</div>
+            <div class="button">7</div>
+            <div class="button">8</div>
+            <div class="button">9</div>
+            <div class="button">+</div>
+            <div class="button">.</div>
+            <div class="button">0</div>
+            <button id="evalButton">=</button>
+            <div class="button">*</div>
+        </div>
+    </span>
+    <script src="calculator.js"></script>
+</body>
+</html>
diff --git a/Calculator/saikrishna823/styles.css b/Calculator/saikrishna823/styles.css
@@ -0,0 +1,63 @@
+*,body,html{
+ box-sizing: border-box;
+ margin:0px;
+
+}
+h1{
+    margin:5px;
+    color:brown;
+     text-transform: uppercase;
+    text-decoration:solid;
+
+}
+body{
+    background-color: beige;
+}
+#container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin:100px;
+}
+.input-buttons{
+    margin:10px;
+    display: grid;
+    grid-template-columns:repeat(4,55px);
+    grid-template-rows:repeat(4,35px);
+    gap:10px;
+    
+}
+.button{
+    padding:5px;
+    background-color: rgb(77, 10, 139);
+    text-align: center;
+    color: white;
+    border-radius: 10px;
+    font-size: x-large;
+}
+#evalButton{
+    background-color:rgb(239, 14, 194);
+    text-align: center;
+    color: white;
+    border-color:greenyellow;
+    border-radius: 10px;
+    font-size:x-large;
+
+}
+#evalButton:hover,focus,active{
+    outline: none;
+}
+#inputBtn{
+    border-radius:4px;
+    height:28px;
+    width:220px;
+}
+.clearBtn{
+    border-radius:3px;
+    padding:2px;
+    text-align: center;
+    font-size: larger;
+    color: white;
+    background-color:rgb(239, 14, 194);
+}
