Project Description
Online Inflation Calculator to return annualized inflation rate on arbitrary selected products( over specified period of time: implemented as RIA using pure HTML 5, CSS, jQuery coding technique (no need for graphic files)


Inflation Calculator was started as an educational project to demonstrate the power of emerging Internet standards and techniques, namely: HTML 5 and CSS 3, accompanied by increasingly popular jQuery extension to JavaScript. Though it is intended predominantly for the didactic purpose, it could also find some practical use for the “custom” annualized inflation estimates over certain period of time for the individually selected products/services, or the arbitrary composed “virtual basket” of goods.

The theory behind the calculation

Inflation is "money losing its purchasing power". Such simplified definition, though not quite academically precise, reflects on the qualitative level the actual feeling of the average "Joe and Joanne" as they going to the market place and watching the prices of the same products/services moving upward. The reverse process of prices declining over time is called, correspondingly, a deflation.

The underlying math and programming technique

Inflation Index Calculator (hereinafter – Calculator) was developed to address both practical and didactic aspects of online computation, providing students with brief introduction into real-life economics (as discussed in the previous chapters) and demonstrating the best practices of using emerging Internet standards and programming techniques, namely: HTML5, CSS3 and jQuery.
The formula used for the Inflation Index (Idx) calculation resembles the inverse problem of compound interest calculation:
Idx= (Px2/Px1)^(1/(y2-y1) - 1
The Calculator is implemented as Rich Internet Application, using the following coding techniques:

  1. Page layout and aesthetic enhancement (color gradient, rounded corners, text decoration, shadow effects) achieved through the use of new features introduced in HTML5, CSS3
  2. Computational engine and dynamic effects (fading in, color rotation, toggle panel) are coded in jQuery

Entire application is encapsulated in a single .htm file.

Sample screenshots are shown below on Fig.1,2:

Fig.1. Inflation Calculator, demo sample (screenshot)

Fig.2. Inflation Calculator w/Info panel extended, demo sample (screenshot)


  1. Online Payroll Tax Calculator
  2. Engineering Calculator VOLTA
  3. Payroll Tax Calculator for Windows

HTML 5 | CSS 3 | jQuery | Rounded Corner | Drop Shadows | RIA | Gradient | Inflation Calculator | CPI |

Last edited Feb 18, 2015 at 1:44 AM by DrABELL, version 5