-Back-

Calculator (Simple)

JavaScript

Date Added: May 18, 2003

Platforms: NS: all - IE: all

Author: Bryan Gamble (bryan@bmgamble.com)

Homepage: bmgamble.com

Description: This calculator is a very simple way to produce mathematical equations. Simply click on the buttons to produce an equation and then press the equals button to get the result.

Example: BG-78 Calculator

The Code: Cut and paste this code by pressing "highlight all": <!---------------------BEGIN HEAD-------------------------> <!-- To install: --> <!-- Place this into the HEAD of the HTML document: --> <!-- DO NOT TAKE THE FOLLOWING OUT OF THE CODE: --> <!--------------------------------------------------------> <!-- AUTHOR: Bryan Gamble --> <!-- URL: www.bmgamble.com --> <!-- PROGRAM: Calculator © Copyright 2001 --> <!-- --> <!--------------------------------------------------------> <SCRIPT LANGUAGE="JavaScript"> <!-- /********************************** DECLARE AND INITIALIZE VARIABLES **********************************/ var zero = '0'; var one = '1'; var two = '2'; var three = '3'; var four = '4'; var five = '5'; var six = '6'; var seven = '7'; var eight = '8'; var nine = '9'; var add = '+'; var subtract = '-'; var multiply = '*'; var divide = '/'; var decimal = '.'; var power = '^'; /****************************************** FUNCTION: compute ******************************************/ function compute(f) { // 'eval' evaluates its argutment, which can be any string // representing any JavaScript expression or statements f.view.value = eval(f.view.value); } /****************************************** FUNCTION: getNum ******************************************/ function getNum(f, val) { f.view.value += val; } //--> </SCRIPT> <!--------------------END HEAD-----------------------------> Cut and paste this code by pressing "highlight all": <!---------------------BEGIN BODY-------------------------> <!-- To install: --> <!-- Place this into the BODY of the HTML document: --> <!--------------------------------------------------------> <CENTER> <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 BORDERCOLOR=DDDDDD> <TR><TD> <TABLE CELLPADDING=7 CELLSPACING=0 BGCOLOR=AABBCC> <!----------------------BEGIN CALCULATOR-------------------------> <FORM NAME="calc"> <TR> <TD COLSPAN=2> <DIV ALIGN=LEFT><SMALL><FONT COLOR=000000> BG-78 Calculator </FONT></SMALL></DIV> <INPUT TYPE=text NAME="view" SIZE=30 action="compute(this)"><BR> <HR> </TD> </TR> <TR> <TD COLSPAN=2><DIV ALIGN=RIGHT> <INPUT TYPE=button VALUE=" 7 " onClick="getNum(this.form, seven)"> <INPUT TYPE=button VALUE=" 8 " onClick="getNum(this.form, eight)"> <INPUT TYPE=button VALUE=" 9 " onClick="getNum(this.form, nine)"> <INPUT TYPE=button VALUE=" . " onClick="getNum(this.form, decimal)"> <INPUT TYPE=reset VALUE=" C "> </DIV></TD> </TR> <TR> <TD COLSPAN=2><DIV ALIGN=RIGHT> <INPUT TYPE=button VALUE=" 4 " onClick="getNum(this.form, four)"> <INPUT TYPE=button VALUE=" 5 " onClick="getNum(this.form, five)"> <INPUT TYPE=button VALUE=" 6 " onClick="getNum(this.form, six)"> <INPUT TYPE=button VALUE=" * " onClick="getNum(this.form, multiply)"> <INPUT TYPE=button VALUE=" / " onClick="getNum(this.form, divide)"> </DIV></TD> </TR> <TR> <TD COLSPAN=2><DIV ALIGN=RIGHT> <INPUT TYPE=button VALUE=" 1 " onClick="getNum(this.form, one)"> <INPUT TYPE=button VALUE=" 2 " onClick="getNum(this.form, two)"> <INPUT TYPE=button VALUE=" 3 " onClick="getNum(this.form, three)"> <INPUT TYPE=button VALUE=" - " onClick="getNum(this.form, subtract)"> <INPUT TYPE=button VALUE=" + " onClick="getNum(this.form, add)"> </DIV></TD> </TR> <TR> <TD><DIV ALIGN=CENTER> <INPUT TYPE=button VALUE=" 0 " onClick="getNum(this.form, zero)"> </DIV> </TD> <TD> <DIV ALIGN=RIGHT> <INPUT TYPE=button VALUE=" = " onClick="compute(this.form)"> </DIV> </TD> </TR> <TR> <TD COLSPAN=2> <HR SIZE=1> </TD> </TR> </FORM> </TABLE> </TD></TR></TABLE> </CENTER> <!------------------------END CALCULATOR---------------------------->

-Back-