Calculator gist
body {
font-size: 2em;
background-color: #e8e8e8;
}
.calculator {
width: 320px;
margin: 0 auto;
background-color: #939393;
padding: 10px 5px;
}
#screen {
width: 311px;
margin: 5px auto;
background-color: rgb(206, 237, 253);
height: 50px;
text-align:right;
font-size: 120%;
}
.row {
width: 100%;
display: inline-flex;
justify-content: space-around;
}
.button {
background: #e8e8e8;
display: inline-block;
width: 70px;
height: 60px;
text-align: center;
margin: 5px 0px;
border-radius: 5%;
cursor: default;
box-shadow: 0px 0px 2px; #727272;
}
.button:hover {
background: #fff;
}
.button:active {
box-shadow: 0 0px #fff;
transform: translateY(2px);
transform: scale(0.95);
}
.button-clear {
width: 312px;
border-radius: 0%;
}
.button p {
-webkit-margin-before: 2px;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin: 12px 0px 0px 0px;
}
$(document).ready(function(){
//Clear the screen
$("#screen").html("");
//Button clicked
$(".button").on('click', function() {
//Grab the value of the clicked button from it's nested <p> element
var theValue = $("p", this).html();
//Check what was clicked
//If it's the = button, then evaluate contents of the #screen div
if (theValue === "=") {
var theResult = eval($("#screen").html());
//Put put the result of the evaluation in the #screen div
$("#screen").html(theResult);
//If it's the CLEAR button, clear the screen div
} else if (theValue === "CLEAR") {
$("#screen").html("");
$("#screen").css("border", "0");
//Check we're not going outside the width of the screen div
} else if($("#screen").html().length >= 14) {
$("#screen").css("border", "1px solid red");
} else {
//If it's just a number or operator button, append the value of it's <p> element on #screen
$("#screen").append(theValue.substr(0,14));
}
});
});
<!DOCTYPE html>
<html lang="en">
<!--------------------------------------HEAD------------------------------------>
<head>
<!---------meta tags---------->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-----------FONTS------------>
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i" rel="stylesheet">
<!------------CSS------------->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title>Home</title>
</head>
<!--------------------------------------BODY------------------------------------>
<body>
<div class="calculator">
<div id="screen">
</div>
<div class="row">
<div class="button">
<p>7</p>
</div>
<div class="button">
<p>8</p>
</div>
<div class="button">
<p>9</p>
</div>
<div class="button">
<p>/</p>
</div>
</div>
<div class="row">
<div class="button">
<p>4</p>
</div>
<div class="button">
<p>5</p>
</div>
<div class="button">
<p>6</p>
</div>
<div class="button">
<p>*</p>
</div>
</div>
<div class="row">
<div class="button">
<p>1</p>
</div>
<div class="button">
<p>2</p>
</div>
<div class="button">
<p>3</p>
</div>
<div class="button">
<p>-</p>
</div>
</div>
<div class="row">
<div class="button">
<p>0</p>
</div>
<div class="button">
<p>.</p>
</div>
<div class="button">
<p>=</p>
</div>
<div class="button">
<p>+</p>
</div>
</div>
<div class="row">
<div class="button button-clear">
<p>CLEAR</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>