Click here to Skip to main content
Click here to Skip to main content

Engineering Calculator VOLTA-2013

, 27 Nov 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Productivity software implemented as pure HTML5/CSS3/Javascript solution, encapsulated in a single text file does not require any image files. Can run in all major browsers, and also is intended to add ability of standalone operations under Windows OS on Ultrabooks.
This is an old version of the currently published article.

Please note

This article is an entry in our AppInnovation Contest. Articles in this sub-section are not required to be full articles so care should be taken when voting.


Engineering Calculator VOLTA-2012 is implemented as HTML 5 web application project that adheres to software paradigm of separation of programming concerns, namely:

  • Content: HTML5
  • Presentation: CSS3
  • Functionality: Javascript/jQuery

Entire project is encapsulated in a single text file with extremely small digital footprint (less than 10kB). It does not require any graphic files, like .jpg or .png, etc. All aesthetic enhancements, like: rounded corners, color gradients, borders and shadows are achieved exclusively via CSS3 styling, thus resulting in small application footprint and very fast web page load.

Note: this project is submitted to The Windows 8* & Ultrabook™ App Innovation Contest.

Category 1: Productivity

Category 2: Education

Platform: Windows 8 desktop

Ultrabook-specific features

  • Touch-screen and standard PC mouse operation  modes
  • GPS/Geolocation-based Find Job application extension (Jobrica-2013)

Proposed solution should be able to run in Desktop/Metro modes .


Engineering Calculator VOLTA-2013 extends the capability and application scope of its predecessor, previously published online [1,2] and partially described on Codeproject [3].


Working Demo of Engineering Calculator VOLTA-2011 developed exclusively with HTML5/CSS3 and jQuery is available online: click on the snapshot image shown below and you will be redirected to the demo page implemented fully-functional calculator:

Fig.1: Engineering Calculator VOLTA-2011


Volta-2013 is updated desktop version of Electrical Engineering calculator. It's installer was generated using Intel AppUp encapsulator [4]. Online User Manual [1] covers use cases pertinent to the previous model (Volta-2011) and current one. Sample screenshots follows, demonstrating various styling options, namely: rounded corners, High/Low contrast, light background.

Fig 2: Engineering Calculator Volta-2013 for Win 8 desktop

Fig 3: Calculator Volta-2013 with rounded corner

Fig 4: Calculator Volta-2013 with 'Light' background

Fig 5: Calculator Volta-2013 app icon

Using the code 

The code base of existing Calculator VOLTA-2011 has been documented, commented and discussed online [2]. Dynamic styling was added to current version using jQuery and CSS3 include files, as shown in the following example pertinent to toggle rounded corners On/Off:

Listing 1. Round Corners Style (CSS3)  
div#keyPad button,
div#keyPad input,
div#eeMain div.eeStyleControl,
div#eeMain div#eeRounded,
    -moz-border-radius<span class="code-none">: 10px<span class="code-none">;
    -webkit-border-radius<span class="code-none">: 10px<span class="code-none">;
    border-radius<span class="code-none">: 10px<span class="code-none">;
