Merge pull request #1 from dpakdev02-dev/master

dpakdev02-dev · web-flow · commit 7a60b5d8bf6b · 2025-08-26T12:54:26.000+05:30
Last Change
diff --git a/App.js b/App.js
@@ -0,0 +1,18 @@
+let fn1=(num)=>{
+    document.getElementById("output").value+=num;
+}
+
+let equalsf=()=>{
+   let data=document.getElementById("output").value;
+   document.getElementById("output").value=eval(data);
+}
+
+let clrscr=()=>{
+    document.querySelector("input").value="";
+}
+
+let bckspc=()=>{
+    let val=document.querySelector("input").value;
+
+    document.querySelector("input").value=val.substring(0,val.length-1);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator App</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="inner">
+            <div class="out">
+                <input type="text" class="input" id="output">
+            </div>
+            <div class="btns">
+                <div class="btn" id="btn1" onclick="clrscr()" >C</div>
+                <div class="btn" id="btn2" onclick="bckspc()">	&larr;</div>
+                <div class="btn" id="btn3" onclick="fn1('/')">&divide;</div>
+                <div class="btn" id="btn4" onclick="fn1('*')">x</div>
+                <div class="btn" id="btn5" onclick="fn1(7)">7</div>
+                <div class="btn" id="btn6" onclick="fn1(8)">8</div>
+                <div class="btn" id="btn7" onclick="fn1(9)">9</div>
+                <div class="btn" id="btn8" onclick="fn1('-')" >-</div>
+                <div class="btn" id="btn9" onclick="fn1(4)">4</div>
+                <div class="btn" id="btn10" onclick="fn1(5)">5</div>
+                <div class="btn" id="btn11" onclick="fn1(6)">6</div>
+                <div class="btn" id="btn12" onclick="fn1('+')">+</div>
+                <div class="btn" id="btn13" onclick="fn1(1)">1</div>
+                <div class="btn" id="btn14" onclick="fn1(2)">2</div>
+                <div class="btn" id="btn15" onclick="fn1(3)">3</div>
+                <div class="btn" id="btn16" onclick="fn1('%')">%</div>
+                <div class="btn" id="btn17" onclick="fn1(0)">0</div>
+                <div class="btn" id="btn18" onclick="fn1('00')">00</div>
+                <div class="btn" id="btn19" onclick="fn1('.')">.</div>
+                <div class="btn" id="btn20" onclick="equalsf()">=</div>
+            </div>
+        </div>
+    </div>
+
+    <script src="./App.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,71 @@
+* {
+    padding: 0%;
+    margin: 0%;
+    box-sizing: border-box;
+}
+
+.container {
+    height: 100vh;
+    width: 100vw;
+    background-color: blanchedalmond;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.inner {
+    height: 500px;
+    width: 350px;
+    background-color: black;
+    border-radius: 10px;
+}
+
+.out>.input {
+    height: 50px;
+    width: 95%;
+    border: 1px solid grey;
+    border-radius: 5px;
+    background-color: rgb(221, 242, 235);   
+    padding-right: 10px;
+    display: flex;
+    text-align: end;
+    align-items: center;
+    justify-content: end;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.out {
+    height: 15%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btns {
+    height: calc(100% - 70px);
+    width: 100%;
+    display: grid;
+    grid-template-columns: 70px 70px 70px 70px;
+    grid-template-rows: 70px 70px 70px 70px 70px;
+    padding: 15px;
+    gap: 12px;
+}
+
+.btn {
+    border: none;
+    border-radius: 5px;
+    background-color: rgb(34, 33, 33);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: x-large;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+input{
+    font-size: 2em;
+    font-weight: bolder;
+    color: rgb(5, 5, 5);
+}
