"simple responsive calculator "
Bootstrap 4.1.1 Snippet by Electro1212

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Akasher Calculator</title>
<link rel="stylesheet" href="./Calculator.css">
</head>
<body>
<section>
<div class="container">
<div id="display"></div>
<div class="buttons">
<div class="button">C</div>
<div class="button">/</div>
<div class="button">*</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">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">+</div>
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">.</div>
<div class="button">(</div>
<div class="button">0</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.container{
max-width: 400px;
margin: 10vh auto 0 auto;
box-shadow: 0px 0px 43px 17px rgba(153, 153,153, 1);
}
#display{
text-align: right;
height: 70px;
line-height: 70px;
padding: 16px 8px;
font-size: 25px;
}
.buttons{
display: grid;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.button > div{
border-top: 1px solid #999;
border-right:1px solid #999;
}
.button{
border: 0.5px solid #999;
line-height: 100px;
text-align: center;
font-size: 25px;
cursor: pointer;
}
#equal{
background-color: #5555ff;
color: #fff;
}
.button:hover{
background-color:rgb(226, 156, 25);
color: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let display = document.getElementById('display');
let buttons = Array.from(document.getElementsByClassName('buttons'));
buttons.map( buttons =>{
buttons.addEventListener('click', (e) => {
switch(e.target.innerText){
case 'C':
display.innerText= '';
break;
case '←':
if(display.innerText){
display.innerText= display.innerText.slice(0, -1);
}
break;
case '=':
try{
display.innerText = eval(display.innerText);
}catch {
display.innerText = 'Buir asbe bokachoda';
}
break;
default:
display.innerText += e.target.innerText;
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard
Simple Vertical timeline
Simple white navbar
BS4 clean & simple invoice template

Questions / Comments: