1. Buka aplikasi notepad
2.lalu copy pastekan code dibawah ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table border= "1" bgcolor= "#838383" >
<tr>
<td colspan= "6" bgcolor= "#DFDFDF" >
<form>
<input name="display" value="0" size=32></td></tr>
<tr><td><input type="button" value=" 7
" onClick="addChar(this.form.display, '7')"></td>
<td><input type="button" value=" 8
" onClick="addChar(this.form.display, '8')"></td>
<td><input type="button" value=" 9 " onClick="addChar(this.form.display, '9')"></td>
<td><input type="button" value=" / " onClick="addChar(this.form.display, '/')"></td>
<td><input type="button" value=" x " onClick="addChar(this.form.display, '*')"></td>
<td><input type="button" value=" - " onClick="addChar(this.form.display, '-')"></td></tr>
<tr><td><input type="button" value=" 4 " onClick="addChar(this.form.display, '4')"></td>
<td><input type="button" value=" 5 " onClick="addChar(this.form.display, '5')"></td>
<td><input type="button" value=" 6 " onClick="addChar(this.form.display, '6')"></td>
<td><input type="button" value=" + " onClick="addChar(this.form.display, '+')"></td>
<td><input type="button" value="+/-" onClick="changeSign(this.form.display)"></td>
<td><input type="button" value=" . " onClick="addChar(this.form.display, '.')"></td></tr>
<tr><td><input type="button" value=" 1 " onClick="addChar(this.form.display, '1')"></td>
<td><input type="button" value=" 2 " onClick="addChar(this.form.display, '2')"></td>
<td><input type="button" value=" 3 " onClick="addChar(this.form.display, '3')"></td>
<td><input type="button" value=" = " name="enter" onClick="if (checkNum(this.form.display.value))
{ compute(this.form) }"></td>
<td><input type="button" value=" ( " onClick="addChar(this.form.display, '(')"></td>
<td><input type="button" value=" ) " onClick="addChar(this.form.display, ')')"></td></tr>
<tr><td><input type="button" value=" 0 " onClick="addChar(this.form.display, '0')"></td>
<td><input type="button" value=" cos " onClick="if (checkNum(this.form.display.value))
{ cos(this.form) }"></td>
<td><input type="button" value=" sin " onClick="if (checkNum(this.form.display.value))
{ sin(this.form) }"></td>
<td><input type="button" value=" tan " onClick="if (checkNum(this.form.display.value))
{ tan(this.form) }"></td>
<td><input type="button" value=" sq
" onClick="if (checkNum(this.form.display.value))
{ square(this.form) }"></td>
<td><input type="button" value="exp" onClick="if (checkNum(this.form.display.value))
{ exp(this.form) }"></td></tr>
<tr><td colspan="6"><input type="button" value=" ln " onClick="if (checkNum(this.form.display.value))
{ ln(this.form) }">
<input type="button" value=" sqrt " onClick="if (checkNum(this.form.display.value))
{ sqrt(this.form) }">
<input type="button" value=" delete all "
onClick="this.form.display.value = 0 ">
<input type="button" value=" delete " onClick="deleteChar(this.form.display)"></td></tr>
</FROM>
<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("tanya keun kanu pinter")
return false
}
}
}
return true
}
// End -->
</SCRIPT>
</body>
</html>
3.lalu save (judulmu.html)
4.contoh:
1. copy pastekan kode di bawah ini
<html>
<head><title>kalkulator</title></head>
<body bgcolor="lime">
<h2><center><font color="blue"> KALKULATOR by HALPI YOUNDAIME</center></h2>
<br></br>
<form name= "Keypad" action>
<table border= "1" bgcolor= "#838383" >
<tr>
<td colspan= "5" bgcolor= "#DFDFDF" >
<input name= "ReadOut" type= "Text" size= "30" value= "0" >
</td>
</tr>
<tr>
<td bgcolor= "red" >
<input name= "btnSeven" type= "Button" value= " 7 " onClick= "NumPressed(7)"
>
</td>
<td bgcolor= "red" >
<input name= "btnEight" type= "Button" value= " 8 " onClick= "NumPressed(8)" >
</td>
<td bgcolor= "red" >
<input name= "btnNine" type= "Button" value= " 9 " onClick= "NumPressed(9)" >
</td>
<td bgcolor= "orange" ><input name= "btnNeg" type= "Button" value= "+/- " onClick= "Neg()" ></td>
<td bgcolor= "orange" ><input name= "btnPercent" type= "Button" value= " % " onClick= "Percent()" ></td>
</tr>
<tr>
<td bgcolor= "red" >
<input name= "btnFour" type= "Button" value= " 4 " onClick= "NumPressed(4)" >
</td>
<td bgcolor= "red" >
<input name= "btnFive" type= "Button" value= " 5 " onClick= "NumPressed(5)" >
</td>
<td bgcolor= "red" >
<input name= "btnSix" type= "Button" value= " 6 " onClick= "NumPressed(6)" >
</td>
<td bgcolor= "orange" ><input name= "btnPlus" type= "Button" value= " + "
onClick= "Operation('+')" ></td>
<td bgcolor= "orange" ><input name= "btnMultiply" type= "Button" value= " x "
onClick= "Operation('*')" ></td>
</tr>
<tr>
<td bgcolor= "red" >
<input name= "btnOne" type= "Button" value= " 1 " onClick= "NumPressed(1)" >
</td>
<td bgcolor= "red" >
<input name= "btnTwo" type= "Button" value= " 2 " onClick= "NumPressed(2)" >
</td>
<td bgcolor= "red" >
<input name= "btnThree" type= "Button" value= " 3 " onClick= "NumPressed(3)" >
</td>
<td bgcolor= "orange" ><input name= "btnMinus" type= "Button" value= " - "
onClick= "Operation('-')" ></td>
<td bgcolor= "orange" ><input name= "btnDivide" type= "Button" value= " / "
onClick= "Operation('/')" ></td>
</tr>
<tr>
<td bgcolor= "red" >
<input name= "btnZero" type= "Button" value= " 0 " onClick= "NumPressed(0)" >
</td>
<td bgcolor= "red" >
<input name= "btnDecimal" type= "Button" value= " . " onClick= "Decimal()" >
</td>
<td colspan= "3" bgcolor= "green" >
<input name= "btnClear" type= "Button" value= " C " onClick= "Clear()" >
<input name= "btnClearEntry" type= "Button" value= " CE " onClick= "ClearEntry()" >
<input name= "btnEquals" type= "Button" value= " = " onClick= "Operation('=')" ></td>
</tr>
</table>
</form>
<script LANGUAGE= "JavaScript" >
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false ;
var PendingOp = "" ;
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value= Num;
FlagNewNum = false ;
}
else {
if (FKeyPad.ReadOut.value== "0" )
FKeyPad.ReadOut.value= Num;
else
FKeyPad.ReadOut.value+= Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=" );
else
{
FlagNewNum = true ;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp)
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp)
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp)
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout); FKeyPad.ReadOut.value= Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0." ;
FlagNewNum = false ;
}
else
{
if (curReadOut.indexOf( "." ) == -1)
curReadOut += "." ;
}
FKeyPad.ReadOut.value= curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value= "0" ;
FlagNewNum = true ;
}
function Clear () {
Accum = 0;
PendingOp = "" ;
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value= parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () { FKeyPad.ReadOut.value= (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
</script>
</body>
</html>
2. save (judulmu.html)
3. ganti text berwarna biru dengan warna yang kamu suka
4. contoh :
