Simple Weather Plugin with jQuery - simpleWeather

simpleWeather is a jQuery Plugin for easily displaying a weather widget that is clean and customizable. The data is pulled from the public Yahoo! Weather feed via the YQL API. 

How to Use It:

1. Include jQuery library and simpleWeather.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" charset="utf-8"></script>
<script src="jquery.simpleWeather.js" charset="utf-8"></script>

2. Basic Usage

<script type="text/javascript">
$.simpleWeather({
        location: 'wichita falls, texas',
        unit: 'f',
        success: function(weather) { ... },
        error: function(error) { ... }
});
</script>

3. Complete Usage

<script type="text/javascript">
$.simpleWeather({
        zipcode: '76309',
        unit: 'f',
        success: function(weather) {
                html = '<h2>'+weather.city+', '+weather.region+' '+weather.country+'</h2>';
                html += '<p><strong>Today\'s High</strong>: '+weather.high+'&deg; '+weather.units.temp+' - <strong>Today\'s Low</strong>: '+weather.low+'&deg; '+weather.units.temp+'</p>';
                html += '<p><strong>Current Temp</strong>: '+weather.temp+'&deg; '+weather.units.temp+' ('+weather.tempAlt+'&deg; C)</p>';
                html += '<p><strong>Thumbnail</strong>: <img src="'+weather.thumbnail+'"></p>';
                html += '<p><strong>Wind</strong>: '+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+' <strong>Wind Chill</strong>: '+weather.wind.chill+'</p>';
                html += '<p><strong>Currently</strong>: '+weather.currently+' - <strong>Forecast</strong>: '+weather.forecast+'</p>';
                html += '<p><img src="'+weather.image+'"></p>';
                html += '<p><strong>Humidity</strong>: '+weather.humidity+' <strong>Pressure</strong>: '+weather.pressure+' <strong>Rising</strong>: '+weather.rising+' <strong>Visibility</strong>: '+weather.visibility+'</p>';
                html += '<p><strong>Heat Index</strong>: '+weather.heatindex+'"></p>';
                html += '<p><strong>Sunrise</strong>: '+weather.sunrise+' - <strong>Sunset</strong>: '+weather.sunset+'</p>';
                html += '<p><strong>Tomorrow\'s Date</strong>: '+weather.tomorrow.day+' '+weather.tomorrow.date+'<br /><strong>Tomorrow\'s High/Low</strong>: '+weather.tomorrow.high+'/'+weather.tomorrow.low+'<br /><strong>Tomorrow\'s Forecast</strong>: '+weather.tomorrow.forecast+'<br /> <strong>Tomorrow\'s Image</strong>: '+weather.tomorrow.image+'</p>';
                html += '<p><strong>Last updated</strong>: '+weather.updated+'</p>';
                html += '<p><a href="'+weather.link+'">View forecast at Yahoo! Weather</a></p>';

                $("#weather").html(html);
        },
        error: function(error) {
                $("#weather").html("<p>"+error+"</p>");
        }
});
</script>

4. The markup

<div id="weather2"></div>
<div id="weather"></div>

5. All default options.

location: '',
woeid: '',
unit: 'f',
success: function(weather){},
error: function(message){}

Change logs:

v3.1.0 (2016-01-30)

• Removing deprecated geo.placefinder and using geo.places instead.
• Fixed error callback to correctly return an error message.

v3.0.2 (2014-06-03)

• Fixed result issue when more than one location was returned.

v3.0.1 (2014-05-23)

• Fixed bug in forecast thumbnail and images.

v3.0 (2014-05-18)

• Complete rewrite! Removed over 100 lines of code without losing functionality.
• Now < 4.0 kB in size.
• Added forecast thumbnail image.
• Removed tomorrow in favor of forecast.
• Fixed http/https issue on API call #79 and images.

v2.7.0 (2014-04-18)

• Added gulp and a build/release process.
• Fix for 3200 (not available) condition code and related image.
• Fixed my assumption of query being present.
• Some general code cleanup.

v2.6.0 (2014-02-27)

• Encoding URI for API call.
• Fixed formatting issues.
• Fixed alt temps bug.

v2.5.0 (2014-02-05)

• update

v2.4.0 (2014-01-23)

• update

v2.0.2 (2013-06-09)

• Added high and low alt temps, added alt temp unit

---

This awesome jQuery plugin is developed by monkeecreate. For more Advanced Usages, please check the demo page or visit the official website.