JSFiddle - React, Tailwind, and code Playground

by javapatriot

HTML

<section>
		<h1>Current Weather for </h1>
			<div id="monthly-calendar">
				<ul id="citation_report" class="week ng-scope first">
				</ul>
			</div>
	  </section>

CSS

html {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3em;
}	  
	    #monthly-calendar {
			width: 800px;
		}
		.week {
			border-right: 1px solid #ededed;
			border-top: 1px solid white;
			display: table;
			height: 120px;
			position: relative;
			width: 100%;
		}
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

.week .day {
    border: 1px solid #ccc;
    display: block;
    float: left;
    height: 225px;
    margin: 0.05%;
    min-height: 202px;
    text-align: center;
    width: 14.28%;
}
.date {
    background-color: #3c8ed2;
    color: #fff;
    margin-bottom: 20px;
}
.week .day p {
	margin:5px 0;
}
.week .day .hi-temp {
    font-size: 26px;
}
.week .day .lo-temp {
    color: #999;
    font-size: 14px;
}
img {
    border-radius: 50px;
}

JavaScript

var zipcode = '27560';
		var appid = '96afa96cadeb7165258ae95b77fdc';
		var startdate = '2015-10-01';
		var enddate = '2015-10-31';
		var timeperiod ='24';			

        var dataUrl = '//api.worldweatheronline.com/premium/v1/past-weather.ashx?q='+ zipcode +'&format=json&date='+ startdate +'&enddate='+ enddate +'&tp='+ timeperiod +'&key='+ appid	

		var dataUrl2 = '//westbrookfl.com/wp-content/plugins/CSAnalytics/lib/data/data-ChannelData.php'
			
		//Creates Table for Citation Data
$.when(
    $.getJSON(dataUrl),
    $.getJSON(dataUrl2)
).done (function (data) {
				var citationHTML = '';
				jQuery.each(data, function (i) {
				var weather = data.data.weather;
					for (var i = 0; i < weather.length; ++i) {
						citationHTML += '<li id="day'+[i]+'" class="day"><div class="date">' + weather[i].date + '</div><div class="svg-icon"><img src="' + weather[i].hourly[0].weatherIconUrl[0].value + '" /></div><div class="data-wrap col2"><p class="data hi-temp"><span>' + weather[i].maxtempF + '</span><sup class="deg ng-scope" data-ng-if="hasValue()">°</sup></p><p class="data lo-temp"><span>' + weather[i].mintempF + '</span><sup class="deg ng-scope" data-ng-if="hasValue()">°</sup></p></div><p class="data desc">' + weather[i].hourly[0].weatherDesc[0].value + '</p></li>';
					}
				});
				jQuery('#citation_report').append(citationHTML);
			});