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>