Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GJrdoq
<div class="container">
<div class="row">
<div id="screen"><span id="ops-queue"></span></div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
</div>
<div class="row">
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
</div>
<div class="row">
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
</div>
<div class="row">
<div class="key">+</div>
<div class="key">-</div>
<div class="key">x</div>
</div>
<div class="row">
<div class="key">/</div>
<div class="key" id="solve">=</div>
<div id="clear"class="key">C</div>
</div>
<br>
</div>
$(document).ready(function() {
var operationQueue = [];
var add = function(a, b) {
var c = parseInt(a), d = parseInt(b);
return c + d;
};
var multiply = function(a, b) {
return a * b;
};
var divide = function(a, b) {
if (b !== 0) {
return a / b;
} else {
return "Err";
}
};
var subtract = function(a, b) {
return a - b;
};
var performOperation = function(operation, a, b){
if(operation==="+"){
return add(a, b);
} else if(operation==="-") {
return subtract(a, b);
} else if(operation==="x") {
return multiply(a, b);
} else {
return divide(a, b);
}
};
$('.key').click(function() {
var value = $(this).html();
if(value === "="){
a = operationQueue.shift();
operation = operationQueue.shift();
b = operationQueue.shift();
result = performOperation(operation, a, b);
operationQueue.push(result);
} else {
operationQueue.push(value);
}
$( '#ops-queue' ).html(operationQueue);
});
});
.container {
background: #1E1E1E;
width: 150px;
border-radius: 15px;
margin: 50px auto;
overflow: hidden;
padding: 8px;
}
.key {
background: -webkit-linear-gradient(#4B4B4B, #111);
background: -moz-linear-gradient(#4B4B4B, #111);
background: linear-gradient(#4B4B4B, #111);
border: 1px solid #282828;
border-radius: 50%;
color: #999;
cursor: pointer;
float: left;
margin: 8px 0px;
margin-right: 8px;
padding: 12px 8px;
width: 10px;
text-align: center;
}
#clear {
color: light-green;
}
#screen {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: #D4DAB6;
border: 1px solid #282828;
border-radius: 5px;
font-size: 30px;
line-height: 30px;
margin: 10px auto;
padding-right: 10px;
text-align: right;
height: 80px;
width:140px;
}
#ops-queue {
color: #000;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 50%;
height: 80px;
}
.key:hover {
background: #999;
color: #777;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.