Simple Calculator using javascript .
This is the code for html side...
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>:: Calculator ::</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<style type="text/css">
body
{
margin: 10px;
}
#logics button
{
background: teal;
color:white;
padding: 10px;
border: 0px solid red;
border-bottom: 1px solid red;
}
#nums
{
position: relative;
left:93px;
}
#nums button
{
background: teal;
color:white;
font-size: 25px;
border: 0px solid red;
border-bottom: 1px solid red;
padding: 20px;
//width:60px;
}
#nums button:active
{
background: white;
color: red;
}
#logics button:active
{
background: white;
color: red;
}
#calci
{
width: 350px;
background: rgba(10,20,20,1);
}
#output
{
font-size: 30px;
width:96%;
color: white;
background: rgba(25,100,10,0.5);
text-align:right;
resize:none;
border:2px solid black;
padding: 5px;
}
#logics
{
text-align: right;
}
</style>
<script type="text/javascript" src='javascript.js'> </script>
</head>
<body>
<div id="calci">
<form onsubmit='return total()'>
<input id='output' style="" autofocus autocomplete="off"><br/>
<input type="submit" style="display:none;">
</form>
<div id='logics'>
<button id='backspace'> Backspace</button>
<button id='clear' onclick="total()">Clear</button>
</div>
<table id='nums'>
<tr>
<td><button id='one'>1</button></td>
<td><button id='two'>2</button></td>
<td><button id='three'>3</button></td>
<td><button id='plus'>+</button></td>
</tr><tr>
<td><button id='four'>4</button></td>
<td><button id='five'>5</button></td>
<td><button id='six'>6</button></td>
<td><button id='minus'> -</button></td>
</tr><tr>
<td><button id='seven'>7</button></td>
<td><button id='eight'>8</button></td>
<td><button id='nine'>9</button></td>
<td><button id='multiply'>*</button></td>
</tr><tr>
<td><button id='zero'>0</button></td>
<td><button id='leftBrace'> (</button></td>
<td><button id='rightBrace'> )</button></td>
<td><button id='dividedby'> /</button></td>
</tr><tr>
<td><button id='dot'> .</button></td>
<td><button> </button></td>
<td><button> </button></td>
<td><button id='equal' >=</button></td>
</tr>
</table>
</div>
</body>
</html>
and here is the javascript code javascript.js file..
$(document).ready(function(){
$("#one").click(function(){
$("#output").val($("#output").val()+"1");
});
$("#two").click(function(){
$("#output").val($("#output").val()+"2");
});
$("#three").click(function(){
$("#output").val($("#output").val()+"3");
});
$("#four").click(function(){
$("#output").val($("#output").val()+"4");
});
$("#five").click(function(){
$("#output").val($("#output").val()+"5");
});
$("#six").click(function(){
$("#output").val($("#output").val()+"6");
});
$("#seven").click(function(){
$("#output").val($("#output").val()+"7");
});
$("#eight").click(function(){
$("#output").val($("#output").val()+"8");
});
$("#nine").click(function(){
$("#output").val($("#output").val()+"9");
});
$("#leftBrace").click(function(){
$("#output").val($("#output").val()+"(");
});
$("#rightBrace").click(function(){
$("#output").val($("#output").val()+")");
});
$("#zero").click(function(){
$("#output").val($("#output").val()+"0");
});
$("#dot").click(function(){
$("#output").val($("#output").val()+".");
});
$("#plus").click(function(){
$("#output").val($("#output").val()+"+");
});
$("#minus").click(function(){
$("#output").val($("#output").val()+"-");
});
$("#multiply").click(function(){
$("#output").val($("#output").val()+"*");
});
$("#dividedby").click(function(){
$("#output").val($("#output").val()+"/");
});
$("#backspace").click(function(){
$("#output").val($("#output").val().slice(0,$("#output").val().length-1));
});
$("#clear").click(function(){
$("#output").val("");
});
$("#equal").click(function(){
$("#output").val(eval($("#output").val()));
});
});
window.load=function(){
}
function total()
{
var data=$("#output").val();
document.getElementById('output').value=eval(data);
return false;
}
and here is an image of the calculator.
Comments
Post a Comment