Merge pull request #709 from Shiva-Sai-ssb/SimpleCalculator-shiva-sai-ssb

PBJI · web-flow · commit e88c35009f8a · 2023-10-08T21:25:53.000+05:30
chore: Add Calculator Project
diff --git a/SimpleCalculator/Shiva-Sai-ssb/index.html b/SimpleCalculator/Shiva-Sai-ssb/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!--Meta tag is used to make the webpage reponsive, controls page dimension and scaling-->
+    <meta name="viewport" content="width=device-width, initail-scale=1.0" />
+    <title>Simple Calculator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="calc">
+      <input type="text" placeholder="0" id="inputbox" />
+      <div>
+        <button class="operator">AC</button>
+        <button class="operator">DEL</button>
+        <button class="operator">%</button>
+        <button class="operator">/</button>
+      </div>
+      <div>
+        <button>7</button>
+        <button>8</button>
+        <button>9</button>
+        <button class="operator">*</button>
+      </div>
+      <div>
+        <button>4</button>
+        <button>5</button>
+        <button>6</button>
+        <button class="operator">-</button>
+      </div>
+      <div>
+        <button>1</button>
+        <button>2</button>
+        <button>3</button>
+        <button class="operator">+</button>
+      </div>
+      <div>
+        <button>0</button>
+        <button>00</button>
+        <button class="operator">.</button>
+        <button class="equal-btn">=</button>
+      </div>
+    </div>
+    <script src="myscript.js"></script>
+  </body>
+</html>
diff --git a/SimpleCalculator/Shiva-Sai-ssb/myscript.js b/SimpleCalculator/Shiva-Sai-ssb/myscript.js
@@ -0,0 +1,38 @@
+let input = document.getElementById("inputbox");
+input.addEventListener('keypress', (e)=>{
+    const charCode = e.charcode
+
+    if( 65<=charCode<=90 || 97<=charCode<=122){
+        e.preventDefault()
+    }
+
+})
+let buttons = document.querySelectorAll("button");
+
+let string = "";
+let arr = Array.from(buttons)
+
+arr.forEach(button =>{
+    button.addEventListener("click", (e)=>{
+        if(e.target.innerHTML == '='){
+            string = eval(string);
+            input.value = string
+        }
+
+        else if(e.target.innerHTML=="AC"){
+            string='';
+            input.value=string;
+        }
+
+        else if(e.target.innerHTML == "DEL"){
+            string=string.substring(0,string.length-1);
+            input.value= string;
+        }
+        else{
+            if (/^[\d+*\/%-]$/.test(e.target.innerHTML)) {
+                string += e.target.innerHTML;
+                input.value = string;
+            }
+        }
+    })
+})
diff --git a/SimpleCalculator/Shiva-Sai-ssb/style.css b/SimpleCalculator/Shiva-Sai-ssb/style.css
@@ -0,0 +1,65 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+body {
+  background: linear-gradient(to top, rgb(1, 88, 88), rgb(1, 64, 83));
+  width: 100%;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.calc {
+  background: #222;
+  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+input {
+  width: 352px;
+  height: 70px;
+  border: none;
+  background: transparent;
+  margin: 10px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
+  padding: 24px;
+  font-size: 40px;
+  text-align: right;
+  cursor: pointer;
+  color: whitesmoke;
+}
+
+input::placeholder {
+  color: #848282;
+}
+
+button {
+  color: whitesmoke;
+  background: transparent;
+  width: 70px;
+  height: 70px;
+  border-radius: 16px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
+  border: none;
+  margin: 10px;
+  font-weight: bold;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 23px;
+}
+
+.equal-btn {
+  background-color: rgb(223, 147, 5);
+  color: white;
+  font-size: 27px;
+}
+
+.operator {
+  color: rgb(245, 189, 4);
+}
