Use the OpenWeatherMap api to retrieve current weather conditions by providing an address or latitude and longitude. Uses the OpenWeatherMap API (http://openweathermap.org/) to get the data. Data is returned in JSON format. For this test, input an address and hit the "Get Weather" button. The current weather conditions will be shown in the texta…

get-weather.html

<div class="row">
	<div class="col-md-2 col-sm-2 col-xs-2">
		<p><button class="btn btn-primary btn-sm" id="get-weather-btn"><span>Get Weather</span></button></p>
	</div><!-- .col -->
	<div class="col-md-10 col-sm-10 col-xs-10">
		<div class="panel panel-default">
			<div class="panel-heading">OpenWeatherMap API Response</div>
			<div class="panel-body">
				<p>Enter Address: <input type="text" id="address" class="form-control" placeholder="City, State"/></p>
				<textarea id="weather" class="form-control"></textarea>
			</div>
		</div>
	</div><!-- .col -->
</div><!-- .row -->

<script>
	"use strict";

	$(document).ready(function() {

		// get weather button functionality
		$("#get-weather-btn").click(function(event){
			event.preventDefault();
			var address = $("#address").val();													// get address from input field
			if(address != '') {
				$("#address").val("Retrieving weather...");										// write temporary response while we get the weather
				$.getJSON( "http://api.openweathermap.org/data/2.5/weather?q="+encodeURIComponent(address)+"&units=imperial", function(data) {	// add '&units=imperial' to get U.S. measurements
					var currWeather					= new Array();								// create array to hold our weather response data
					currWeather['currTemp']			= Math.round(data.main.temp);				// current temperature
					currWeather['highTemp']			= Math.round(data.main.temp_max);			// today's high temp
					currWeather['lowTemp']			= Math.round(data.main.temp_min);			// today's low temp
					currWeather['humidity']			= Math.round(data.main.humidity);			// humidity (in percent)
					currWeather['pressure']			= data.main.pressure * 0.02961339710085;	// barometric pressure (converting hPa to inches)
					currWeather['pressure']			= currWeather['pressure'].toFixed(2);		// barometric pressure (rounded to 2 decimals)
					
					currWeather['description']		= data.weather[0].description;				// short text description (ie. rain, sunny, etc.)
					currWeather['icon']				= "http://openweathermap.org/img/w/"+data.weather[0].icon+".png";	// 50x50 pixel png icon
					currWeather['cloudiness']		= data.clouds.all;							// cloud cover (in percent)
					currWeather['windSpeed']		= Math.round(data.wind.speed);				// wind speed
					
					currWeather['windDegree']		= data.wind.deg;							// wind direction (in degrees)
					currWeather['windCompass']		= Math.round((currWeather['windDegree'] -11.25) / 22.5);	// wind direction (compass value)
					
					// array of direction (compass) names
					var windNames					= new Array("North","North Northeast","Northeast","East Northeast","East","East Southeast", "Southeast", "South Southeast","South","South Southwest","Southwest","West Southwest","West","West Northwest","Northwest","North Northwest");
					// array of abbreviated (compass) names
					var windShortNames				= new Array("N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW");
					currWeather['windDirection']	= windNames[currWeather['windCompass']];	// convert degrees and find wind direction name
					
					
					var response = "Current Weather: "+currWeather['currTemp']+"\xB0 and "+currWeather['description'];
					
					if(currWeather['windSpeed']>0) {											// if there's wind, add a wind description to the response
						response = response+" with winds out of the "+windNames[currWeather['windCompass']]+" at "+currWeather['windSpeed']+" miles per hour";
					}
					
					$("#address").val(address);													// write back address to field
					$("#weather").text(response);												// write weather response to textarea
					console.log(data);															// log weather data for reference (json format) 
				});
			} else {
				$("#address").val("You must enter an address.");								// respond w/error if no address entered
			}
		});
	});
</script>