JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<!doctype html>

<html>

<head>

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<meta charset="utf-8">

	<title>OpenWeatherMap API jQuery Plugin</title>

	<meta name="description" content="A simple, lightweight jQuery plugin used to display the current weather of any city using the free OpenWeatherMap API.">

	<meta name="author" content="http://michaelynch.com">

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<style>

		/* for presentation only */

		body {
			font: 16px Arial, Helvetica, sans-serif;
			margin: 0;
		}

		.weather-wrapper {
			background: skyblue;
			margin: 5% 0 5% 5%;
			padding: 40px 5%;
			float: left;
			color: white;
			width: 70%;
			max-width: 400px;
		}

		strong {
			color: steelblue;
		}

		.capitalize {
			text-transform: capitalize;
		}

		.hide {
			display: none;
		}

	</style>

</head>

<body lang="en">

	<div class="weather-wrapper hide">

	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	<script type="text/javascript">
	if (typeof jQuery == 'undefined') {
	    document.write(unescape("%3Cscript src='js/lib/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
	}
	</script>

	<script src="//michael-lynch.github.io/open-weather/js/plugins/openweather.min.js"></script>

	<script>

		$(function() {

			$('.weather-temperature').openWeather({
				key: 'c9d49310f8023ee2617a7634de23c2aa',
				city: 'Toronto',
				descriptionTarget: '.weather-description',
				windSpeedTarget: '.weather-wind-speed',
				minTemperatureTarget: '.weather-min-temperature',
				maxTemperatureTarget: '.weather-max-temperature',
				humidityTarget: '.weather-humidity',
				sunriseTarget: '.weather-sunrise',
				sunsetTarget: '.weather-sunset',
				placeTarget: '.weather-place',
				iconTarget: '.weather-icon',
				customIcons: 'img/icons/weather/',
				success: function(data)...