Tutorial: Building a Weather Widget

Here is the results of this tutorial:

See the Pen Weather Widget by Adam (@adamjacob) on CodePen.

Here is the screencast of me running through the whole development process. I sort of did an okay job of explaining as I was coding it out. ;)

If you want to download the screencast and source files, you can download them here. Building a Weather Widget (Screencast) Download

Source Code

<ul id="locations">
<li class="add-city">
<form>
<input id="new-location" type="text" placeholder="What city would you like to add?" autocomplete="off" />
</form>
</li>
</ul>
body {
  background-color:#EEE;
  margin: 0;
  font-family:'Helvetica Neue', sans-serif;
}

#locations {
  &amp;, li {
    list-style:none;
    margin: 0; padding:0;
  }
  li {
    height:120px;
    border-bottom:rgba(black, 0.1) 1px solid;
    color:#FFF;
    
    @media screen and (max-width: 400px){
      
      height: 200px;
      
      .weather, .city {
        display:block!important;
        float:none!important;
        width:100%!important;
        text-align:center!important;
        padding:0!important;
      }
      
      .city {
        padding: 35px 0 10px 0!important;
        span {
          font-size:10pt!important;
        }
      }
      
      .weather {
        padding: 0 0 0 28px!important;
      }
      
      
    }
    
    &amp;.sunny {
      background-color:#FDB530;
    }
    
    &amp;.cold {
      background-color:#5F6970;
    }
    
    &amp;.cool {
      background-color:#1EB8E3;
    }
    
    .city, .weather {
      width:50%;
      display:inline-block;
      float:left;
      @include box-sizing(border-box);
    }
    .city {
      font-size: 20pt;
      padding: 33px 0 0 35px;
      span {
        display:block;
        font-size:14pt;
        opacity: 0.5;
        font-weight:200;
      }
    }
    
    .weather {
      text-align:right;
      font-size:50pt;
      padding: 20px 30px 0 0;
      span {
        font-size:18pt;
        line-height:10pt;
        vertical-align: super;
        padding: 0 0 0 5px;
        opacity: 0.5;
      }
    }
    
  }
  
  .add-city {
    padding: 35px;
    @include box-sizing(border-box);
    background-color:#EEE;
    input {
      outline:none;
      padding: 10px;
      width:100%;
      background-color:transparent;
      border:0;
      border-bottom: rgba(black, 0.3) 3px solid;
      font-size: 15pt;
      color:rgba(black, 0.5);
      @include box-sizing(border-box);
    }
  }
  
}
$(function(){
  
  // Add a few preload
  
  $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=sydney australia&amp;units=imperial', addLocation);

  
  $('#new-location').keydown(function(e){
    
    if(e.keyCode == 13){
      
      e.preventDefault();
      
      if($(this).val().length > 0){

        $.getJSON('http://api.openweathermap.org/data/2.5/weather?q='+$(this).val()+'&amp;units=imperial', addLocation);
      
        $(this).val('');
        
      }
      
      return false;
      
    }
    
  });
  
  function addLocation(data){
    
    var tempClass, rTemp = Math.round(data.main.temp);
    
    if(rTemp > 60){
      tempClass = 'sunny';
    }else if(rTemp < 60 &amp;&amp; rTemp > 40){
      tempClass = 'cool';
    }else{
      tempClass = 'cold';
    }
    
    var template = '<li class="'+tempClass+'">'+
        '<div class="city">'+data.name+'<span>'+data.sys.country+'</span></div>'+
        '<div class="weather">'+Math.round(data.main.temp)+'<span>&deg;F</span></div>'+
      '</li>';
    
    $('#locations').prepend(template);
    
  }
  
});