Skip to content

Instantly share code, notes, and snippets.

@watashimill

watashimill/calculator

Created January 21, 2017 06:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save watashimill/c7721734d93944baa9126d9501cfeb35 to your computer and use it in GitHub Desktop.
Save watashimill/c7721734d93944baa9126d9501cfeb35 to your computer and use it in GitHub Desktop.
Download ZIP
Calculator by chayanin khawsanit
Raw
calculator
<html>
<head>
<style>
.display input{
position: relative;
left:2px;
top :2px;
height:40px;
color:black;
text-align:right;
font-size:21px;
}
.button {
height:50px;
width:100px;
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
display: inline-block;
margin: 4px 4px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
box-shadow: 0 5px #999;
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 2px #666;
transform: translateY(3px);
}
.button2 {
background-color: white;
color: black;
border: 5px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
<script>
var input = '0';
var val = '';
function clr(val)
{
document.getElementById("display").value=val;
input ='0';
}
function goDisplay(val)
{
input += val;
document.getElementById("display").value+=val;
}
var Stack = function() {
this.list = new Array(); // create an Array object (empty)
return this;
};
Stack.prototype = { // define methods for the Stack class
push: function( obj ) { this.list.push(obj); },
pop: function() { return this.list.pop(); },
peek: function() { return this.list.slice(0,this.list.length-1) },
clear: function() { this.list = new Array(); },
size: function() { return this.list.length; }, isEmpty: function() { return (this.list.length===0); }
};
var postfix = '';
var saved =''
var stack = new Stack();
var count =0;
var state = [];
function saveState(val){
saved = val ;
state.push(saved);
}
function lastState(){
count = count-1;
if(count>0){
input = state[count-1];
document.getElementById("display").value = input;
}else{count = 0;}
}
function del(){
if (input.length > 1) {
input = input.slice(0,input.length-1);
} else {
input = '0';
}
document.getElementById('display').value = input;
}
function ConvertInfixToPostfix(infix){
for( var i in infix ) { // for each token in the array
if (infix[i] >= '0' && infix[i] <= '9'){
if (!(infix[ i-1] >= '0' && infix[i-1] <= '9') ){
postfix = postfix+ ' ';
}
postfix = postfix +infix[i];
}
else {
if (infix[i] == '+' || '-' || '*'|| '/' ){
if (stack.isEmpty()){
stack.push(infix[i]);
} else {
while (!stack.isEmpty()){
var popValue = stack.pop();
if(ComparePrecedence(popValue,infix[i])){
postfix = postfix + ' '+popValue;
} else {
stack.push(popValue) ;
break;
}
}
stack.push(infix[i]);
}
}
}
}
while (!stack.isEmpty())
{
postfix = postfix + ' '+stack.pop();
}
function ComparePrecedence(top,tokenI){
var check = true;
switch(top){
case '+':
if (tokenI == '-'){
check = true
}
if (tokenI == '*'){
check = false
}
if (tokenI == '/'){
check = false
}
if (tokenI == '%'){
check = false
}
break;
case '-':
if (tokenI == '+'){
check = true
}
if (tokenI == '*'){
check = false
}
if (tokenI == '/'){
check = false
}
if (tokenI == '%'){
check = false
}
break;
case '*':
if (tokenI == '-'){
check = true
}
if (tokenI == '+'){
check = true
}
if (tokenI == '/'){
check = true
}
if (tokenI == '%'){
check = true
}
break;
case '/':
if (tokenI == '+'){
check = true
}
if (tokenI == '-'){
check = true
}
if (tokenI == '*'){
check = true
}
if (tokenI == '%'){
check = true
}
break;
case '%':
if (tokenI == '+'){
check = true
}
if (tokenI == '-'){
check = true
}
if (tokenI == '*'){
check = true
}
if (tokenI == '/'){
check = true
}
break;
}
return check;
}
function EvaluatePostFix(){/////////////////calculate function
saveState(input);
count = count+1;
ConvertInfixToPostfix(input);
var stackEvar = new Stack(); // create a Stack object
var items = postfix.split(' '); // string -> array
var op1, op2, result;
for( var i in items){
token = items[i];
if ( token == '*' ) {
op2 = stackEvar.pop(); op1 = stackEvar.pop();
result = parseInt(op1) * parseInt(op2);
stackEvar.push( result );
} else if ( token == '+' ) {
op2 = stackEvar.pop(); op1 = stackEvar.pop();
result = parseInt(op1) + parseInt(op2);
stackEvar.push( result );
} else if ( token == '-' ) {
op2 = stackEvar.pop(); op1 = stackEvar.pop();
result = parseInt(op1) - parseInt(op2);
stackEvar.push( result );
} else if ( token == '/' ) {
op2 = stackEvar.pop(); op1 = stackEvar.pop();
result = parseInt(op1) / parseInt(op2);
stackEvar.push( result );
} else if ( token == '%' ) {
op2 = stackEvar.pop(); op1 = stackEvar.pop();
result = parseInt(op1) % parseInt(op2);
stackEvar.push( result );
} else {
stackEvar.push( token );
}
}
var Result = stackEvar.pop();
console.log(Result);
if (isNaN(Result)){
Result = 'Error';
}
document.getElementById("display").value = Result;
}
</script>
</head>
<body>
<div align="center">
<div class="display"><input type="text" readonly size="43" id="display"></div>
<div class="keys">
<button class="button button2" value ="%" onclick='goDisplay("%")'>%</button>
<button class="button button2" value ="-" onclick='Neg()'>+/-</button>
<button class="button button2" value ="back" onclick='lastState()'>back</button>
<button class="button button2" value ="/" onclick='goDisplay("/")'>/</button>
<br>
<button class="button button2" value ="7" onclick='goDisplay("7")'>7</button>
<button class="button button2" value ="8" onclick='goDisplay("8")'>8</button>
<button class="button button2" value ="9" onclick='goDisplay("9")'>9</button>
<button class="button button2" value ="*" onclick='goDisplay("*")'>*</button>
<br>
<button class="button button2" value ="4" onclick='goDisplay("4")'>4</button>
<button class="button button2" value ="5" onclick='goDisplay("5")'>5</button>
<button class="button button2" value ="6" onclick='goDisplay("6")'>6</button>
<button class="button button2" value ="-" onclick='goDisplay("-")'>-</button>
<br>
<button class="button button2" value ="1" onclick='goDisplay("1")'>1</button>
<button class="button button2" value ="2" onclick='goDisplay("2")'>2</button>
<button class="button button2" value ="3" onclick='goDisplay("3")'>3</button>
<button class="button button2" value ="+" onclick='goDisplay("+")'>+</button>
<br>
<button class="button button2" value ="0" onclick='goDisplay("0")'>0</button>
<button class="button button2" value ="del" onclick='del()'>del</button>
<button class="button button2" value ="" onclick='clr("")'>C</button>
<button class="button button2" value ="=" onclick='EvaluatePostFix()'>=</button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment