JSFiddle - React, Tailwind, and code Playground

by grendian

HTML

<input type="text" id="zipSearch"/><button id="search">Search</button>
<div id="error" class="hidden">Failed to retreive weather data, <span id="errorDesc"></span>.</div>
<div id="weather" class="hidden">
    <h2>Weather for <span id="city"></span></h2>
    <p>Current Temperature is <span id="temp"></span> degrees.</p>
</div>

CSS

.hidden { display: none; }

JavaScript

var myModule = (function($){
    return {
        getWeather: function(zipcode){
            $("#weather, #error").addClass("hidden");  
        $.ajax({
              url : "http://api.wunderground.com/api/837ec39160ffa594/geolookup/conditions/q/"+zipcode+".json",
              dataType : "jsonp",
              success : function(data) {
                  if(data.response.error){
                      $("#errorDesc").text(data.response.error.description);
                      $("#error").removeClass("hidden"); 
                      return; 
                  }
                  $("#city").text(data.location.city);
                  $("#temp").text(data.current_observation.temp_f);
                  $("#weather").removeClass("hidden");
              }
            });
        }
    };
}(jQuery));

(function($, mod){
    $(function(){
        $("#search").on('click', function(){
            mod.getWeather($("#zipSearch").val());
        });
    });
}(jQuery, myModule));

jQuery.noConflict();