Wednesday, October 21, 2009

A humble widget...



A humble widget... but glowy (at least, in browsers that support text-shadow, like Chrome and Safari). 

It's cool to see browser-rendered text with effects that are actually useful in the application's styling.

OK, so it's a humble widget. But then, I threw it together in a couple of days. More a UX exercise than anything else. I wanted to add some little UX touches to this type of critter. For example, it's always bugged me how the percent key behaves in that ugly ass Windows calculator whenever I've used it. Why can't you just do "85 % 15 =" to get 85 percent of 15? Or how about "15 x 85%"? Or how about "15 + 20%"? Or "15 - 20%"? Well, the Windows calculator does the last two, but you have to click the equals button after the percent - annoying. Even more annoying, if you try to reiterate the operation using the equals key -- just like doing "2 x = = = ="  to get 2 to the power of 5 (remember that?) -- you end up adding the percent as it resolved the first time, rather than adding the same percent over and over. So, I came up with what I thought was a better implementation, where "15 + 20% = = = =" would just keep compounding the 20% increase on the running value.

Besides the percent implementation I wanted to be able to use the minus key to do things like "3 x -5 = -15". The Windows calculator just turns that into "3 - 5". Other little touches that I threw in are: entry in the display field, with filtering out of unacceptable characters, triggering of operations with the keys "*", "/", "+", "-", "=", "%", "m" (memory plus), escape (clear), and simulation of clicking the buttons on the keypad when typing keys in the display field. Finally, buttons on the keypad are disabled when they can't be used. Type in "2.5" and the "." button becomes disabled (can't have two decimal points in the same number or we might have to send the Number Nazis after you). Try getting the square root of "-1" and you get an extreme illustration of this principle.

See it in action here: JavaScript calculator widget

No comments:

Post a Comment