Calculator Help

It’s a simple calculator, silly, written in HTML / CSS / JavaScript.

By Steve White. The pinnacle of my career, let me tell you. It’s all downhill from here.

And don’t you go stealing the code for it! Or else!

Oh, well. Go ahead and steal it.

Usage

Click on the buttons with the mouse, as you would type the keys on a more solid calculator.

If you click in the display area, you can also type numbers in directly. You can even copy a number out of some other program, click in the text area, and paste!

Note that you can type in engineering notation for exponents directly into the display area, using the letter e or E.

The calculator serves as a simple hex-to-decimal converter: Just type in your hex number prefixed with the characters “0x”.

But why?

Are there plenty of calculators out there? Yeah. Are there plenty that use JavaScript and run in a browser? Yeah.

Call it an exercise.

Nonetheless, this is a nice calculator. Its features include:

How does it work?

You can see all the innards by viewing the source in your browser. In most browsers this is done by: pulling down the Source item from the View menu (or some such thing) while you are looking at the calculator.

HTML gets the basic components into the web page ( the buttons, display, and title ) and does the basic arrangement. That’s the stuff between the <body> and </body> tags.

The colors and font sizes are specified using Cascading StyleSheets (CSS), as are the sizes of some of the elements. The StyleSheet is the stuff between the <style> and </style> tags.

JavaScript does the calculations. It’s the stuff between the <script> and </script> tags.

What browsers does it work in?

It requires JavaScript version 1.1 to work. That excludes Netscape versions less than 3.0, and, of course, most text-only browsers.

It works to some degree in MS IE 5.5 on Windows, MS IE 5.5 on MacOS, MS IE 4.01 on MacOS, Netscape 3.04 on MacOS, Netscape 4.08 on MacOS, Netscape 4.77 on Linux, MacOS, and Windows, Netscape 6 on Linux, MacOS, and Windows, Opera 5 on MacOS and Linux, Opera 5.12 on Windows, iCab 2.53 on MacOS PPC (the 68k iCab has serious problems with JavaScript ), Konqueror 2.1.1 on Linux KDE, and HotJava 3.0.

The numeric keypad is unfortunately not very standardized across browsers. I’ve explicitly provided support for Netscape 6, MSIE 5+, and Opera 5+. Netscape 4.x doesn’t even fire events for the numerals on the keypad (on Linux anyway) unless you set the Num Lock key.

I could have made it look a lot better if more browsers correctly supported the “100%” value for the CSS height and width properties.