HTML 5, CSS 3 and Inflation Calculator

Preamble

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 arbitrary selected products/services, or “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.

Inflation Index, or the Annual Inflation Rate provides the quantitative representation of that intuitive “market perceptions”, or better say, it should be doing that. In practice, things are not quite that straightforward. For example, the official inflation computational models and related Consumer Price Index (CPI) exclude the prices of energy, housing, food and some other consumer goods, which are certainly important for the majority of our fellow Americans, because they eat, travel, watch TV and browsing Internet, take shower, warm or cool their places and, correspondingly, pay their bills.

The price dynamics is not uniformly distributed over different product/service categories, so the different social groups feel the inflation process quite differently. There may be some societal strata more concerned about the price dynamics of Château Lafite Rothschild, Picasso paintings and/or latest Lamborghini/Bugatti models; other folks could be deeply obsessed with iPhones, iPads, or xBox, or Halo 3, or big screen TV, considering them the true necessity of life. In other words, it’s conceptually hard to construct the “one size fits all” consumer basket of goods to include the items of interests and their allocation to reflect adequately the perception and consumer habits of various social groups. Instead, such virtual basket of goods and services typically should include the items of interest/necessity reflecting the basic needs and consumer habits of the US population majority, or in other words, of its middle class. It could also be amended with additional quantitative metrics, adequately addressing the issue of how the inflation affects the rich and poor extremes of our society.

CPI Inflation Calculator by U.S. Bureau of Labor Statistics

Let’s refer to the CPI [1] inflation calculator, provided online by U.S. Bureau of Labor Statistics [2] to see how it works in practice. The “About” section gave us the following information (quote): “…The CPI inflation calculator uses the average Consumer Price Index for a given calendar year. This data represents changes in prices of all goods and services purchased for consumption by urban households. This index value has been calculated every year since 1913. For the current year, the latest monthly index value is used.”

Performing the sample calculation on the $1 in Y2000, the result returned (“has the same buying power as”) is $1.27 in the year 2010. In simple words, based on this official computation (to be precise – calculate by the official CPI inflation calculator), the dollar back in year 2000 was as good in regards to its buying power as $1.27 today.

The entire discussion on this topic is going far beyond the boundary of a single article. The essential outcome is that it’s highly desirable to have some computational tool, capable of inflation index computation on any arbitrary selected goods/services over the specified period of time.

Inflation Index Calculator [3], developed by Dr. Alexander Bell at Infosoft International Inc (NY) allows to calculate the annualized inflation rate (called in this context an “Inflation Index”) on any product/service (or basket of products/services) of interest over specified period of time. The usage is rather simple and straightforward, as described below:

1.   Enter the Starting Year (y1) and corresponding Starting Price (Px1)
2.   Enter the Ending Year (y2) and corresponding Price (Px2)
3.   Click the on-screen button to get the value of Inflation Index

Practical examples: "Do-It-Yourself" inflation calculation

Coke Inflation Index calculated for the first decade of XXI century is a good practical example. Assuming that the same product, namely: big bottle of Coke, regularly priced in the year 2000 about $0.99 (typical for many supermarkets in Queens, NY 10 years ago) is currently (in the Y2010) priced as $1.99, the annualized inflation rate, or Inflation Index is calculated as: 7.23%

Gas Inflation Index calculation for the first decade of XXI century could be performed in the same manner as it was done in previous example (Coke). Assuming that the average cost per gallon of regular gasoline in NY in Y2000 was approximately $1.6 [4] and is currently (in the Y2010) about $3.0, the Gas Inflation Index is calculated as: 6.49%

Doritos (potato chips) Inflation Index calculated for the same period (first decade of XXI century) is another practical example of food price dynamics. Assuming that the same product, namely: small pack of Nacho Cheese Doritos, regularly priced $0.25 in the year 2000 (typical for many supermarkets in Queens, NY) is currently (in the Y2010) priced as $0.50, the annualized inflation rate, or Inflation Index is calculated as: 7.18%

Skirt steak Inflation Index (by price tags at Met Food Supermarket in Queens, NY) calculated based on the price dynamics per pound as $6.99 in the year 2000 and $11.99 in Y2010 is: 5.54%

NY subway fare Inflation Index. Assuming the fare for a single NY subway ride increase from $1.5 in the year 2000 [5] to $2.25 in Y2010 and applying the same computational technique will result in NY subway fare inflation Index of: 4.14%

