Skip to content

Commit 7a60b5d

Browse files
dpakdev02-devdpakdev02-dev
authored
Merge pull request #1 from dpakdev02-dev/master
Last Change
2 parents b8f1398 + eda53d4 commit 7a60b5d

3 files changed

Lines changed: 131 additions & 0 deletions

File tree

‎App.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
let fn1=(num)=>{
2+
document.getElementById("output").value+=num;
3+
}
4+
5+
let equalsf=()=>{
6+
let data=document.getElementById("output").value;
7+
document.getElementById("output").value=eval(data);
8+
}
9+
10+
let clrscr=()=>{
11+
document.querySelector("input").value="";
12+
}
13+
14+
let bckspc=()=>{
15+
let val=document.querySelector("input").value;
16+
17+
document.querySelector("input").value=val.substring(0,val.length-1);
18+
}

‎index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Calculator App</title>
7+
<link rel="stylesheet" href="./style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="inner">
12+
<div class="out">
13+
<input type="text" class="input" id="output">
14+
</div>
15+
<div class="btns">
16+
<div class="btn" id="btn1" onclick="clrscr()" >C</div>
17+
<div class="btn" id="btn2" onclick="bckspc()"> &larr;</div>
18+
<div class="btn" id="btn3" onclick="fn1('/')">&divide;</div>
19+
<div class="btn" id="btn4" onclick="fn1('*')">x</div>
20+
<div class="btn" id="btn5" onclick="fn1(7)">7</div>
21+
<div class="btn" id="btn6" onclick="fn1(8)">8</div>
22+
<div class="btn" id="btn7" onclick="fn1(9)">9</div>
23+
<div class="btn" id="btn8" onclick="fn1('-')" >-</div>
24+
<div class="btn" id="btn9" onclick="fn1(4)">4</div>
25+
<div class="btn" id="btn10" onclick="fn1(5)">5</div>
26+
<div class="btn" id="btn11" onclick="fn1(6)">6</div>
27+
<div class="btn" id="btn12" onclick="fn1('+')">+</div>
28+
<div class="btn" id="btn13" onclick="fn1(1)">1</div>
29+
<div class="btn" id="btn14" onclick="fn1(2)">2</div>
30+
<div class="btn" id="btn15" onclick="fn1(3)">3</div>
31+
<div class="btn" id="btn16" onclick="fn1('%')">%</div>
32+
<div class="btn" id="btn17" onclick="fn1(0)">0</div>
33+
<div class="btn" id="btn18" onclick="fn1('00')">00</div>
34+
<div class="btn" id="btn19" onclick="fn1('.')">.</div>
35+
<div class="btn" id="btn20" onclick="equalsf()">=</div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<script src="./App.js"></script>
41+
</body>
42+
</html>

‎style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
* {
2+
padding: 0%;
3+
margin: 0%;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
height: 100vh;
9+
width: 100vw;
10+
background-color: blanchedalmond;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.inner {
17+
height: 500px;
18+
width: 350px;
19+
background-color: black;
20+
border-radius: 10px;
21+
}
22+
23+
.out>.input {
24+
height: 50px;
25+
width: 95%;
26+
border: 1px solid grey;
27+
border-radius: 5px;
28+
background-color: rgb(221, 242, 235);
29+
padding-right: 10px;
30+
display: flex;
31+
text-align: end;
32+
align-items: center;
33+
justify-content: end;
34+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
35+
}
36+
37+
.out {
38+
height: 15%;
39+
width: 100%;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
}
44+
45+
.btns {
46+
height: calc(100% - 70px);
47+
width: 100%;
48+
display: grid;
49+
grid-template-columns: 70px 70px 70px 70px;
50+
grid-template-rows: 70px 70px 70px 70px 70px;
51+
padding: 15px;
52+
gap: 12px;
53+
}
54+
55+
.btn {
56+
border: none;
57+
border-radius: 5px;
58+
background-color: rgb(34, 33, 33);
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
color: white;
63+
font-size: x-large;
64+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
65+
}
66+
67+
input{
68+
font-size: 2em;
69+
font-weight: bolder;
70+
color: rgb(5, 5, 5);
71+
}

0 commit comments

Comments
 (0)