Dynamic Weather

by Laurie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data-2010-2020.min.js"></script>
<div class="weatherContainer">
    <div id="weather_new_york" city="new_york" continent="America" woeid="2459115" degrees="f" class="weather"></div>
    <div id="weather_chicago" city="chicago" continent="America" woeid="2379574" degrees="f" class="weather"></div>
    <div id="weather_los_angeles" city="los_angeles" continent="America" woeid="2468964" degrees="f" class="weather"></div>
    <div id="weather_tokyo" city="tokyo" continent="Asia" woeid="1118370" degrees='c' class="weather"></div>
    <div class="clearFix"></div>
    <!-- END clearFloats -->
</div>
<!-- END weatherContainer DIV -->
<p class="time" id="time_los_angeles" city="new_york" continent="America"></p>
<p class="time" id="time_chicago" city="chicago" continent="America"></p>
<p class="time" id="time_pasadena" city="los_angeles" continent="America"></p>
<p class="time" id="time_tokyo" city="tokyo" continent="Asia"></p>

CSS

body {
     padding: 45px 0;
     font: 13px'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 .weatherContainer {
     margin: 0px auto;
     width: 100%;
 }
 .weatherContainer div p {
     margin: 0px 0px 0px 0px;
 }
 .weather {
     width: 200px;
     float: left;
     text-align: center;
     text-transform: uppercase;
     margin-bottom:40px;
 }
 .weather h2 {
     margin: 0 0 8px;
     color: #fff;
     font-size: 150px;
     font-weight: 300;
     text-align: center;
     text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
 }
 .weather ul {
     margin: 0;
     padding: 0;
 }
 .weather li {
     background: #fff;
     background: rgba(255, 255, 255, 0.90);
     padding: 20px;
     display: inline-block;
     border-radius: 5px;
 }
 .weather .currently {
     margin: 0 20px;
 }
 @font-face {
     font-family:'weather';
     src: url('/SiteAssets/font/artillWeather/artill_clean_icons.eot');
     src: url('/SiteAssets/font/artillWeather/artill_clean_icons.eot?#iefix') format('embedded-opentype'), url('/SiteAssets/font/artillWeather/artill_clean_icons.woff') format('woff'), url('/SiteAssets/font/artillWeather/artill_clean_icons.ttf') format('truetype'), url('/SiteAssets/font/artillWeather/artill_clean_icons.svg#artill_clean_weather_iconsRg') format('svg');
     font-weight: normal;
     font-style: normal;
 }
 i {
     font-family: weather;
     font-size: 60px;
     font-weight: normal;
     font-style: normal;
     line-height: 1.0;
 }
 .icon-0:before {
     content:":";
 }
 .icon-1:before {
     content:"p";
 }
 .icon-2:before {
     content:"S";
 }
 .icon-3:before {
     content:"Q";
 }
 .icon-4:before {
     content:"S";
 }
 .icon-5:before {
     content:"W";
 }
 .icon-6:before {
     content:"W";
 }
 .icon-7:before {
     content:"W";
 }
 .icon-8:before {
     content:"W";
 }
 .icon-9:before {
     content:"I";
 }
 .icon-10:before {
     content:"W";
 }
 .icon-11:before {
     content:"I";
 }
 .icon-12:before {
     content:"I";
...

JavaScript

$(document).ready(function () {
    $('.weather').each(function () {
        var city = $(this).attr("city");
        var woeid = $(this).attr("woeid");
        var degrees = $(this).attr("degrees");
        var continent = $(this).attr("continent");
        
        $.simpleWeather({
            zipcode: '',
            woeid: woeid,
            location: '',
            unit: degrees,
            success: function (weather) {
                
                if (continent == 'America'){
                    html = '<p>' + weather.city + ', ' + weather.region + '</p>';
                }
                else {
                    html = '<p>' + weather.city + ', ' + weather.country + '</p>';
                }
                //html += '<p class="time" id="'+city+'></p>';
                //html += '<p>' + weather.updated + '</p>';
                html += '<p><i class="icon-' + weather.code + '"></i> ' + weather.temp + '&deg;' + weather.units.temp + '<p>';
                html += '<p>' + weather.currently + '<p>';


                $('#weather_' + city).html(html);
            },
            error: function (error) {
                $('#weather_' + city).html('<p>' + error + '</p>');
            }
        });
    });
   
    
     $(function () {
        setInterval(function () {
            $('.time').each(function () {
                var city = $(this).attr("city");
                var continent = $(this).attr("continent");
                //$(this).text(city);
                var utc = moment.utc().format('YYYY-MM-DD HH:mm:ss');
                var localTime = moment.utc(utc).toDate();
                cityTime = moment(localTime).tz(continent + "/" + city).format('ddd MMM D YYYY, h:mm:ss a z');
                $(this).text(city+ ': '+cityTime);
            });
        }, 1000);
         
          
         
         
    });
         
         $('.time').each(function () {
             var city = $(this).attr("city");
             //$('#weather_' +...