Skip to content

Instantly share code, notes, and snippets.

@vinhboy

vinhboy/javascript_caculator.html

Created September 1, 2015 07:32
Show Gist options
  • Save vinhboy/0d04d2f7758e61b3caef to your computer and use it in GitHub Desktop.
Save vinhboy/0d04d2f7758e61b3caef to your computer and use it in GitHub Desktop.
Download ZIP
A javascript calculator done the hardway
Raw
javascript_caculator.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
function mathgic(a,b,op){
switch(op) {
case '*':
return a*b;
break;
case '/':
return a/b;
break;
case '+':
return a+b;
break;
case '-':
return a-b;
break;
}
}
function operate(str){
regex = '';
op = str.match(/\*/) || str.match(/\//) || str.match(/\+/) || str.match(/\-/);
switch(op[0]) {
case '*':
regex = '\\d+\\*\\d+';
break;
case '/':
regex = "\\d+\\/\\d+";
break;
case '+':
regex = "\\d+\\+\\d+";
break;
case '-':
regex = "\\d+\\-\\d+";
break;
}
re = new RegExp(regex);
str = str.replace(re,function replacer(value){
values = value.split(op[0]);
return mathgic(parseInt(values[0]),parseInt(values[1]),op[0]);
});
while (str.match(/\*|\/|\+|\-/)) {
str = operate(str);
};
return str;
}
$(document).ready(function(){
$('.btn-default').click(function(){
$('#lcd').val($('#lcd').val() + $(this).text());
});
$('#finish').click(function(){
$('#lcd').val(operate($('#lcd').val()));
});
$('#clear').click(function(){
$('#lcd').val('');
});
});
</script>
</head>
<body>
<table class="table table-bordered text-center" style="width:300px;margin:30px auto;">
<tr>
<td colspan="4">
<input id="lcd" class="form-control text-right" style="font-weight:bold;background:lightblue"/>
</td>
<tr>
<td>
<a class="btn btn-default" href="#" role="button">1</a>
</td>
<td>
<a class="btn btn-default" href="#" role="button">2</a>
</td>
<td>
<a class="btn btn-default" href="#" role="button">3</a>
</td>
<td>
<a class="btn btn-default operator" href="#" role="button">/</a>
</td>
</tr>
<tr>
<td>
<a class="btn btn-default" href="#" role="button">4</a>
</td>
<td>
<a class="btn btn-default" href="#" role="button">5</a>
</td>
<td>
<a class="btn btn-default" href="#" role="button">6</a>
</td>
<td>
<a class="btn btn-default operator" href="#" role="button">*</a>
</td>
</tr>
<tr>
<td>
<a class="btn btn-default" href="#" role="button">7</a>
</td>
<td>
<a class="btn btn-default" href="#" role="button">8</a>
</td>
<td>
<a class="btn btn-default" href="#" role="button">9</a>
</td>
<td>
<a class="btn btn-default operator" href="#" role="button">+</a>
</td>
</tr>
<tr>
<td>
<a class="btn btn-default" href="#" role="button">0</a>
</td>
<td>
<a class="btn btn-default btn-large" href="#" role="button">.</a>
</td>
<td>
<a class="btn btn-danger" id="clear" href="#" role="button">C</a>
</td>
<td>
<a class="btn btn-default operator" href="#" role="button">-</a>
</td>
</tr>
<tr>
<td colspan="4">
<a class="btn btn-success btn-block" id="finish" href="#" role="button">=</a>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment