A simple calculator w/ HTML, CSS. & jQuery
A Pen by Chris Dodds on CodePen.
A simple calculator w/ HTML, CSS. & jQuery
A Pen by Chris Dodds on CodePen.
<div class='container'> | |
<div class='col-xs-4 col-md-offset-4' id='calculator'> | |
<div class='row'> | |
<h1 class='text-center'> Calculator</h1> | |
</div> | |
<div class='row' id='display'> | |
<div class='col-xs-10' id='screen'> | |
</div> | |
</div> | |
<div class='row calc-row' id='row1'> | |
<div class='col-xs-4 calc-button text-center' id='clear'>Clear</div> | |
<div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='divide'>/</div> | |
<div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='multiply'>*</div> | |
</div> | |
<div class='row calc-row' id='row2'> | |
<div class='col-xs-2 calc-button text-center' id='7'>7</div> | |
<div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='8'>8</div> | |
<div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='9'>9</div> | |
<div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='subtract'>-</div> | |
</div> | |
<div class='row calc-row' id='row3'> | |
<div class='col-xs-2 calc-button text-center' id='4'>4</div> | |
<div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='5'>5</div> | |
<div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='6'>6</div> | |
<div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='add'>+</div> | |
</div> | |
<div class='row calc-row' id='row4'> | |
<div class='col-xs-2 calc-button text-center' id='1'>1</div> | |
<div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='2'>2</div> | |
<div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='3'>3</div> | |
<div class='col-xs-3 col-xs-offset-1 eq-button text-center' id='equal' >=</div> | |
</div> | |
<div class='row calc-row' id='row5'> | |
<div class='col-xs-5 calc-button text-center' id='0'>0</div> | |
<div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='decimal'>.</div> | |
</div> | |
</div> | |
</div> | |
</div> |
$(document).ready(function () { | |
var toCalc = ''; | |
$('#clear').click(function (){ | |
$('#screen').empty() | |
toCalc = ''; | |
}); | |
$('.calc-button:gt(0)').click(function () { | |
if ($('#screen').text().length < 12) { | |
$('#screen').append($(this).text()) | |
toCalc += $(this).text(); | |
}else { | |
$('#screen').text('Number Limit') | |
} | |
}) | |
$('.eq-button').click(function(){ | |
toCalc = eval(toCalc); | |
$('#screen').empty(); | |
$('#screen').text(toCalc); | |
toCalc = toCalc; | |
}); | |
}) |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
body { | |
background-color: #264653; | |
color: #264653; | |
} | |
#calculator { | |
margin-top:100px; | |
background-color: #E76F51; | |
min-width:300px; | |
} | |
h1 { | |
text-transform: uppercase; | |
} | |
#display { | |
margin: 20px; | |
border: 2px solid #264653; | |
height:60px; | |
padding: 9px 0px; | |
font-size: 2em; | |
background-color:#F4A261; | |
color: #000; | |
text-align:right; | |
} | |
.eq-button { | |
height:120px; | |
margin-bottom:-60px; | |
border: 2px solid #264653; | |
padding-top:45px; | |
font-weight:bold; | |
font-size: 1.2em; | |
} | |
.eq-button:hover { | |
background-color: #E9C46A; | |
} | |
.eq-button:active { | |
background-color: #E9C46A; | |
border: 4px solid #264653; | |
font-size: 1.3em; | |
} | |
.calc-button { | |
margin-bottom:20px; | |
border: 2px solid #264653; | |
height:50px; | |
padding: 12px; | |
font-weight: bold; | |
font-size: 1.2em; | |
} | |
.calc-button:hover { | |
background-color: #E9C46A; | |
} | |
.calc-button:active { | |
background-color: #E9C46A; | |
border: 4px solid #264653; | |
font-size: 1.3em; | |
} | |
.calc-row { | |
margin:0px 20px 0px ; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |