Making a calculator with javascript

Here we are going to make a calculator, which will be programmed with simple javascript and html code only.
Please first learn some basic of javascript function and HTML and how to write them. Refer w3school.com.

Open notepad, and copy this code, exactly as it is. Now save the page and name it calci.html. Please note that while saving the page, select ‘Save as file: All file’ not .txt in the notepad.


<html>
<head>
  <meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
    var i, j, op1, op2, op, f;
    function digit(i) {
        switch (i) {
            case 1:
                document.calc.display.value = (document.calc.display.value) + "1";
                break;
            case 2:
                document.calc.display.value = (document.calc.display.value) + "2";
                break;
            case 3:
                document.calc.display.value = (document.calc.display.value) + "3";
                break;
            case 4:
                document.calc.display.value = (document.calc.display.value) + "4";
                break;
            case 5:
                document.calc.display.value = (document.calc.display.value) + "5";
                break;
            case 6:
                document.calc.display.value = (document.calc.display.value) + "6";
                break;
            case 7:
                document.calc.display.value = (document.calc.display.value) + "7";
                break;
            case 8:
                document.calc.display.value = (document.calc.display.value) + "8";
                break;
            case 9:
                document.calc.display.value = (document.calc.display.value) + "9";
                break;
            case 0:
                document.calc.display.value = (document.calc.display.value) + "0";
                break;
            case 10:
                document.calc.display.value = (document.calc.display.value) + ".";
                break;
            case 25:
                document.calc.display.value = "";
                break;

        }
    }
    function operation(j) {
        if (j == 1) {
            op1 = parseFloat(document.calc.display.value);
            document.calc.display.value = "";
            op = 1;
        }
        if (j == 2) {
            op1 = parseFloat(document.calc.display.value);
            document.calc.display.value = "";
            op = 2;
        }
        if (j == 3) {
            op1 = parseFloat(document.calc.display.value);
            document.calc.display.value = "";
            op = 3;
        }
        if (j == 4) {
            op1 = parseFloat(document.calc.display.value);
            document.calc.display.value = "";
            op = 4;
        }
        if (j == 5) {
            op2 = parseFloat(document.calc.display.value);
            if (op == 1) {
                f = op1 + op2;
                document.calc.display.value = f;
            }
            else if (op == 2) {
                f = op1 - op2;
                document.calc.display.value = f;
            }
            else if (op == 3) {
                f = op1 * op2;
                document.calc.display.value = f;
            }
            else if (op == 4) {
                f = op1 / op2;
                document.calc.display.value = f;
            }
        }
    }
</script>

</head><body>
 <div style=" margin-left:25px;" id="calc">
                    <form name="calc">
<table align="center" bgcolor="black" cellspadding=5 cellspacing=5 height=200px width=200px>
<tr>
<td colspan="3" align="center">
<input type="text" name="display" style=" width:200px"/>
</td>
<td><input type="button" name="B" value=" C " onClick="digit(25)" style=" width:50px"/></td>
</tr>
<tr>
<td>
<input type="button" name="B" value=" 7 " onClick="digit(7)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" 8 " onClick="digit(8)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" 9 " onClick="digit(9)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" + " onClick="operation(1)" style=" width:50px"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="B" value=" 4 " onClick="digit(4)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" 5 " onClick="digit(5)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" 6 " onClick="digit(6)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" - " onClick="operation(2)" style=" width:50px"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="B" value=" 1 " onClick="digit(1)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" 2 " onClick="digit(2)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" 3 " onClick="digit(3)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" * " onClick="operation(3)" style=" width:50px"/>
</td>
</tr>
<tr>
<td> 
<input type="button" name="B" value=" 0 " onClick="digit(0)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" . " onClick="digit(10)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" = " onClick="operation(5)" style=" width:50px"/>
</td>
<td>
<input type="button" name="B" value=" / " onClick="operation(4)" style=" width:50px"/>
</td>
</tr>
</table></form>

                    </div>

</body>
</html> 

Signature

Deepesh Singh
logo

Advertisements

Please leave your valuable comment.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s