<span class="code-none">} </span></span></span></span></span></span></span>
Listing 2. jQuery code snippet to toggle Round Corners On/Off 
// ROUNDED CORNER On/Off ********************
$("div#eeRounded").click(function () {
   //get all stylesheets
   var styleSheets = document.styleSheets;
   // toggle stylesheet identified by href
   var href = 'RoundedCorner.css';
   for (var i = 0; i < styleSheets.length; i++) {
       if (styleSheets[i].href.toString().indexOf(href) >= 0) {
            styleSheets[1].disabled = !(styleSheets[1].disabled);

Similar jQuery technique was used for dynamic load/unload of CSS3 files related to Low/High contrast and backround selection (see the snippets following)

Listing 3. CSS stylesheet file pertinent to 'Light' background palette
Project          :  Engineering Calculator VOLTA-2013
Module           :  Light.css
Description      :  CSS3 color properties to produce 'Light' background
Author           :  Alexander Bell
Copyright        :  2011-12 Infosoft International Inc
DISCLAIMER: This Application is provide on AS IS basis without any warranty
You can use it at your sole risk.
TERMS OF USE     :  This module is copyrighted.

div#eeMain {  background-color<span class="code-none">: #dedede<span class="code-none">; <span class="code-none">}

div.voltESeries <span class="code-none">{ background-color<span class="code-none">: #eaeaea<span class="code-none">;  <span class="code-none">}

input#keyPad_Mem  <span class="code-none">{ background-color<span class="code-none">: #f8f8f8<span class="code-none">;  <span class="code-none">}

table.tabESeries <span class="code-none">{ color<span class="code-none">: #202020<span class="code-none">; <span class="code-none">}

div#eeModel <span class="code-none">{ color<span class="code-none">: #005500<span class="code-none">; <span class="code-none">}

button.keyPad_btnMemOp <span class="code-none">{  color<span class="code-none">: #005500<span class="code-none">;<span class="code-none">}

<span class="code-comment">/* BACKSPACE/CLEAR INPUT KEYS*/
div#keyPad button#keyPad_btnBack,
div#keyPad button#keyPad_btnClr,
div#keyPad button#keyPad_btnAllClr {color<span class="code-none">:red<span class="code-none">;<span class="code-none">}

div.voltESeries <span class="code-none">{ border<span class="code-none">: 1px solid #d0d0d0<span class="code-none">; <span class="code-none">}

button:hover <span class="code-none">{ background<span class="code-none">: #d9d9d9<span class="code-none">; <span class="code-none">}

button:active <span class="code-none">{	border<span class="code-none">: solid 2px #909090<span class="code-none">; <span class="code-none">}

<span class="code-comment">/* odd rows style */
table.tabESeries tr:nth-child(odd) { background-color<span class="code-none">: #f0f0f0<span class="code-none">; <span class="code-none">}

<span class="code-comment">/* even rows style */
table.tabESeries tr:nth-child(even) { background-color<span class="code-none">: #eaeaea<span class="code-none">; <span class="code-none">}

<span class="code-comment">/* Table hover style */
table.tabESeries tr:hover {background-color<span class="code-none">: #dadada<span class="code-none">; color<span class="code-none">: #101010<span class="code-none">;<span class="code-none">}
Listing 4.jQuery code snippet to select High/Low contrast and background
// SELECT COLOR PALETTE ************************
$("div.eeStyleControl").click(function () {

        // disable all color styles

        // add appropriate color style
        switch ( {
            case 'eeNContrast': $('head').append('<link type="text/css" href="Style/ContrastNormal.css" rel="stylesheet" />'); break;
            case 'eeHContrast': $('head').append('<link type="text/css" href="Style/ContrastHigh.css" rel="stylesheet" />'); break;
            case 'eeLight': $('head').append('<link type="text/css" href="Style/Light.css" rel="stylesheet" />'); break;
            default: break;


Jobrica-2013 is Windows 8 desktop/Ultrabooks application extension using GPS/Geolocation service in order to find Job Agencies in a search area nearby. It implements dedicated web page powered by Microsoft Bing technology [6] and desktop installable app, that allows obtaining geo-coordinates in real-time mode (in case geo-location service is enabled) and composing a web-query to the said page (see the sample screenshots following):

Fig 6: Jobrica-2013 desktop app for Win8/Ultrabooks, sample screenshot

Fig 7: Interactive map shows Job Agencies nearby, sample screenshot

Points of Interest

Jobrica-2013 implements multi-modal Voice-enhanced User Interface utilizing Windows 8 Speech object library, in particular, TTS (Text-to-Speech) options.


  • HTML5 web application Engineering Calculator VOLTA-2011 has been released in the year 2011 [1,2] and tested in all major web browsers on PC platform
  • Calculator VOLTA-2011 has been tested on new Apple iPad version (a.k.a. iPad 3) [5].
  • Engineering Calculator VOLTA-2013 desktop version 8.1.2 was developed, submitted and approved for publishing in Intel's AppUp  


  1. Online Engineering Calculator Volta-2011, User Manual[^]
  2. Online Engineering Calculator Volta-2011, Design Notes[^]
  3. Engineering Calculator VOLTA-2011
  4. Intel AppUp encapsulator
  5. New iPad 3 is here: quick notes from Apple store on Fifth (Mar 17, 2012)
  6. Jobrica-2013 interactive geo-map


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran, published 300+ articles and authored 37 inventions, credited for 10+ Enterprise level projects (>250k code lines); currently focused on .NET/WPF, C#, HTML5, jQuery, SQL, 'Big Data', AI, Speech Tech and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample projects/pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
  4. Online 3 Fractions Calculator (#1 on Goog)
  5. Top-100 Digital Cameras (powered by iMark-DCAM rating engine)
  6. Engineering Calculator VOLTA-814 for Windows
  7. Pericles™ TTS-14 Text-to-Speech Synthesizer (Win)
  8. Semaphon™ SP-300 semantic phone number converter (Win)
  9. PaydayNY-2015 Payroll Tax Calculator (Win)
  10. 'Find Job Agency' Online Interactive Map (Microsoft Bing technology)
Follow on   Twitter

Comments and Discussions

Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
GeneralMy vote of 5 PinmemberMohammad A Rahman8-Oct-12 21:01 
GeneralRe: My vote of 5 PinmemberDrABELL9-Oct-12 5:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 27 Nov 2012
Article Copyright 2013 by DrABELL
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid