ractiveJS with FETCH HTML5 API

by Kabeer Shah

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.ractivejs.org/latest/ractive.min.js"></script>
<div id='container'></div>

<!--Use the full power of Ractive.js-->
<script id='template' type='text/ractive'>
  <div class="row">
    <div class='col-md-6 col-sm-12'>
      <label for='location'>
        Enter city
      </label>
      <input type='text' id='location' placeholder='e.g. Helsinki,FI' />
      <button on-click='getWeatherData'>Get Weather Data</button>
      <!-- Ractive events looks a little different than pure HTML events, e.g. on-click -->

      <hr/>
      <!-- Keep weather data div hidden, because without data it looks ugly -->
      <div id='WeatherData' style='visibility:hidden;'>
        Showing weather for: {{location}}
        <ul>

          <li>
            <label for='description'>The weather is/have {{main}} </label> <span id='description'> with {{description}}</span>
          </li>

          <li>
            <label for='temp'>Temprature : </label>
            <label id='temp'>{{temp}}</label>
          </li>

          <li>
            <label for='pressure'>Pressure : </label>
            <label id='pressure'>{{pressure}}</label>
          </li>

          <li>
            <label for='humidity'>Humidity : </label>
            <label id='humidity'>{{humidity}}</label>
          </li>

          <li>
            <label for='temp_min'>Minimum temprature : </label>
            <label id='temp_min'>{{temp_min}}</label>
          </li>

          <li>
            <label for='temp_max'>Maximum temprature : </label>
            <label id='temp_max'>{{temp_max}}</label>
          </li>

          <li>
            <label for='wind_degree'>Wind direction : </label>
            <label id='wind_degree'>{{wind_degree}}</label>
          </li>

          <li>
            <label for='wind_speed'>Wind speed : </label>
            <label id='wind_speed'>{{wind_speed}}</label>
   ...