Weather Demo

by ifandelse

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="https://raw.github.com/postaljs/postal.js/master/lib/postal.js"></script>
<script src="https://raw.github.com/postaljs/monologue.js/master/lib/monologue.js"></script>
<script src="https://raw.github.com/postaljs/monopost.js/master/lib/monopost.js"></script>
<div id="weather">
</div>

JavaScript

var Weather = function() {
    this.goLocal({
        "weather fetch" : "fetch" 
    });
    this.goPostal("weather");
};
_.extend(Weather.prototype, {
    fetch: function( city ) {
     	$.ajax({
            url: "http://openweathermap.org/data/2.1/find/name?q=" + city + "&units=imperial",
            dataType: "jsonp"
        }).done(_.bind(function(data) {
            this.emit("fetched", data.list[ 0 ]);
        }, this));   
    }
}, Monologue.prototype);

var App = function() {
    this.goLocal({
        "weather fetched" : "gotWeather" 
    });
    this.goPostal("weather");
};
_.extend(App.prototype, {
    getWeather: function( city ) {
        this.emit( "fetch", city );
    },
    gotWeather: function( data ) {
        console.log( "weather retrieved" );
    }
}, Monologue.prototype);

var UI = function() {
    this.goLocal({
        "weather fetched" : "showWeather"
    }); 
};

_.extend(UI.prototype, {
    showWeather: function( data ) {
        var weather = data.weather[0],
            displayWeather = "";
        
        displayWeather += "<p>The wather in " + data.name + " is " + weather.description + ".</p>";
        displayWeather += "<p>The wind is " + data.wind.speed + "mpg, with gusts of " + data.wind.gust + ".</p>";
        $( "#weather" ).html( displayWeather );
    }
}, Monologue.prototype);

var weather = new Weather();
var app = new App();
var ui = new UI();
app.getWeather( "Thompsons station, tn" );