<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="calc well text-center">
<div>Electronic calculator</div>
<div class="disp well text-right"><p>0</p></div>
<div class="row">
<div class="col-xs-3">
<button class = "AC btn btn-block">AC
</button>
</div>
<div class="col-xs-3">
<button class = "CE btn btn-block">CE
</button>
</div>
<div class="col-xs-3">
<button class = "divide btn btn-block"> ÷
</button>
</div>
<div class="col-xs-3">
<button class = "multi btn btn-block">X
</button>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button class = "seven btn btn-block">7
</button>
</div>
<div class="col-xs-3">
<button class = "eight btn btn-block"> 8
</button>
</div>
<div class="col-xs-3">
<button class = "nine btn btn-block"> 9
</button>
</div>
<div class="col-xs-3">
<button class = "minus btn btn-block"> -
</button>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button class = "four btn btn-block">4
</button>
</div>
<div class="col-xs-3">
<button class = "five btn btn-block"> 5
</button>
</div>
<div class="col-xs-3">
<button class = "six btn btn-block"> 6
</button>
</div>
<div class="col-xs-3">
<button class = "plus btn btn-block"> +
</button>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button class = "one btn btn-block">1
</button>
</div>
<div class="col-xs-3">
<button class = "two btn btn-block"> 2
</button>
</div>
<div class="col-xs-3">
<button class = "three btn btn-block"> 3
</button>
</div>
<div class="col-xs-3">
<button class="equal btn btn-block"> =
</button>
</div>
</div>
<div id="bottom-row" class="row">
<div id="zero" class="col-xs-3">
<button class="btn btn-block">0
</button>
</div>
<div id="dot" class="col-xs-6">
<button class="btn btn-block">.
</button>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/11abdullah11/calculator-Gvpzgj */
body{
background-color:#AABBCC;
}
.calc{
color:#AAAAFF;
font-size:25px;
margin-top:13%;
margin-left:33%;
width:330px;
background-color:#554455;
padding:1%;
border-radius:20px;
box-shadow:2px 4px 8px 2px #221122;
}
p{
margin-bottom:17%;
}
.disp{
background-color:grey;
color:#111111;
margin:5%;
width:272px;
height:50px;
}
button{
margin:5px 7px 10px 2px;
background-color:#112233;
box-shadow: 0 2px #445566;
}
button:active {
box-shadow: 0 2px #445566;
transform: translateY(2px);
}
.AC, .CE{
background-color:#990000;
}
.equal{
height:80px;
}
#dot{
margin-left:84px;
margin-top:-41px;
}
#zero{
margin-top:-40px;
}
/*Downloaded from https://www.codeseek.co/11abdullah11/calculator-Gvpzgj */
var temp="";
var text="";
var characters={
"plus":"+",
"minus":"-",
"multi":"*",
"divide":"/"
}
$('.AC').click(function (){
text="0";
$(".disp").text(text);
text="";
});
$('.CE').click(function (){
text="0";
$(".disp").text(text);
text="";
});
$('.divide').click(function (){
if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
temp = text.slice(0,text.length-1);
temp+="/";
text = temp;
}
else{
text+="/"
}
$(".disp").text(text);
});
$('.multi').click(function (){
if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
temp = text.slice(0,text.length-1);
temp+="*";
text = temp;
}
else{
text+="*";
}
$(".disp").text(text);
});
$('.minus').click(function (){
if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
temp = text.slice(0,text.length-1);
temp+="-";
text = temp;
}
else{
text+="-";
}
$(".disp").text(text);
});
$('.plus').click(function (){
if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
temp = text.slice(0,text.length-1);
temp+="+";
text = temp;
}
else{
text+="+";
}
$(".disp").text(text);
});
$('.equal').click(function (){
text = eval(text);
$(".disp").text(text);
text="";
});
//numbers
$(".one").click(function(){
text+="1";
$(".disp").text(text);
});
$(".two").click(function(){
text+="2";
$(".disp").text(text);
});
$(".three").click(function(){
text+="3";
$(".disp").text(text);
});
$(".four").click(function(){
text+="4";
$(".disp").text(text);
});
$(".five").click(function(){
text+="5";
$(".disp").text(text);
});
$(".six").click(function(){
text+="6";
$(".disp").text(text);
});
$(".seven").click(function(){
text+="7";
$(".disp").text(text);
});
$(".eight").click(function(){
text+="8";
$(".disp").text(text);
});
$(".nine").click(function(){
text+="9";
$(".disp").text(text);
});
$("#zero").click(function(){
text+="0";
$(".disp").text(text);
});
$("#dot").click(function(){
text+=".";
$(".disp").text(text);
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
jQuery
v3.2.1
