Skip to content

Instantly share code, notes, and snippets.

@ooade
Last active August 26, 2015 02:15
Show Gist options
  • Save ooade/bc6481b3171507231281 to your computer and use it in GitHub Desktop.
Save ooade/bc6481b3171507231281 to your computer and use it in GitHub Desktop.
Calculator
<div class="navbar navbar-default navbar-static-top" id="mynavbar">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">
<span class="fa fa-calculator"></span>
Calculator
</span>
</div>
</div>
</div>
<div class="well console"> </div>
<table class="table text-center" style="margin-top:-20px">
<tr>
<td class="empty"></td>
<td class="empty"></td>
<td class="empty"></td>
<td class="clear">Clear</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="op" rel="/">&divide;</td>
</tr>
<tr>
<td class="num">4</td>
<td class="num">5</td>
<td class="num">6</td>
<td class="op" rel="*">&times;</td>
</tr>
<tr>
<td class="num">1</td>
<td class="num">2</td>
<td class="num">3</td>
<td class="op" rel="-">&minus;</td>
</tr>
<tr>
<td class="num">.</td>
<td class="num">0</td>
<td class="equalsTo">=</td>
<td class="op" rel="+">&#43;</td>
</tr>
</table>
(function(){
var arithmetic = [];
$('.clear').click(function(){
$('.console').text("");
arithmetic=[];
});
$('.num').click(function(){
$('.console').append($(this).text());
});
$('.op').click(function(){
var textInConsole = $('.console').text();
if (textInConsole!=="") arithmetic.push(textInConsole);
$('.console').text("");
var operator = $(this).attr("rel");
var opPrev = arithmetic[arithmetic.length-1];
if((operator==="*" || operator==="/") && (opPrev==="*" || opPrev==="/" )){
$('.console').text("Syntax Error");
}
if(operator!=="") arithmetic.push(operator);
});
$('.equalsTo').click(function(){
arithmetic.push($('.console').text());
var joinArr = arithmetic.join("");
console.log("This Prints out "+eval(joinArr));
$('.console').text(eval(joinArr));
arithmetic=new Array();
});
})();
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body{
background-color: #333;
color: #fff;
font-family: 'ubuntu', cursive;
}
.navbar-default {
background-color: #3b94d9;
color: white;
border: none;
font-weight: 700;
}
.navbar-header .navbar-brand,.navbar-header .navbar-brand:hover{
color: white;
/* font-weight: bold;*/
}
.console{
margin-top: -20px;
border-radius:0px;
background-color: rgba(0,0,0,0.6);
border: none;
text-align: right;
height: 58px;
}
td{
padding: 40px !important;
}
.table > tbody > tr > td{
border: 2px solid #333;
}
.table > tbody > tr > td:hover{
background-color: #3b94d9;
cursor: pointer;
transition: ;
transition-delay: 0.1s;
}
.empty,.empty:hover{
background-color: #333 !important;
}
<link href="//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