Post Stamp Inflation Index calculation is based on USPS rates for the letters less than 1 oz. sent by First-Class Mail. Currently the price is set to $0.44. In the year 2000 the cost of this service [6, 7] was $0.33 (or $0.34 by other sources), which corresponds to the Post Stamp Inflation Index calculated as 2.92%

PC RAM (memory) Inflation Index calculated based on the lowest Price ($/MB) for the high-quality products manufactured by Crucial Technology. The price dynamics found as $.85/MB in Y2000 for 64MB DIMM [8] and $0.03/MB in Y2010 for (512MBDDR 2 @$16 [9]), corresponding to the calculated Index of: -28.34% (which is actually a significant Deflation Index).

(... well, obviously the price dynamics of memory chips vs. potato chips have been rather different :-).

Oil (WTI) Inflation Index estimated as 12.41 % (prices, correspondingly $25.56 in Y2000 and $82.23 in Y2010 as of Nov 16 [12]).

Just for comparison, we could apply the same concept and computation technique to the CPI inflation calculated in the previous chapter. The drop in dollar buying power reflects the upward price dynamics for that generalized basket of goods, so assuming the cost increment from $1.00 in Y2000 to $1.27 in 2010, the annualized inflation index based on the official numbers for the decade should be equal: 2.42% (which is relatively close to the calculated Post Stamp Inflation Index of 2.92%)

Gold is still golden! And don't forget about Ag, Pt, Pd

The same computational technique could be applied to rather important commodity, element Au, popular known as Gold, resulting in annualized USD-denominated performance over decade period (Y2000/Y2010):

Product Performance Starting Px/ Ending Px

Gold (Au) 17.11% $282 / $1368

Silver (Ag) 17.24% $5.30 / $ 26.01

Platinum (Pt) 14.49% $433 / $1675

Palladium (Pd) 4.54% $433 / $675

Rhodium (Rh) 6.68% $1198 / $2288

Ending Prices shown as of Nov 15, 2010 [11].

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:

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

Entire application is encapsulated in a single file, available online [3]. Sample coding fragments, essential for the understanding of the application internals, are discussed below:

Listing 1: CSS 3 code snippet used to add the shadows to the headline text
-moz-text-shadow: 2px 3px 5px rgba(10,10,10,0.4);
-webkit-text-shadow: 2px 3px 5px rgba(10,10,10,0.4);
text-shadow: 2px 3px 5px rgba(10,10,10,0.4);

Listing 2: 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 3: CSS 3 code snippet used to implement the rounded corners
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Listing 4: 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);

Listing 5: jQuery coding technique to implement “watermark” effect in text boxes
var wm1 = "2000";
if ($('input#t1').val() == "") { $('input#t1').val(wm1);}
$('input#t1').focus(function()
{
   reset();
   $(this).addClass('watermark');
   if (this.value == wm1) {this.value = "";
   }})
.blur(function()
{ if (this.value == "") {this.value = wm1;}});

Listing 6: jQuery coding technique to implement the header’s text fadeTo animation
$("header h1").fadeTo(1000, 0.25,
function(){$("h1").fadeTo(500, 1.00);});

Listing 7: jQuery coding technique to toggle the instruction panel, triggered by “div.inf” (small button in the lower corner) click event
$("div.inf").click(function()
{$("div.panel").slideToggle("slow");});

The Calculator application is fully compatible with 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. Calculator was tested under Windows XP/Vista in both Mozilla Firefox and Google Chrome Web Browsers (desktop) and also in mobile Safari Browser application (iPad Touch).

Afterword

Recently reported [10] was the proposal by Google to introduce another economic indicator (GPI) based on the online price index. There are certain advantages in proposed approach, rooted in higher responsiveness of the online pricing and reduced "pricing lag" associated with data collection and processing time. But the fundamental question still remains: what particular products/quantity should be included in the hypothetical consumer "basket of goods” in order to calculate the national inflation rates average, which adequately reflects the “market perception’ of the US population majority? As stated above, the issue is going far beyond the boundary of the single article, and frankly speaking, should be open for public discussion due to its high national importance.

This simple Inflation Index Calculator [3] introduces the concept and provides a sample implementation of the solution, extending the existing computational practices/tools by adding the ability to customize the “consumer basket” and calculate the corresponding inflation indices on the particular products of interest. And yes, it is free for all, free as the wind blows! :)

References

Disclaimer. All of the content of this article, including information and analysis, is provided on ‘AS IS’ basis for demonstration purpose only without warranty of any kind.