Skip to content

Instantly share code, notes, and snippets.

@mig1098
Forked from scottyzen/Calculator.markdown
Created February 9, 2016 21:45
Show Gist options
  • Save mig1098/7b49c09bbe77c076882e to your computer and use it in GitHub Desktop.
Save mig1098/7b49c09bbe77c076882e to your computer and use it in GitHub Desktop.
Calculator
<div class="container-fluid">
<div class="row-fluid col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="display col-xs-12">
<div class="row">
<span class="col-xs-12 br"><h1> 0</h1></span>
</div>
</div>
<div class="topOperations col-xs-12">
<div class="row">
<span class="col-xs-3">AC</span>
<span class="col-xs-3">CE</span>
<span class="col-xs-3">%</span>
<span style="background-color: tomato;" class="col-xs-3 br">÷</span>
</div>
</div>
<div class="numbers col-xs-9">
<div class="row">
<span class="col-xs-4">1</span>
<span class="col-xs-4">2</span>
<span class="col-xs-4">3</span>
<span class="col-xs-4">4</span>
<span class="col-xs-4">5</span>
<span class="col-xs-4">6</span>
<span class="col-xs-4">7</span>
<span class="col-xs-4">8</span>
<span class="col-xs-4">9</span>
<span class="col-xs-8 bb">0</span>
<span class="col-xs-4 bb">.</span>
</div>
</div>
<div class="operations col-xs-3">
<div class="row">
<span class="col-xs-12 br">x</span>
<span class="col-xs-12 br">-</span>
<span class="col-xs-12 br">+</span>
<span id="equals" class="col-xs-12 br bb">=</span>
</div>
</div>
</div>
</div>
var currentSum = "";
$("span").click(function() {
var value = ($(this).text());
if(value == '='){
currentSum = eval(currentSum);
$( ".display h1" ).text(currentSum);
}else if(value == "x"){
currentSum += "*";
$( ".display h1" ).text(currentSum);
}else if(value == "÷"){
currentSum += "/";
$( ".display h1" ).text(currentSum);
}else if(value == 'AC'){
currentSum = "";
$( ".display h1" ).text('0');
}else if(value == 'CE'){
currentSum = currentSum.substring(0, currentSum.length - 1);
$( ".display h1" ).text(currentSum);
}else{
currentSum += value;
$( ".display h1" ).text(currentSum);
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
*, html, body {
margin: 0;
padding: 0;
text-align: center;
}
body{
background-color: #444;
color: #fff;
}
.container-fluid{
margin: 5% 0;
}
span{
border-top: 1px solid #222;
border-right: none;
border-bottom: none;
border-left: 1px solid #222;
padding: 20px 0;
text-shadow: 0 1px .5px #111;
-webkit-box-shadow:inset 0 1px 0px .5px rgba(255,255,255,.2),
inset 0 -1px 0px .5px rgba(1,1,1,.2);
box-shadow: inset 0 1px 0px .5px rgba(255,255,255,.2),
inset 0 -1px 0px .5px rgba(1,1,1,.2);
}
.display span{
background-color: #333;
text-shadow: 0 2px 3px #111;
box-shadow: none;
}
.display h1{
text-align: right;
}
.numbers span{
background-color: #555;
}
.operations span{
background-color: tomato;
}
.topOperations span{
background-color: #444;
}
#equals{
border-bottom: 1px solid #222;
background-color: #ffb973;
}
.bb{
border-bottom: 1px solid #222;
}
.br{
border-right: 1px solid #222;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment