GFX9.COM share Creating an incredible jquery calculator, you can download now.
Sure is nice to have a letter opener right next to your mail basket, a shoehorn next to your loafers, and a flashlight by your nightstand. Likewise, it's nice to have a calculator handy when you need to perform some math. This tutorial and download shows you how to put one right on any website.
User Interface Consideration
Some buttons with numbers 1 through 9, a couple of functions, and a big "equals" button. That's all a calculator is right? Should be a peice of cake. Any programming langauge can easily handle this. Of course, but even something as dead simple as a calculator has quite a few things to take into consideration when designing how exactly it works.
The screencast that accompanies this article is going to focused mostly on those things, and less about the down-and-dirty coding. While this written portion will be focused on the code. Nevertheless, here is a quick overview of some of the little user interface details:
- When the calculator loads, 0 (zero) is in the display. Pressing the number 2 doesn't make the number 02, it's just 2.
- When you press a function key, the number currently in the display "locks" as the first number in the calculation, but it just stays right where it is. When another number is pressed, the number is replaced.
- If a function key is pressed, and then a different function key is pressed, the most recent one pressed is the function that will be used.
- After a calculation is performed, there are two possible scenarios. A) A new number is pressed. This will totally reset the calculator and start fresh with this number. B) a function key is pressed, which will lock the total as the "first" number, allowing a second calculation to be performed on the total
- The clear button needs to behave as advertised, and totally reset the calculator
- Visual feedback needs to be used when appropriate, but more importantly, the functionality needs to match the standard set up by the zillions of calculators on desktops worldwide/
The list could go on even, but you see even the simplest of interfaces require much consideration.
The HTML Markup
Nothing fancy here. We need a container for the calculator, we need a display, and we need a bunch of buttons.