Happy Thanksgiving to all my fellow Americans! Enjoy the national holiday, have a great turkey dinner and lift up your spirit. And also, have your calculators ready to calculate the discount/ savings on the following Friday shopping day :).
Actually, the virtual online shopping rush has started already: check the ads that are decorating the Internet horizon in a highly aesthetically appealing way, thanks to the Adobe Flash™, Microsoft Silverlight™ and other rich internet technologies (RIA), in particular HTML 5 and CSS 3.
The online SCIENTIFIC CALCULATOR (hereinafter – Calculator) is implemented as rich internet application, utilizing the latest/greatest features enabled in HTML 5, CSS 3 and jQuery. Entire application could be encapsulated entirely in a single .htm file of extremely small digital footprint (less tan 20kb), demonstrating the best coding practices, pertinent to the emerging Internet standards. It does not require any image files and graphic editing (all of its graphic elements/enhancements, like color gradients, rounded corners, box shadows, are implemented through HTML 5 / CSS 3), thus dramatically simplifying the overall development process and making the page load extremely fast.
The Calculator project was started as an educational project, intended to demonstrate the power of emerging Internet standards and, namely: HTML 5 and CSS 3, accompanied by increasingly popular jQuery (extension to JavaScript). It provides a deep insight into web applications coding technique utilizing rich java scripting math library. Though intended predominantly for the didactic purpose, it could be well suited or customized for many practical computational tasks.
Instruction
Online math calculator allows to perform 4 arithmetic operations and calculate variety of algebraic and trigonometric functions. Intermediate results could be stored in the virtual memory. As an example, in order to calculate the arithmetic expression: 243.4+345*98.1 follow the steps:
- Notice, that because of the multiplication taking precedence, the expression could be re-written as: 345*98.1+243.3.
- Enter the number 345 using the online numeric key pad. In case you made a mistake, use the backspace button ⇦ or clear the entire input box using "CLR" button
- Click on "*" sign button, then enter the number 98.1 and press the "=" button to get the intermediate result
- Click the "+" button, enter 243.4 and press he "=" button to get the final result shown in lower box
For more complex computation use the "⇧" and "⇩" keys to move the numbers to/from the memory register (lower box).
Coding techniques
The most innovative coding technique, dramatically improving the aesthetic appeal of the web applications, is demonstrated below:
Listing 1: CSS 3 code snippet used to add the shadows to the screen objects
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
Listing 2: CSS 3 code snippet used to implement the rounded corners
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Listing 3: CSS 3 code snippet used to create the color gradient (does not work in IE8 and all previous versions)
/* WebKit */
background: -webkit-gradient(linear, left top, right top from(#ffffcc), to(#ffffff));
/* Mozilla/Gecko */
background: -moz-linear-gradient(left top, #ffffcc, #ffffff);
Web Browser Compatibility
Scientific Calculator was tested on all 4 major Web Browsers. It’s found fully compatible with the latest webkit (Google Chrome/Safari) and Mozilla (Firefox)-based Web Browsers, and expected to be compatible with the next release of Internet Explorer (v.9.0), which presumably supports the novel HTML 5 and CSS 3 standards. In the previous versions of IE most of the graphic enhancements, implemented in Calculator, are unavailable (there is an alternative CSS spec to handle the older IE issue).
References
Disclaimer. The content of this article, including information, analysis and coding technique, is provided on ‘AS IS’ basis for demonstration purpose only without warranty of any kind.
Copyright © 2010 Alexander Bell. All rights reserved.
Comments