Mini-Assignment 2 in JavaScript - A Desktop Calculator

This assignment is slightly more complex than the previous one, and also instead of simply giving you a list of detailed instructions, I have simply stated what needs to be done, and left the exact details to you. You should, after all, have a fairly competent knowledge of JavaScript and HTML by now!

The project is to implement a simple calculator in the form of a JavaScript program. A sample layout for the calculator is shown on the right. It has the four arithmetic functions, +, -, * (for multiply) and / (for division). There are the 10 digits, the decimal point button and the equals sign to get the result.


  1. The first thing to do is to create a table within which the buttons for the calculator will sit. Create a table within an HTML file. I suggest that the first row of the table spans several columns (Add the COLSPAN= property to the table division in the first row) as a wide slot is needed to display the answer.

  2. Enclose the table within a <FORM> tag, which you will need to name. Inside each division, place the appropriate button, with a caption on it, as shown above (or similar). Each button should contain an ONCLICK= property which calls a function. Define the functions for the buttons - although the functions will be empty for the moment as we don't know (yet) what should go inside them!

  3. Declare a variable which will hold the number displayed on the calculator. We will be adding characters to this string (using the + operator) and using it to perform calculations. You will also need a way of copying the value stored in the string into the display.

  4. Now let's consider one of the buttons for the numbers (1 to 9. The digit 0 is a special case which you must deal with specially). What is supposed to happen when we click on one of those buttons? If the display holds the value 0, then the digit should replace that value. Otherwise the digit should be added to the end of the value e.g. pressing the key 9 should turn the value 0 into 9, and should turn the value 12 into 129.

  5. What about the decimal point key? If the number already contains a decimal point, then the decimal point key should do nothing. On the other hand, if the number doesn't already contain a decimal point, then the key should add a decimal point on the end. For this reason you will need to set up a variable to act as a "flag" which is set to 0 as long as there is no decimal point in the number, but is set to 1 as soon as the decimal point is added to the number.

  6. What about the arithmetic function keys? When the user has entered a number and then clicks on (say) the + key, the number should be stored in a variable. Another flag variable should be set to indicate that the next digit to be pressed is not to be added on to the end of the number, but is to start another, new number. The program should also store the fact that the + key has been pressed - presumably, when the second number has been entered by the user, the Equals key will be clicked on. The program will then need to know which the arithmetic keys had been clicked before.

  7. The last thing to consider is the Equals key. When it is clicked, the number in the display is stored in another variable. The program should then perform the calculation based on the what the first number was, what arithmetic key was clicked on and what the second number is. The result of the calculation should be displayed and the flag variable set so that the next click starts a new number on the display, and a new calculation.

Improvements to the program

Does the program behave exactly as it should in all circumstances? Compare its behaviour with that of a real calculator. Adapt your program so that it behaves in the same way.

Add a few more features. For instance, in the previous assignment` you learned how to calculate square roots and higher powered roots. You could add a button to the calculator so that it could do the same thing: I suggest one button that automatically square roots what it sees on the display and then replaces the display value by the root, and another button where you first type the value whose root you want to find, then press the button, then press the root number (e.g. 3 for cubed root) and finally the equals button.

Go back