UIZE JavaScript Framework

JAVASCRIPT EXAMPLES JavaScript Calculator Widget

In this example, an instance of Uize.Widget.Calculator is used to wire up a basic JavaScript calculator widget. The widget provides the basic functions you'd expect from an easy-to-use pocket calculator: division, multiplication, addition, subtraction, square root, a memory feature, and a versatile percent function that supports operations like 15 + 12% (15 increased by 12%), 5000 - 2.3% (5000 reduced by 2.3%), 50 * 85% (85% of 50), and 85% 50 = (85% of 50). Operations are automatically completed, as expected (e.g. with 2 x 3 + 4 =, 2 x 3 is completed when addition is triggered). You can use your regular keyboard to enter values and trigger operators - click in the display to focus the entry field and start typing. The corresponding buttons on the calculator keypad will be higlighted as you type. For appreciators of CSS, the characters in the display are styled using the CSS3 text-shadow property to produce an LCD / neon glow. This can be seen in browsers that support this property, such as Safari 4.x and Google Chrome 3.x. Finally, buttons are disabled whenever the actions they would trigger would not be valid. Play around for a while and you'll see. Try getting the square root of -1.