<!--In the name of ALLAH
Name : Muhammad Azri bin Jasni @ Abdul Rani
ID : 2009147897
Group: CS1104A
-->
<!--5. Write a HTML file using JavaScript to produce online calculator.-->
<!--Reference :- http://www.anaesthetist.com/mnm/javascript/calc.htm-->
<html>
<head>
<!--
Azri\'s Online Calculator
Features:
Have Digits buttons, 0-9
Calculate button, =
Result display area, result
Clear button, C
Exponent button, EXP
Decimal Point
Maximum digit allowed is 30, MAX
Error will be told in the result display area (Error!)
Known Bugs:
Didn\'t handle situation where operator buttons press more than once
-->
<script language="JavaScript">
//the html comment tag below is used to hide javascript
//if the browser does not support JavaScript or
//it is disabled.
<!-- hide from JavaScript impaired browsers
Operation = 0; //operators (* / + -)
CurrentString = "0"; //current number or operator
MAX = 30; //maximum digits
RAM = "0"; //previous number
/*AddDigit()*/
function AddDigit(Digit)
{
if ( CurrentString.indexOf("!") == -1) //check error
//use indexOf just to look for that char/string
{
if (CurrentString.length > MAX)
{
alert("Error! - max 30 digits.");
CurrentString = "Error! - max 30 digits."; //max digits
}
else
{
if ( (eval(CurrentString) == 0) && (CurrentString.indexOf(".") == -1) )
{
CurrentString = Digit;
}
else
{
CurrentString = CurrentString + Digit;
}
}
}
else
{
CurrentString = "Hint! Press \'C\'";
}
//if exp button was pressed
if (CurrentString.indexOf("e0") != -1)
{
var exp = CurrentString.indexOf("e");
CurrentString = CurrentString.substring(0,exp+1) + CurrentString.substring(exp+2);
}
document.Calculator.answer.value = CurrentString;
}
/*DecimalPoint()*/
function DecimalPoint()
{
if ( CurrentString.length != 0)
{
if ( ( CurrentString.indexOf(".") == -1) &&( CurrentString.indexOf("e") == -1) )
{
CurrentString = CurrentString + ".";
}
}
else
{
CurrentString = "0.";
}
document.Calculator.answer.value = CurrentString;
}
/*DoExponent()*/
function DoExponent()
{
if ( CurrentString.indexOf("!") == -1)
{
if ( CurrentString.indexOf("e") == -1 )
{
CurrentString = CurrentString + "e0";
}
else
CurrentString = "Hint! Press \'C\'"; //Help out, if error present.
}
document.Calculator.answer.value = CurrentString;
}
/*Clear()*/
function Clear()
{
CurrentString = "0";
Operation = 0;
RAM = "0";
document.Calculator.answer.value = CurrentString;
}
/*Operate()*/
function Operate(op) //STORE OPERATION e.g. + * / etc.
{
if ( CurrentString.indexOf("!") == -1) // check for error
{
if (Operation != 0) //do calculation
{
Calculate();
}
if (op.indexOf("*") > -1)
Operation = 1;
if (op.indexOf("/") > -1)
Operation = 2;
if (op.indexOf("+") > -1)
Operation = 3;
if (op.indexOf("-") > -1)
Operation = 4;
RAM = CurrentString;
CurrentString = "";
}
else
CurrentString = "Hint! Press \'C\'"; //Inform to press C to use calculator again
document.Calculator.answer.value = CurrentString;
}
/*Calculate()*/
function Calculate() //Calculate
{
switch (Operation)
{
case 1:
CurrentString = eval(RAM) * eval(CurrentString);
break;
case 2:
if (eval(CurrentString) != 0)
{
CurrentString = eval(RAM) / eval(CurrentString);
}
else
{
CurrentString = "Error! - Divide by zero";
}
break;
case 3:
CurrentString = eval(RAM) + eval(CurrentString);
break;
case 4:
CurrentString = eval(RAM) - eval(CurrentString);
default:
}
//Clearing temporary variable for next operation
Operation = 0;
RAM = "0";
CurrentString = CurrentString + "";
//Math Errors
if (CurrentString.indexOf("Infinity") != -1)
{
CurrentString = "Error! - Infinite";
}
if (CurrentString.indexOf("NaN") != -1)
{
CurrentString = "Error! - can\'t understand";
}
document.Calculator.answer.value = CurrentString;
}
//done hiding-->
</script>
<NOSCRIPT>
Please unblock script or update your browsers to use the JavaScript features in this page. :)
</NOSCRIPT>
</head>
<body bgcolor="teal">
<center>
<form name="Calculator">
<table border=\'1\' bgcolor=\'aqua\'>
<tr><td colspan=\'4\' align="center" style="color:teal">Azri\'s Online Calculator
<br/> <input name=\'answer\' type=\'text\' value="0" readonly></td></tr>
<tr>
<td colspan=\'2\'><input name=\'C\' type=\'button\' value=\'C\' style=\'width:100%\' OnClick="Clear()"></td>
<td><input name=\'div\' type=\'button\' value=\'/\' style=\'width:100%\' OnClick="Operate(\'/\')"></td>
<td><input name=\'mul\' type=\'button\' value=\'*\' style=\'width:100%\' OnClick="Operate(\'*\')"></td>
</tr>
<tr>
<td><input name=\'7\' type=\'button\' value=\'7\' style=\'width:100%\' OnClick="AddDigit(\'7\')"></td>
<td><input name=\'8\' type=\'button\' value=\'8\' style=\'width:100%\' OnClick="AddDigit(\'8\')"></td>
<td><input name=\'9\' type=\'button\' value=\'9\' style=\'width:100%\' OnClick="AddDigit(\'9\')"></td>
<td><input name=\'-\' type=\'button\' value=\'-\' style=\'width:100%\' OnClick="Operate(\'-\')"></td>
</tr>
<tr>
<td><input name=\'4\' type=\'button\' value=\'4\' style=\'width:100%\' OnClick="AddDigit(\'4\')"></td>
<td><input name=\'5\' type=\'button\' value=\'5\' style=\'width:100%\' OnClick="AddDigit(\'5\')"></td>
<td><input name=\'6\' type=\'button\' value=\'6\' style=\'width:100%\' OnClick="AddDigit(\'6\')"></td>
<td><input name=\'+\' type=\'button\' value=\'+\' style=\'width:100%\' OnClick="Operate(\'+\')"></td>
</tr>
<tr>
<td><input name=\'1\' type=\'button\' value=\'1\' style=\'width:100%\' OnClick="AddDigit(\'1\')"></td>
<td><input name=\'2\' type=\'button\' value=\'2\' style=\'width:100%\' OnClick="AddDigit(\'2\')"></td>
<td><input name=\'3\' type=\'button\' value=\'3\' style=\'width:100%\' OnClick="AddDigit(\'3\')"></td>
<td><input name=\'EXP\' type=\'button\' value=\'EXP\' style=\'width:100%\' OnClick="DoExponent()"></td>
</tr>
<tr>
<td colspan=\'2\'><input name=\'0\' type=\'button\' value=\'0\' style=\'width:100%\' OnClick="AddDigit(\'0\')"></td>
<td><input name=\'.\' type=\'button\' value=\'.\' style=\'width:100%\' OnClick="DecimalPoint()"></td>
<td><input name=\'=\' type=\'button\' value="=" style="width:100%; height:100%" OnClick="Calculate()"></td>
</tr>
<tr>
</tr>
</table>
</form>
</center>
</body>
<footer><div align="center" style="font-size: 9px;">© 2011 Creed Production.</div></footer>
</html>