Skip to content

Commit 7dbfd23

Browse files
Atharvx1010Atharvx1010
committed
Added styled calculator
1 parent f345edf commit 7dbfd23

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed

‎styled calci/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" href="tlogo.png">
10+
<title>© Mukhtar Ansarii </title>
11+
</head>
12+
<body>
13+
<div class="calculator">
14+
<h6 class="owner">MADE BY MUKHTAR ANSARII</h6>
15+
<input type="text" placeholder="0" id="inputBox">
16+
17+
<div>
18+
<button class="op">AC</button>
19+
<button class="op">DEL</button>
20+
<button class="op">%</button>
21+
<button class="op">/</button>
22+
</div>
23+
24+
<div>
25+
<button>7</button>
26+
<button>8</button>
27+
<button>9</button>
28+
<button class="op">*</button>
29+
</div>
30+
<div>
31+
<button>4</button>
32+
<button>5</button>
33+
<button>6</button>
34+
<button class="op">-</button>
35+
</div>
36+
<div>
37+
<button>1</button>
38+
<button>2</button>
39+
<button>3</button>
40+
<button class="op">+</button>
41+
</div>
42+
<div>
43+
<button>00</button>
44+
<button>0</button>
45+
<button class="op">.</button>
46+
<button class="equal8tn">=</button>
47+
</div>
48+
49+
</div>
50+
51+
<script src="script.js"></script>
52+
</body>
53+
</html>

‎styled calci/script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
let input = document.getElementById('inputBox');
2+
let buttons = document.querySelectorAll('button');
3+
4+
let string = "";
5+
let arr = Array.from(buttons);
6+
arr.forEach(button => {
7+
button.addEventListener('click', (e) =>{
8+
if(e.target.innerHTML == '='){
9+
string = eval(string);
10+
input.value =string;
11+
}
12+
else if(e.target.innerHTML == 'AC'){
13+
string = "";
14+
input.value= string;
15+
}
16+
17+
else if(e.target.innerHTML == 'DEL'){
18+
string = string.substring(0, string.length-1);
19+
input.value = string;
20+
}
21+
22+
else{ string += e.target.innerHTML;
23+
input.value = string;
24+
25+
}
26+
27+
})
28+
})

‎styled calci/style.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
9+
}
10+
11+
body{
12+
width: 100%;
13+
height: 100vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
background: linear-gradient(45deg, #0a0a0a, #3a4452);
18+
}
19+
20+
.calculator{
21+
border: 1px solid #717377;
22+
padding: 20px;
23+
border-radius: 16px;
24+
background: transparent;
25+
box-shadow: 0px 3px 15px rgba(133, 115, 119, 0.5);
26+
}
27+
28+
input{
29+
width: 320px;
30+
border: none;
31+
padding: 24px;
32+
margin: 10px;
33+
background: transparent;
34+
box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
35+
font-size: 40px;
36+
text-align: right;
37+
cursor: pointer;
38+
color: #ffffff;
39+
}
40+
41+
input::placeholder{
42+
color: #ffffff;
43+
}
44+
45+
button{
46+
border: none;
47+
width: 60px;
48+
height: 60px;
49+
margin: 10px;
50+
border-radius: 50%;
51+
background: transparent;
52+
color: #ffffff;
53+
font-size: 20px;
54+
box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
55+
cursor: pointer;
56+
}
57+
58+
.equal8tn{
59+
background-color: #fb7c14;
60+
}
61+
62+
.op{
63+
color: aqua;
64+
}
65+
66+
.owner{
67+
color: white;
68+
font-size: 10px;
69+
}

0 commit comments

Comments
 (0)