Simple Weather

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<div id="weather"></div>

CSS

.weather.icon-0:before {
    content:"code: 0";
}
.weather.icon-1:before {
    content:"code: 1";
}
.weather.icon-2:before {
    content:"code: 2";
}
.weather.icon-3:before {
    content:"code: 3";
}
.weather.icon-4:before {
    content:"code: 4";
}
.weather.icon-5:before {
    content:"code: 5";
}
.weather.icon-6:before {
    content:"code: 6";
}
.weather.icon-7:before {
    content:"code: 7";
}
.weather.icon-8:before {
    content:"code: 8";
}
.weather.icon-9:before {
    content:"code: 9";
}
.weather.icon-10:before {
    content:"code: 10";
}
.weather.icon-11:before {
    content:"code: 11";
}
.weather.icon-12:before {
    content:"code: 12";
}
.weather.icon-13:before {
    content:"code: 13";
}
.weather.icon-14:before {
    content:"code: 14";
}
.weather.icon-15:before {
    content:"code: 15";
}
.weather.icon-16:before {
    content:"code: 16";
}
.weather.icon-17:before {
    content:"code: 17";
}
.weather.icon-18:before {
    content:"code: 18";
}
.weather.icon-19:before {
    content:"code: 19";
}
.weather.icon-20:before {
    content:"code: 20";
}
.weather.icon-21:before {
    content:"code: 21";
}
.weather.icon-22:before {
    content:"code: 22";
}
.weather.icon-23:before {
    content:"code: 24";
}
.weather.icon-25:before {
    content:"code: 25";
}
.weather.icon-26:before {
    content:"code: 26";
}
.weather.icon-27:before {
    content:"code: 27";
}
.weather.icon-28:before {
    content:"code: 28";
}
.weather.icon-29:before {
    content:"code: 29";
}
.weather.icon-30:before {
    content:"code: 30";
}
.weather.icon-31:before {
    content:"code: 31";
}
.weather.icon-32:before {
    content:"code: 32";
}
.weather.icon-33:before {
    content:"code: 33";
}
.weather.icon-34:before {
    content:"code: 34";
}
.weather.icon-35:before {
    content:"code: 35";
}
.weather.icon-36:before {
    content:"code: 36";
}
.weather.icon-37:before {
    content:"code: 37";
}
.weather.icon-38:before {
    content:"code: 38";
}
.weather.icon-39:before {
   ...

JavaScript

$(document).ready(function () {
    $.simpleWeather({
        location: 'Melborune, Australia',
        unit: 'c',
        success: function (weather) {
            html = '<h2><i class="icon-5"></i>' + weather.temp + '&deg;' + weather.units.temp + '</h2>';
            html += '<ul><li><i style="color:#000" class="icon-' + weather.code + '"></i>' + weather.city + ', ' + weather.region + '</li>';
            html += '<li class="currently">' + weather.currently + '</li>';
            html += '<li>' + weather.alt.temp + '&deg;C</li></ul>';

            for (var i = 0; i < weather.forecast.length; i++) {
                img = '<img style="float:left;" width="125px" src="' + weather.forecast[i].image + '">';
                html += '<p>' + img + '<i style="color:#000" class="icon-' + weather.code + '"></i>' + weather.forecast[i].day + ': ' + weather.forecast[i].high + '</p>';
            }

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