Showing posts with label Calculator for browser. Show all posts
Showing posts with label Calculator for browser. Show all posts

Javascript tutorial for making Calculator in browsers like IE, Mozilla, Safari, Chrome.....

. Thursday, October 23, 2008
1 comments

Hi Guys, here's the code for making a calculator for your browser. It works in any browser like IE, Mozilla, Safari, Chrome.....  Well it looks best in safari


step 1 : 

Copy the code given below in Notepad

<html> 
<head> 
<title>Browser Calculator by simplywriting89.blogspot.com</title> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin
function addChar(input, character) {
if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}
function cos(form) {
form.display.value = Math.cos(form.display.value);}
function sin(form) {
form.display.value = Math.sin(form.display.value);}
function tan(form) {
form.display.value = Math.tan(form.display.value);}
function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);}
function ln(form) {
form.display.value = Math.log(form.display.value);}
function exp(form) {
form.display.value = Math.exp(form.display.value);}
function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);}
function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}
function compute(form)  {
form.display.value = eval(form.display.value)}
function square(form)  {
form.display.value = eval(form.display.value) *
eval(form.display.value)}
function checkNum(str)  {
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i+1)
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch !=
"-" && ch != "."
&& ch != "(" && ch!= ")") {
alert("invalid entry!")
return false
         }
      }
   }
return true
}
// End --> 
</SCRIPT> 
</head> 
<body bgcolor="#FFFFFF"> 
<FORM> 

<table width="335px" cellpadding="0" cellspacing="0" border="0" name="Calculator"> 
<tr><td align="center"><input name="display" value="0" size=25></td></tr> 
</table> 
<table width="335px" cellpadding="0" cellspacing="0" border="0" name="Cal Body"> 
<tr> 
<td align="center"><input style="font-family : monospace" type="button" value=" exp " onClick="if (checkNum(this.form.display.value)) { exp(this.form) }"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  7  " onClick="addChar(this.form.display, '7')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  8  " onClick="addChar(this.form.display, '8')"></td> 


<td align="center"><input style="font-family : monospace" type="button" value="  9  " onClick="addChar(this.form.display, '9')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  /  " onClick="addChar(this.form.display, '/')"></td> 
</tr> 
<tr> 
<td align="center"><input style="font-family : monospace" type="button" value=" ln  " onClick="if (checkNum(this.form.display.value)) { ln(this.form) }"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  4  " onClick="addChar(this.form.display, '4')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  5  " onClick="addChar(this.form.display, '5')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  6  " onClick="addChar(this.form.display, '6')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  *  " onClick="addChar(this.form.display, '*')"></td> 

</tr> 
<tr> 
<td align="center"><input style="font-family : monospace" type="button" value=" sqrt" onClick="if (checkNum(this.form.display.value)) {sqrt(this.form) }"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  1  " onClick="addChar(this.form.display, '1')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  2  " onClick="addChar(this.form.display, '2')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  3  "  onClick="addChar(this.form.display, '3')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  -  "  onClick="addChar(this.form.display, '-')"></td> 
</tr> 


<tr> 
<td align="center"><input style="font-family : monospace" type="button" value=" sq  " onClick="if (checkNum(this.form.display.value)) { square(this.form) }"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  0  " onClick="addChar(this.form.display, '0')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  .  " onClick="addChar(this.form.display, '.')"></td> 
<td align="center"><input style="font-family : monospace" type="button" value=" +/- " onClick="changeSign(this.form.display)"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  +  " onClick="addChar(this.form.display, '+')"></td> 
</tr> 
<tr> 
<td align="center"><input style="font-family : monospace" type="button" value="  (  " onClick="addChar(this.form.display, '(')"></td> 

<td align="center"><input style="font-family : monospace" type="button" value=" cos " onClick="if (checkNum(this.form.display.value)) { cos(this.form) }"></td> 
<td align="center"><input style="font-family : monospace" type="button" value=" sin " onClick="if (checkNum(this.form.display.value)) {sin(this.form) }"></td> 
<td align="center"><input style="font-family : monospace" type="button" value=" tan " onClick="if (checkNum(this.form.display.value)) { tan(this.form) }"></td> 
<td align="center"><input style="font-family : monospace" type="button" value="  )  " onClick="addChar(this.form.display, ')')"></td> 
</tr> 
</table> 
<table width="335px" cellpadding="0" cellspacing="0" border="0" name="Cal Foot"> 
<tr> 


<td align="center"><input style="font-family : monospace" type="button" value=" Clear "  onClick="this.form.display.value = 0 "></td> 
<td align="center"><input style="font-family : monospace" type="button" value=" Back Space " onClick="deleteChar(this.form.display)"></td> 
<td align="center"><input style="font-family : monospace" type="button" value=" Enter " name="enter"onClick="if (checkNum(this.form.display.value)) { compute(this.form) }"></td> 
</tr> 
</table> 
</FORM>  
</body> 
</html> 

Step 2 :

Save it as calculator.html (You can save it by any name but remember that name is followed by the extension .html)