As soon as the temperature is retrieved, you’ll see the meter bar rising (or falling, depending on the case) until the correct measure is reached and the relevant information, on the upper right-hand side, is autofilled with the data. In the case where you need the temperature of your current location, you can simply take advantage of the Geolocation API used in the code. So, all you need to do is to click on “Get my position” and the field will be automatically filled with your current position (to be honest, it is an approximation).

Let’s Analyze the Code

In this section I won’t explain the entire code, but just the most interesting parts of it; some of the CSS rules or JavaScript lines are just complementary to the core.

HTML5

The markup underpinning the thermometer is quite simple:

<div id="thermometer-wrapper">
  <meter id="thermometer" min="-30" max="50" value="0"></meter>
  <div id="labels"></div>
</div>
<div id="info"> The temperature in <label id="city">-</label> is <output id="temperature" form="request">-</output>
  <label id="error"></label>
</div>
<form id="request" name="request" action="#">
  <label>Type the city:</label>
  <input type="text" id="location" name="location" size="30" placeholder="Frattamaggiore, Italy" required="required"/> or <a id="my-position" href="#">Get my position</a>
  <br />
  <input type="submit" name="submit" value="Get temperature!" />
</form> 

The external div delimits the area in use and it is used to attach the background image. The second line shows a meter tag which is the actual element used for the thermometer. The meter tag gives the demo a pinch of semantic meaning, which is never a bad thing. The third line contains the labels attached to the thermometer, but they will be created on-the-fly using JavaScript.

The remaining code is used to show the info in a written form and to request the user location. The important tags and attributes here are the output tag, inside the inner div, to show the current temperature which is attached to the form; as well as the required and placeholder attributes of the location field.

CSS3 and SVG

CSS3 is not used only to style the code simply, but to transform the markup into a real environmental thermometer. The background image is an SVG which means that it will render well and determine if the dimensions of the demo will change. Here, I used the CSS3 rule background-size.

#thermometer-wrapper {
  background-image: url('background.svg');
  background-repeat: no-repeat;
  position: relative;
  height: 300px;
  width: 75px;
  float: left;
  margin: 0em 1em 1em 0em;
  -ms-background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

To give the whole thing a nicer look and feel, the metertag is rotated 90 degrees to be displayed vertically. This, however, brings a problem with both sizing and centering the element inside the div. The sizing problem arises from the fact that, being displayed vertically, to prolong the bar, we have to change the height attribute. Unfortunately, in order to work as expected, this change has to be done after the bar is rotated and so this is done via JavaScript. For the same reason, centering the bar is a problem that has to be solved programmatically using JavaScript — in particular, jQuery. The transform rule is the only CSS3 rule used on the element, as shown below:

#thermometer {
  position: absolute;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
}

JavaScript and jQuery

JavaScript plays an important role in this demo. Infact, since CSS is not sufficient to center the thermometer, JavaScript has to be used. Moreover, the latter has been used to set the number of labels dynamically and to evenly space things. Even if the dimensions of the wrapper of the thermometer are changed, the labels will be adapted proportionally. The relevant part of code is:

// Calculates the space between each label
margin = (thermometer.width() + (parseFloat(labels.css('font-size')) / 2)) / ((max - min) / step);
margin -= parseFloat(labels.css('font-size'));

JavaScript helps to make the thermometer more adaptive. Infact, by simply changing one or two variables inside the JavaScript file, it is possible to have a different number of grade labels that still are evenly spaced. The same thing happens if you alter the font-size. Here’s how you center the bar:

// Calculates the position of the thermometer
thermometer.width(0.9 * wrapper.height());
thermometer.css('bottom', ((wrapper.height() - thermometer.height()) / 2) + 'px');
thermometer.css('left', (thermometer.width() - wrapper.width()) / -2);

The APIs

In this demo I used several APIs. The Geolocation API is used to retrieve the user’s position; this data is immediately sent to the Google Maps API to retrieve an address from the coordinates. Finally, the Yahoo! Weather API is used to retrieve the WOEID (Where on Earth Identifier) and get the current temperature of the location requested.

That’s a basic look at the markup and script used to create this environmental thermometer. Take a look at the online demo, and download the source code, check it out for yourself and feel free to have a play around with it. (The HTML5 environmental thermometer is completely open source and released dual licensed under the MIT and the GPL-3.0 licenses.)