wezm.net/content/weather.html

<section class="temperature">
  <h2>Temperature</h2>

  <div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>

  <div class="temperature">
    <h3>History <button id="today">Today</button></h3>

    <div class="chart"></div>
  </div>

  <section class="extremes"></section>
</section>

<section class="rain">
  <h2>Rainfall</h2>

  <h3>Today</h3>

  <p>Total: <span class="total rain">--</span> mm</p>

  <div class="rainfall today chart"></div>

  <h3>Last 7 Days</h3>

  <div class="rainfall week chart"></div>
</section>

<small>Forecast icons by <a href="http://lavana.deviantart.com/art/Flat-Weather-Icons-32021664">LavAna</a>. Data from my <a href="/personal/2010/09/weather-station/">weather station</a>.</small>
<script id="current-template" type="text/x-handlebars-template">
  <div id="current">
    <figure class="forecast">
      <img src="/images/weather/{{forecast}}.png" width="48" height="48" alt="{{forecast}}" />
      <figcaption>Forecast</figcaption>
    </figure>

    <div class="temperature">
      <div class="current temperature">{{temperature}}&deg;C</div>
      <time datetime="{{isoDate timestamp}}">{{datetime timestamp}}</time>
    </div>
  </div>
</script>
<script id="extremes-template" type="text/x-handlebars-template">
	<section class="extremes">
  	<h3>Extremes</h3>
    {{#extremes}}
    <div class="extreme">
      <time datetime="{{isoDate date}}" class="day">{{day date}}</time>
      <div class="min">
        Min <span class="temperature">{{min/temperature}}&deg;C</span> at
        <time datetime="{{isoDate min/time}}">{{time min/time}}</time>
      </div>
      <div class="max">
        Max <span class="temperature">{{max/temperature}}&deg;C</span> at
        <time datetime="{{isoDate max/time}}">{{time max/time}}</time>
      </div>
    </div>
    {{/extremes}}
  </section>
</script>