Bootstrap Snippet Calculator using HTML CSS Javascript

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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 ---------->
<div class="box">
<div class="display"><input type="text" readonly size="18" id="d"></div>
<div class="keys">
    <p><input type="button" class="button gray" 
    value="mrc" onclick='c("Created....................")'>
    <input type="button" class="button gray" 
    value="m-" onclick='c("...............by............")'>
    <input type="button" class="button gray" value="
    m+" onclick='c(".....................Dipak")'>
    <input type="button" class="button pink" 
    value="/" onclick='v("/")'></p>
    <p><input type="button" class="button black" 
    value="7" onclick='v("7")'><input type="button" 
    class="button black" value="8" onclick='v("8")'>
    <input type="button" class="button black" value="9" 
    onclick='v("9")'><input type="button" 
    class="button pink" value="*" onclick='v("*")'></p>
    <p><input type="button" class="button black" 
    value="4" onclick='v("4")'><input type="button" 
    class="button black" value="5" onclick='v("5")'>
    <input type="button" class="button black" value="6" 
    onclick='v("6")'><input type="button" 
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
 body
{
background-color:tan;
} 
.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
}
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
} 
.keys
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function c(val)
{
document.getElementById("d").value=val;
}
function v(val)
{
document.getElementById("d").value+=val;
}
function e() 
{ 
try 
{ 
  c(eval(document.getElementById("d").value)) 
} 
catch(e) 
{
  c('Error') 
} 
}  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Calculator"
Bootstrap 3.2.0 Snippet by Dipakk

Related: See More

Questions / Comments:

"Calculator" Bootstrap 3.2.0 Snippet by Dipakk

Related: See More

Questions / Comments:

"Calculator"
Bootstrap 3.2.0 Snippet by Dipakk