Scribd
Upload
74 views2 pages

G6 Ict Calculator

This is an HTML and CSS project for grade 6 students. They learn the features of HTML elements, javascript, and CSS.

Uploaded by

Kucing Oren
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
74 views2 pages

G6 Ict Calculator

This is an HTML and CSS project for grade 6 students. They learn the features of HTML elements, javascript, and CSS.

Uploaded by

Kucing Oren
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

This time you will learn to create a simple calculator using HTML and Javascript.

The explanation of this will be conducted next week. So make sure you finish this code before
the discussion begins.

Save this code below and name it CALTULATOR.HTML

<HTML>
<HEAD>
<TITLE>Calculator</TITLE>
<Script language = javascript>
var total = 0
var TheOperator = 0
function calculate(number) {
frm=document.frmOne.txtDisplay
frm.value=frm.value + number
}
function operator(opval) {
TheOperator = opval
total = document.frmOne.txtDisplay.value
document.frmOne.txtDisplay.value = ""
}
function equals() {
CurentDisplayValue = eval(document.frmOne.txtDisplay.value)
PreviousDisplayValue = eval(total)
if(TheOperator =="+") {
answer = PreviousDisplayValue + CurentDisplayValue
}
else if(TheOperator == "*") {
answer = PreviousDisplayValue * CurentDisplayValue
}
else if(TheOperator == "-") {
answer = PreviousDisplayValue - CurentDisplayValue
}
else if(TheOperator == "/") {
answer = PreviousDisplayValue / CurentDisplayValue
}
document.frmOne.txtDisplay.value = answer
}
</script>
</HEAD>
<BODY BGCOLOR = White>
<FONT Size = 5>
<CENTER><B>
<FORM NAME = frmOne>
<TABLE border = 0 cellpadding="0" width="475" cellspacing="0">
<TR>
<TD width="29" height="30" valign="bottom" BGCOLOR = green align="center">
<div align="center"><b></b></div>
</TD>
<TD valign="top" colspan="6" BGCOLOR = green>
<INPUT TYPE = Text name = txtDisplay size = 35 value ="">
</TD>
</TR>
<TR>
<TD colspan="2" height="35" valign="top" BGCOLOR = green align="center">
<Input Type = Button Name = b1 value = " 1 " onClick =calculate(1)>
</TD>
<TD valign="top" width="53" BGCOLOR = green>
<Input Type = Button Name = b1 value = " 2 " onClick =calculate(2)>
</TD>
<TD width="75" valign="top" BGCOLOR = green align="center">
<Input Type = Button Name = b1 value = " 3 " onClick =calculate(3)>
</TD>
<TD width="112" valign="top" BGCOLOR = green align="left">
<Input Type = Button Name = b1 value = " 4 " onClick =calculate(4)>
</TD>
<TD valign="top" width="85" BGCOLOR = White>
<Input Type = Button Name = b1 value = " plus " onClick = operator("+")>
</TD>
<TD valign="top" width="69" BGCOLOR = White align="center">
<Input Type = Button Name = b1 value = " times " onClick = operator("*")>
</TD>
</TR>
<TR>
<TD align="center" height="35" valign="top" BGCOLOR = green colspan="2">
<Input Type = Button Name = b1 value = " 5 " onClick =calculate(5)>
</TD>
<TD valign="top" BGCOLOR = green>
<Input Type = Button Name = b1 value = " 6 " onClick =calculate(6)>
</TD>
<TD align="center" valign="top" BGCOLOR = green>
<Input Type = Button Name = b1 value = " 7 " onClick =calculate(7)>
</TD>
<TD valign="top" align="left" BGCOLOR = green>
<Input Type = Button Name = b1 value = " 8 " onClick =calculate(8)>
</TD>
<TD valign="top" BGCOLOR = White align="center">
<Input Type = Button Name = b1 value = " subtract " onClick = operator("-")>
</TD>
<TD valign="top" BGCOLOR = White>
<Input Type = Button Name = b1 value = " divide " onClick = operator("/")>
</TD>
</TR>
<TR>
<TD valign="top" height="35" BGCOLOR = green align="center" colspan="2">
<Input Type = Button Name = b1 value = " 9 " onClick =calculate(9)>
</TD>
<TD valign="top" BGCOLOR = green>
<Input Type = Button Name = b1 value = " 0 " onClick =calculate(0)>
</TD>
<TD valign="top" BGCOLOR = green align="center">
<Input Type = Button Name = b1 value = " . " onClick =calculate(".")>
</TD>
<TD valign="top" BGCOLOR = green align="left">
<Input Type = Reset value = " cls ">
</TD>
<TD colspan="2" valign="top" BGCOLOR = White>
<div align="center">
<Input Type = Button Name = b1 value = " = " onClick = equals()>
<Input Type = Reset value = Clear " Clear " onClick=clear2()>
</div>
</TD>
</TR>
<tr>
<td height="5"></td>
<td width="52"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</TABLE>
</FORM>
</B></CENTER></FONT>
</BODY>
</HTML>

You might also like