BACK

Contents

JavaScript, Step 1 — Clicks. I like to start small. Break the problem down into steps, and then even smaller steps, and then take one itty bitty step, and then take a long nap. JavaScript Program to Make a Simple Calculator In this example, you will learn to write a program to make a simple calculator in JavaScript. To understand this example, you should have the knowledge of the following JavaScript programming topics. In this article, you'll learn how to make a simple calculator using HTML, CSS, and JavaScript. This calculator can perform basic mathematical operations like addition, subtraction, multiplication, and division. Let's get started. Components of the Calculator. The calculator consists of the following components. Because you have an interface for this to be defined, I would suggest not splitting the string, but having your input create an array of 'operands' and 'operators' that can then build a string from, with the result being easily consumable for calculating the result, for instance. Simple example: `22, 'x', 15, '.', 2.

Planning

Okay, so we want to write a JavaScript calculator. Let's not (initially) be too ambitious. All our calculator will do is basic arithmetic: add, subtract, multiply and divide. Hmm, what about negative numbers - so we also need to be able to change the sign of a number. What else? Well, we're going to allow rather big numbers, so it's a good idea to have a button that easily allows us to enter an exponent (the number times 10^something). We need a decimal point. And we need to be able to clear the display (a CLEAR button), and to clear everything (ALL CLEAR). Let's list out requirements up to now:

• A display area for numbers
• Buttons for 0,1,2, up to 9
• A decimal point button
• A button to change the sign (+/-)
• Clear and all clear (C, AC buttons)
• Function buttons (* / + -)
• An exponent button (EXP)
• A 'calculate' button (The = button)

Let's group our different buttons and boxes into three classes:

1. The display area
2. The numeric buttons (0 to 9, +/-, .)
3. Function buttons together with AC, C, = and EXP

Why not position these in a table, thus:

Display Area
Numeric Buttons	Function Buttons

Even at this early stage, we also need to think about what can go wrong. Hmm. Here are a few possibilities:

• Too many digits are entered
• The result of a calculation is too 'big' to show (too large and positive, or too large and negative)
• The result of a calculation is too small to show (for example, 1*10^-1000)
• We divide something by zero
• JavaScript bombs out because of internal calculation problems, for example if we divide 10¹⁰⁰⁰ by 10¹⁰⁰⁰ - we know that the answer is 1, but does JavaScript?

We therefore must trap numbers that appear too long (although this is to a certain extent a matter of taste); we must show appropriate error messages with divide by zero and numbers that are out of range (most JavaScript implementations seem happy up to about 10^±320); tiny tiny tiny numbers can be represented as zero; and we also need a way to alert the user to JavaScript's occasional troubles with large numbers.

Writing the HTML

As our basic calculator, we'll use the following table:

Which implements the layout we discussed in 'Planning' above. We need to put all of the above inside a <FORM> .. </FORM> pair of tags, and then we need to create buttons for each of the numbers and functions we talked about when we planned things.

How do we create buttons? Well, we could do what we did on the first page of our JavaScript tutorial, and hijack a <input type='reset'> button, but there is a better way. All recent and respectable variants of JavaScript (but not, for example, some earlier releases of IE 3) have the following type of input:

<input type='button'>

Which gives us a general-purpose button. To each of these buttons we'll attach a:

OnClick='DoSomething()'

'event handler', so that when we click on the button, we can expect a response. We'll discuss each of these responses in the Calculator Functions section below. For now, let's draw our calculator:

More detailed HTML for basic calculator

We've colour-coded things to make them a bit easier. FORM elements are in red, the outer table is bold, and tables inside tables are in blue. You can see that we've preserved our basic structure that we talked about previously - the top panel takes up two columns and contains a text input that we'll use for displaying results; the bottom left panel will contain the numbers (three examples are given), and the bottom right will contain function buttons. Note several other things:

• The form has a name. We've called it Calculator.
• Each input button has a value - this is what will be displayed on the button, for example '7' will be displayed on the button that you push to generate a '7' on the display.
• The display area is unsurprisingly named Display (with a capital D), and we've defined a width (size='30') and a maximum length of the input string (maxlength='40').
• Each of the buttons has its own <td> .. </td> - this keeps them nicely spaced out and regular.

Now if you take the above code and simply paste it into your web-page, (adding in a few <td>'s and stuff), you'll get something like the following:

.. So clearly we need to do a bit of work. We need to:

• Pretty up fonts and alignment
• Widen the buttons a lot
• Perhaps give the calculator a background colour

If you're adequate at HTML, all of this should be reasonably straightforward. Perhaps widening the buttons needs a bit of explanation. We've given our buttons values of '7', '8' and so on. What happens if we say:

<input type='button' value=' 7 ' >

This is a good way of widening our buttons. Note that even when we do this, all of the buttons are not quite the same width (at least, on most browsers)! This is because the chances are your browser is using a proportional font to write the 'value' on the button. Now in Netscape, the font can be changed for each button to a fixed-width font (although the resulting code looks like hell) - in IE, you don't seem to have that option (I wonder, can you do this using style sheets?). Oh well.

Hmm, just for clarity, why don't we also name our buttons. For example:

<input type='button' value=' 7 ' name='seven' >

Play around a bit. Try the 'finished' calculator using both Netscape and IE - you'll find that despite your fine-tuning, the darn thing looks quite different. When you're happy, we're ready to move on to actually making the thing work!

Calculator Functions- Writing the JavaScript

We know how to attach event handlers to each button. We simply put:

OnClick='DoEvent()'

where DoEvent is the event handler for the relevant button. For example, for button number seven, we might say:

<input type='button' name='seven' value=' 7 '>

where AddDigit is the event handler. Let's now decide what events we need. Here they are:

• Add a digit to the display
• Put a decimal point on the display (if not there already)
• Put an exponent ('e') on the display
• Change the sign to + if - and minus if plus
• Clear and All Clear (C and AC)
• Perform operations * / + and -
• Calculate (on pressing the = button)
• Hmm, what if a user types something into the tempting display box. It seems cruel to simply discard this, so we have to enter this (unless it's rubbish)!

Well. Let's think up names for each of these 'event handlers' and then implement each of them in turn. While we're about it, how are we going to react when a user types something in the display box? Fortunately, there's an event handler tailored to this need. It's called OnChange. Here are our names for the event handlers:

Name	Event	What it does
AddDigit	OnClick	Add a digit to the display
Dot	OnClick	Put a decimal point on the display (if not there already)
DoExponent	OnClick	Put an exponent ('e') on the display
PlusMinus	OnClick	Change the sign to + if - and minus if plus
Clear, AllClear	OnClick	Clear and All Clear (C and AC)
Operate	OnClick	Perform operations * / + and -
Calculate	OnClick	Calculate (on pressing the = button)
FixCurrent	OnChange	Process user input

But before we implement these event handlers, we need to sort out a few more things. First we must define the variables we will use in doing our calculations. Here they are:

Variable	What it stores
Memory	The previous number you entered
Current	The number currently being entered
Operation	The function button you pushed, for example, *

Finally, we need to define our constants. There is only one:

Constant	What it means
MAXLENGTH	The maximum number of digits we'll allow a user to input. Let's make it (say) 30.

Let's get cracking:

1. First, define our constant and global variables

The only thing that needs explanation in the above is that we used a numeric code for the Operation. Hmm, perhaps this is a bit over the top. We could just keep the '*' or whatever here as a string. But let's stick with this for the time being!

2. Define individual event handlers

2.1 AddDigit - Adding a digit to the display

JavaScript for AddDigit

Here we see how we use the variable Current. If Current has exceeded the allowable length, then we replace it with an error message. Otherwise, we append the digit.

See how we use eval to check to see if Current is zero - if it is, then we replace the zero value with the new digit. This is to prevent a leading zero in numbers - pretty important, as in JavaScript, a leading zero is rather peculiarly used to indicate that we're using OCTAL, that is, base eight.

But wait a bit! What if we are busy entering 0.000 and we press say '7'. Unless we check for a decimal, this will replace the 0.000 with 7, which is not what we intended. So we check, using the above code! If Current.indexOf is minus one, this means that there is no decimal point, so we can go on and replace the zero with dig. Otherwise, we simply append the digit to the string in Current.

Then, when everything is over, we store the value in Current into our display area. Note how we do this. We say

document.Calculator.Display.value = Current

(In fact, under Internet Explorer, it's quite okay to leave out the document. portion, as IE works things out for itself. But Netscape will crash and burn if you try this trick). Remember that we called our FORM Calculator, so that's where we got this from, and that we called the <input type='text' > box Display.

Retirement Payout Calculator

The above code can be criticised for several reasons:

• Perhaps we should first do all the processing, and then check the string length;
• What if Current is occupied by an error message - should we not test for this? Hmm;
• We need to handle the case where we are entering the digits for an exponent.

2.2 Dot - Putting in a decimal point

2.3 DoExponent - handling 'times 10^{an integer}'

JavaScript for DoExponent

2.4 PlusMinus - Changing the sign

2.5 Clear and Clear Entry

JavaScript for the Clear Buttons

2.6 Respond to pressing * / - + buttons

JavaScript to respond to press of arithmetic function

2.7 Calculate!

JavaScript for Calculating results (On pressing the = button)

Create Simple Savings Calculator Javascript Download

2.8 Dealing with stuff typed into the display area

Putting it all together

Clearly the above functions are only rough drafts. It is however easy to see the actual code that resulted in our simple calculator. Just click View and then Page Source (or the equivalent) on your browser!

This calculator is by no means perfect. See how many errors you can find! (There are no prizes, but we'd appreciate an email if you find something gross). You can have even more fun (if this is the sort of thing that turns you on) by trying to crash the numerous JavaScript Calculators you'll find on the web.

You can now Continue your lesson

Webpage author jvs@anaesthetist.com

Last update: 2000-10-18

How to create a Simple Calculator in jQuery Javascript

In this tutorial, we will learn how to create a simple calculator using the jQuery javascript library. But first, we must understand the requirements in building a javascript driven application. One of the requirements is your thorough understanding in HTML (Hypertext Markup language) and in CSS (Cascading Stylesheet). These languages are required in building the graphic user interface (GUI) of the application.

What we expect in the GUI is a two textboxes for inputting of numbers, a combobox for selection of the desired operator, 1 container for the output and of course the trigger through a submit button. The code goes like this:

2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36

body { } background:#69aafd; padding:11px; text-align:center; text-align:center; #calculator_form { width:100%; padding:5px; } display:inherit; padding:13px; font-size:25px; #calculator_form #answer { color:#FF0000; text-align:right; </style>

We can now put the jQuery code for our simple calculator application.

Create Simple Savings Calculator Javascript Online