Javascript Programs-Calculator With Simple Javascript
Javascript Programs-Calculator With Simple Javascript
calc.html
------------------------
<html>
<head>
<script type="text/javascript" src="calc.js">
</script>
<link rel=stylesheet href="calc.css">
</head>
<body>
<div id=st align=center>
<form>
<table> <tr>
<td colspan="4"><input type="number" id=num></td>
</tr>
<tr>
<td><input type=button value=+ name=+ onclick="addition()"></td><td><input type=button value=- name=- onclick="subtraction()"></td>
<td><input type=button value=^ onclick="expon()"></td><td><input type=button value=c onclick="clr()"></td>
</tr>
<tr>
<td><input type=button value=* name=* onclick="multiplication()"></td><td><input type=button value=/ name=/ onclick="division()"/></td>
<td><input type=button value=! onclick="fact()"></td><td><input type=button value=% onclick="remainder()"></td>
</tr>
<tr>
<td colspan="4"><input type="button" id="eq" value="=" name="=" onclick="findq()"></td>
</tr>
</table>
</form>
</div>
<div id=fo align=center>
<b>CALCULATOR DEVELOPED BY ANANDHU ARJUNAN</b>
</div>
</body>
</html>
calc.js
-------------------
var num1,num2,sign,temp;
function addition(){
clrnm2();
num1=document.getElementById('num').value;
document.getElementById('num').value="";
sign="+";
document.getElementById('num').focus();
} function subtraction(){
clrnm2();
num1=document.getElementById('num').value;
document.getElementById('num').value="";
sign="-";
document.getElementById('num').focus();
} function multiplication(){
clrnm2();
num1=document.getElementById('num').value;
document.getElementById('num').value="";
sign="*";
document.getElementById('num').focus();
} function division(){
clrnm2();
num1=document.getElementById('num').value;
document.getElementById('num').value="";
sign="/";
document.getElementById('num').focus();
}
function remainder(){
clrnm2();
num1=document.getElementById('num').value;
document.getElementById('num').value="";
sign="%";
document.getElementById('num').focus();
}
function expon(){
clrnm2();
num1=document.getElementById('num').value;
document.getElementById('num').value="";
sign="^";
document.getElementById('num').focus();
}
function fact(){
clrnm2();
num1=document.getElementById('num').value;
ans=factorial();
num1=ans;
document.getElementById('num').value=ans;
}
function findq(){
if(num2==null){
num2=document.getElementById('num').value;
}
if(sign=="+"){
var ans=parseFloat(num1)+parseFloat(num2);
num1=ans;
document.getElementById('num').value=ans;
}
else if(sign=="-"){
var ans=parseFloat(num1)-parseFloat(num2);
num1=ans;
document.getElementById('num').value=ans;
}
else if(sign=="*"){
var ans=parseFloat(num1)*parseFloat(num2);
num1=ans;
document.getElementById('num').value=ans;
}
else if(sign=="/"){
var ans=parseFloat(num1)/parseFloat(num2);
num1=ans;
document.getElementById('num').value=ans;
}
else if(sign=="%"){
var ans=parseFloat(num1)%parseFloat(num2);
num1=ans;
document.getElementById('num').value=ans;
}
else if(sign=="^"){
var ans=parseInt(Math.pow(parseFloat(num1),parseFloat(num2)));
num1=ans;
document.getElementById('num').value=ans;
}
}
function factorial(){
var as=parseInt(num1);
var fact=1;
var int=1;
for(i=1;i<=as;i++){
fact=fact*i;
}
return fact;
}
function clrnm2(){
if(num2==null){
}
else{
num2=null;
}
return true;
}
function clr(){
num1=num2=sign=temp="";
document.getElementById('num').value="";
}
calc.css
---------------------
body{
font-family: sans-serif;
}
input[type='number']{
width: 509px;
height: 50px;
font-size: 20px;
border:3px solid black;
border-radius: 3px;
}
#eq{
width: 509px;
}
input[type='button']{
width:125px;
height: 45px;
background-color: black;
color: white;
font-size: 30px;
}
#st{
margin-top: 50px;
}
Output
-----------------------
<head>
<script type="text/javascript" src="calc.js">
</script>
<link rel=stylesheet href="calc.css">
</head>
<body>
<div id=st align=center>
<form>
<table> <tr>
<td colspan="4"><input type="number" id=num></td>
</tr>
<tr>
<td><input type=button value=+ name=+ onclick="addition()"></td><td><input type=button value=- name=- onclick="subtraction()"></td>
<td><input type=button value=^ onclick="expon()"></td><td><input type=button value=c onclick="clr()"></td>
</tr>
<tr>
<td><input type=button value=* name=* onclick="multiplication()"></td><td><input type=button value=/ name=/ onclick="division()"/></td>
<td><input type=button value=! onclick="fact()"></td><td><input type=button value=% onclick="remainder()"></td>
</tr>
<tr>
<td colspan="4"><input type="button" id="eq" value="=" name="=" onclick="findq()"></td>
</tr>
</table>
</form>
</div>
<div id=fo align=center>
<b>CALCULATOR DEVELOPED BY ANANDHU ARJUNAN</b>
</div>
</body>
</html>
Comments
Post a Comment