JSFiddle - React, Tailwind, and code Playground

by javapatriot

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<div id="monthly-calendar">
		<ul id="weather_report" class="week ng-scope first">
		</ul>
	</div>
	<div>
		<table class="tg" id="conv_table_one" border='1'>
			<tr>
				<th class="tg-yw4l">Call Date</th>
				<th class="tg-yw4l">Tracking Number</th>
				<th class="tg-yw4l">Disposition</th>
				<th class="tg-yw4l">Duration</th>
				<th class="tg-yw4l">ID</th>
				<th class="tg-yw4l">Is Outbound</th>
				<th class="tg-yw4l">OUID</th>
				<th class="tg-yw4l">Repeat Call</th>
				<th class="tg-yw4l">Caller ID</th>
				<th class="tg-yw4l">Ring To Number</th>
				<th class="tg-yw4l">Play Audio File</th>
			</tr>
		</table>
		<table class="tg" id="conv_table_two" border='1'>
			<tr>
				<th class="tg-yw4l">Call Date</th>
				<th class="tg-yw4l">Tracking Number</th>
				<th class="tg-yw4l">Disposition</th>
				<th class="tg-yw4l">Duration</th>
				<th class="tg-yw4l">ID</th>
				<th class="tg-yw4l">Is Outbound</th>
				<th class="tg-yw4l">OUID</th>
				<th class="tg-yw4l">Repeat Call</th>
				<th class="tg-yw4l">Caller ID</th>
				<th class="tg-yw4l">Ring To Number</th>
				<th class="tg-yw4l">Play Audio File</th>
			</tr>
		</table>		
	</div>

JavaScript

jQuery(function() { 
		
		var ConvExtID = 'jdv_electric';
		var ConvAPIKey = '369281456857b6910b0b8e0b1d7b046c';   
		var ConvAPISec= '%241%24SVUTmT1e%24hqQHTUvAFOoUuZ5bFVqle.';

		var NewConvData ='https://api.logmycalls.com/services/getCallDetails?criteria[external_ouid]='+ConvExtID+'&criteria[start_calldate]=2015-12-01&criteria[end_calldate]=2015-12-31&api_key='+ConvAPIKey+'&api_secret='+ConvAPISec+'&sort_by=id&sort_order=asc';
		var goaltotal = 'http://dawsonselectric.com/wp-content/plugins/CSAnalytics/lib/data/data-GoalValueTotals.php';
		var WeatherAPI = 'http://api.worldweatheronline.com/premium/v1/past-weather.ashx?q=27560&format=json&date=2015-12-01&enddate=2015-12-31&tp=24&key=5553de26af2e2c672d1042c05800d'
		
		//Creates Table for Weather Data

	var channelHTML = ''
	var DispositionAnswered = '';
	var DispositionNoAnswer = '';
	var TotalCallMin = 0;
	var TotalCount = '';
	var AvgCallDuration = '';
	var ValueCallsSingle = '';
	var ValueCalls = '';	
	var ValueCallMinutes = 0;
	
		jQuery.when(
			jQuery.getJSON(WeatherAPI),
			jQuery.getJSON(goaltotal),
			jQuery.getJSON(NewConvData)
		).done (function (data, data2, data3) {
			var data = data[0].data;
			console.log(data, data2, data3);
			var weatherHTML = '';
			var lookup = {};
			var weather = data.weather;
			for (var i = 0; i < weather.length; ++i) {
				var key = weather[i].date.replace(/-/g,'');
				lookup[key] = i;
				weatherHTML += '<li id="day'+[i]+'" class="day day-container"><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 +...