HTML5 Guidelines for Web Developers

3.3 New Elements 49

The HTML code for this example contains the still empty elements, which are
filled via JavaScript:

Text

% of the year has passed.

The new meter element

Nested div elements

Google Chart API

For the text output, we use the output element introduced in section 3.3.5, Cal-
culations with “output”. But first the current date is generated in JavaScript, and
the meter element is initialized:

var today = new Date();
var m = document.getElementById("m");
m.min = new Date(today.getFullYear(), 0, 1);
m.max = new Date(today.getFullYear(), 11, 31);
// m.optimum = m.min-m.max/2;
m.value = today;

The variable today contains the number of milliseconds since the start of the
UNIX epoch (on 1.1.1970). To make sure our meter element gets a sensible scale,
we set the min value to January 1 of the current year and the max value accordingly
to December 31. The value of the meter element is set in the last line of the listing;
now the graphical representation is complete. If you activate the optimum value
(in this case the middle of the year), which we left out, you will see the display
change depending on whether you call the script in the first or second half of the
year. The new element is wonderfully simple to use.

Let’s now move on to the other elements on our HTML web page. We want to
assign the percentage of days passed to the output element tagged with the ID
op. With Math.round(), we round up the percentage to the nearest number before
the comma, which is plenty accurate enough for our example:

var op = document.getElementById("op");
op.value =
Math.round(100/(m.max-m.min)*(m.value-m.min));

var innerDIV = document.getElementById("innerDIV");
innerDIV.style.width=op.value+"%";
innerDIV.style.background = "green";