<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>javascript calculator</title>
</head>
<body>
<div id="background">
<div id="result"></div>
<div id="main">
<div id="first-rows">
<button class="del-bg" id="delete">Del</button>
<button value="%" class="btn-style operator opera-bg fall-back">%</button>
<button value="+" class="btn-style opera-bg value align operator">+</button>
</div>
<div class="rows">
<button value="7" class="btn-style num-bg num first-child">7</button>
<button value="8" class="btn-style num-bg num">8</button>
<button value="9" class="btn-style num-bg num">9</button>
<button value="-" class="btn-style opera-bg operator">-</button>
</div>
<div class="rows">
<button value="4" class="btn-style num-bg num first-child">4</button>
<button value="5" class="btn-style num-bg num">5</button>
<button value="6" class="btn-style num-bg num">6</button>
<button value="*" class="btn-style opera-bg operator">x</button>
</div>
<div class="rows">
<button value="1" class="btn-style num-bg num first-child">1</button>
<button value="2" class="btn-style num-bg num">2</button>
<button value="3" class="btn-style num-bg num">3</button>
<button value="/" class="btn-style opera-bg operator">/</button>
</div>
<div class="rows">
<button value="0" class="num-bg zero" id="delete">0</button>
<button value="." class="btn-style num-bg period fall-back">.</button>
<button value="=" id="eqn-bg" class="eqn align">=</button>
</div>
</div>
</div>
</body>
</html>
body {
background:#777;
}
#background {
width:300px;
height:400px;
background:gray;
margin:50px auto;
-webkit-animation:bgChange 1s 1s alternate infinite;
transition: all 1s ease;
}
button {
border:0;
color:#fff;
}
#result {
display:block;
font-family: sans-serif;
width:230px;
height:40px;
margin:10px auto;
text-align: right;
border:0;
background:#3b3535;
color:#fff;
padding-top:20px;
font-size:20px;
margin-left: 25px;
outline: none;
overflow: hidden;
letter-spacing: 4px;
position: relative;
top:10px;
}
#result:hover {
cursor: text;
}
#first-rows {
margin-bottom: 20px;
position: relative;
top:10px;
}
.rows {
width:300px;
margin-top:10px;
}
#delete {
width:110px;
height:50px;
margin-left:25px;
border-radius:4px;
}
/* Aligning the division and dot button properly */
.fall-back {
margin-left:3px !important;
}
/* Aligning the addition and equals to button properly */
.align {
margin-left: 6px !important;
}
/* Button styling */
.btn-style {
width:50px;
height:50px;
margin-left:5px;
border-radius:4px;
}
.eqn {
width:50px;
height:50px;
margin-left:5px;
border-radius:4px;
}
.first-child {
margin-left:25px;
}
/* Adding background color to the number values */
.num-bg {
background:#000;
color:#fff;
font-size:26px;
cursor:pointer;
outline:none;
border-bottom:3px solid #333;
}
.num-bg:active {
background:#000;
color:#fff;
font-size:26px;
cursor:pointer;
outline:none;
box-shadow: inset 5px 5px 5px #555;
}
/*Adding background color to the operator values */
.opera-bg {
background:#333;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
border-bottom:3px solid #555;
}
.opera-bg:active {
background:#333;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
box-shadow: inset 4px 4px 4px #555;
}
/*Adding a background color to the delete button */
.del-bg {
background:#24b4de;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
border-bottom:3px solid #399cb9;
}
.del-bg:active {
background:#24b4de;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
box-shadow: inset 4px 4px 4px #399cb9;
}
/*Adding a background color to the equals to button */
#eqn-bg {
background:#17a928;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
border-bottom:3px solid #1f7a29;
}
#eqn-bg:active {
background:#17a928;
color:#fff;
font-size:26px;
cursor: pointer;
outline:none;
box-shadow: inset 4px 4px 4px #1f7a29;
}
@-webkit-keyframes bgChange {
0% {
background:#00ffff;
}
50% {
background:#ff00ff;
}
100% {
background:#399cb9;
}
50% {
background:#ff008f;
}
50% {
background:#ff0088;
}
50% {
background:#ff08ff;
}
50% {
background:#ff44ff;
}
50% {
background:#0000ff;
}
}
window.onload = function() {
var current,
screen,
output,
limit,
zero,
period,
operator;
screen = document.getElementById("result");
var elem = document.querySelectorAll(".num");
var len = elem.length;
for(var i = 0; i < len; i++ ) {
elem[i].addEventListener("click",function() {
num = this.value;
output = screen.innerHTML +=num;
limit = output.length;
if(limit > 16 ) {
alert("Sorry no more input is allowed");
}
},false);
}
document.querySelector(".zero").addEventListener("click",function() {
zero = this.value;
if(screen.innerHTML === "") {
output = screen.innerHTML = zero;
}
else if(screen.innerHTML === output) {
output = screen.innerHTML +=zero;
}
},false);
document.querySelector(".period").addEventListener("click",function() {
period = this.value;
if(screen.innerHTML === "") {
output = screen.innerHTML = screen.innerHTML.concat("0.");
}
else if(screen.innerHTML === output) {
screen.innerHTML = screen.innerHTML.concat(".");
}
},false);
document.querySelector("#eqn-bg").addEventListener("click",function() {
if(screen.innerHTML === output) {
screen.innerHTML = eval(output);
}
else {
screen.innerHTML = "";
}
},false);
document.querySelector("#delete").addEventListener("click",function() {
screen.innerHTML = "";
},false);
var elem1 = document.querySelectorAll(".operator");
var len1 = elem1.length;
for(var i = 0; i < len1; i++ ) {
elem1[i].addEventListener("click",function() {
operator = this.value;
if(screen.innerHTML === "") {
screen.innerHTML = screen.innerHTML.concat("");
}
else if(output) {
screen.innerHTML = output.concat(operator);
}
},false);
}
}
