Skip to content

Instantly share code, notes, and snippets.

@VishalTaj

VishalTaj/Simple-Calculator-Using-javascript

Created November 13, 2015 12:41
Show Gist options
  • Save VishalTaj/014be7e27f04eec6178a to your computer and use it in GitHub Desktop.
Save VishalTaj/014be7e27f04eec6178a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Simple-Calculator-Using-javascript
<!DOCTYPE html>
<html>
<head>
<style>
input {
background-color: #ccc;
height: 50px;
font-style: bold;
}
.number {
background-color: #B2B2C9;
border-radius: 10px;
border-color: #A1A1AF;
width:50px;
height: 40px;
border-style: solid;
}
.plus {
height: 110px;
width: 50px;
border-color: #A1A1AF;
background-color: #B2B2C9;
border-radius: 10px;
border-style: solid;
}
.other{
background-color: #B2B2C9;
border-color: #A1A1AF;
border-radius: 10px;
width: 50px;
height:40px;
border-style: solid;
}
.clear{
width:110px !important;
}
table{
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
padding-bottom: 30px;
background: #E2E2FF;
background: linear-gradient(#E2E2FF, #A1A1AF);
border-radius: 3px;
box-shadow: 0px 4px #A1A1AF, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
input.number:hover,input.plus:hover,input.other:hover {
background-color: #9c89f6;
color: white;
cursor:pointer;
}
input.number,input.plus,input.other{color:white;}
.over {
background-color: black;
width: 200px;
padding: 25px;
border: 2px solid ;
margin-top: 30px;
margin-left: 350px;
z-index:10;
}
</style>
<script type="text/javascript">
var value = '';
var flag = false;
var cnt = 0;
var ft=0;
/*function displayunicode(e){
var unicode=e.keyCode? e.keyCode : e.charCode
if( unicode == 13 ){
calc();
}
}*/
function calc(){
result = eval(value);
Calc.Input.value=result;
value = Calc.Input.value;
flag = true;
}
function add(operands){
if( flag == true ){
cnt=0;
flag= false;
}
else if(flag == false && cnt == 0){
if(ft!=1){
cnt = (value.split('.').length-1);}
else{flag=true;ft=0;}
}
else if(flag == false && cnt > 1){cnt=1;}
if(operands == '.' && cnt == 1 && flag == false){
value += operands;
if(value.slice(-1) == '.'){
value = value.substring(0, value.length - 1);
Calc.Input.value = Calc.Input.value.substring(0, Calc.Input.value.length - 1);}
}
else{
value += operands;
}
//alert(cnt);
}
function addoperator(operator){
value += operator;
Calc.Input.value = ' ';
flag = true;
ft=1;
}
function clearscreen(){
value = ' ';
Calc.Input.value = ' ';
cnt = 0;
flag = false;
}
</script>
</head>
<body>
<div ></div>
<form name="Calc">
<table align="center">
<tr><th colspan="4" style="text-align:right; font-size:12px; color:#929E9E;">Casio</th>
<tr>
<td colspan=4><input type="text" NAME="Input" autofocus placeholder="0"></td>
</tr>
<tr>
<td><input type="button" class="number" name="one" VALUE=" 1 "OnClick="Calc.Input.value += '1';add('1')"></td>
<td><input type="button" class="number" name="two" VALUE=" 2 "OnClick="Calc.Input.value += '2';add('2')"></td>
<td><input type="button" class="number" name="three" VALUE=" 3 "OnClick="Calc.Input.value += '3';add('3')"></td>
<td><input type="button" class="other" VALUE=" - " name="minus" OnClick="Calc.Input.value = ' - ';addoperator(' - ')"></td>
</tr>
<tr>
<td><input type="button" class="number" name="four" VALUE=" 4 "OnClick="Calc.Input.value += '4';add('4')"></td>
<td><input type="button" class="number" name="five" VALUE=" 5 "OnClick="Calc.Input.value += '5';add('5')"></td>
<td><input type="button" class="number" name="six" VALUE=" 6 "OnClick="Calc.Input.value += '6';add('6')"></td>
<td><input type="button" class="other" name="mul"VALUE=" x " OnClick="Calc.Input.value = ' * ';addoperator(' * ')"></tr>
<tr>
<td><input type="button" class="number" name="seven" VALUE=" 7 "OnClick="Calc.Input.value += '7';add('7')"></td>
<td><input type="button" class="number" name="eight" VALUE=" 8 "OnClick="Calc.Input.value += '8';add('8')"></td>
<td><input type="button" class="number" name="nine" VALUE=" 9 "OnClick="Calc.Input.value += '9';add('9')"></td>
<td rowspan="3"><input type="button" class="plus" name="plus"VALUE=" + " OnClick="addoperator(' + ')"></td></tr>
<tr>
<td><input type="button" class="number" name="zero" VALUE=" 0 "OnClick="Calc.Input.value += '0';add('0')"></td>
<td><input type="button" class="other" name="divide"VALUE=" / " OnClick="Calc.Input.value = ' / ';addoperator(' / ')"></td>
<td><input type="button" class="other" name="equal"VALUE=" = " OnClick="return calc();"></td>
</tr>
<tr>
<td colspan=2><input type="button" class="other clear" VALUE=" C " OnClick="clearscreen()"></td>
<td><input type="button" class="number" name="point" VALUE=" . "OnClick="Calc.Input.value += '.';add('.')"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment