Weather App

/*Downloaded from https://www.codeseek.co/--Gordon--/weather-app-PKZzXV */
.block {
	background-color: black;
	opacity: 0.75;
	color: white;
	padding: 50px;
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	border-radius: 15px;
	font-size: 1.5em;
	padding-bottom: 3%;
}

.spacer {
	padding: 5%;
}

body {
	background: no-repeat center center fixed;
	-webkit-background-size: cover;
	-mox-background-size: cover;
	background-size: cover;
}


#footer {
	background-color: black;
	opacity: 0.75;
	color: white;
	padding: 20px 0px 0px 120px;
	width: 35%;
	margin-right: auto;
	margin-left: auto;
	border-radius: 15px;
	font-size: 24px;
	padding-bottom: 3%;
	
}

#toggle {
	margin: 150px;
	font-size: 20px;
}

/*Downloaded from https://www.codeseek.co/--Gordon--/weather-app-PKZzXV */
/* This app fetches a user's geolocation using latitude/longitude
 data and delivers local current weather in return, using the 
 www.openweathermap.com API */

$(function(){
	
	var C = false;
	var apiData;
	
	var backgroundImg = [
		// 299
		"Thunderstorm- https://dreamlandia.com/images/T/thunderstorm.jpg", 
		// 499 drizzle
		"https://img07.deviantart.net/ea88/i/2012/198/6/b/drizzle__by_niki91-d57kcpt.jpg",
		// 599 rain
		"https://www.scienceabc.com/wp-content/uploads/2015/05/Walking-in-Rain.jpg",
		// 699 snow
		"https://i.funny.pho.to/preview/snow_effect/falling_snow_effect.jpeg",
		// 799 fog
		"https://www2.shutterstock.com/blog/wp-content/uploads/sites/5/2017/01/white-fog-evergreen-1024x683.jpg",
		// 800 clear
		"https://ak5.picdn.net/shutterstock/videos/890446/thumb/1.jpg",
		// >800 cloudy
		"https://brunelwriterblog.files.wordpress.com/2014/05/treeinclouds.jpg",
		// appid=de3cf8ea4a51adc3c85e1727f930042c 
	]
	// display temps in Fahrenheit/Celsius
	function displayTemp(F, C){
		if (C) return Math.round((F - 32) * (5/9)) + "° C";
		return Math.round(F) + "° F";
	}
	// render data
	function render(data, C){
		
		var currentWeather = data.weather[0].description;
		var currentTemp = displayTemp(data.main.temp, C);
		var icon = data.weather[0].icon;
		
		$("#currentTemp").html(currentTemp);
		$("#currentWeather").html(currentWeather);
		
		var iconSrc = "https://openweathermap.org/img/w" + icon + ".png";
		$("#currentTemp").prepend("<img src=" +iconSrc + ">");
	}
	// get user location using latitude/longitude
	$.getJSON("https://freegeoip.net/json/", function(location){
		//console.log(location); success
		$("#country").html(location.country_name);
		$("#city").html(location.city);
		$("#latitude").html(location.latitude);
		$("#longitude").html(location.longitude);
		
		$.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=" + location.latitude + "&lon=" + location.longitude + "&units=imperial&APPID=81596f0998590acf3d21e58d3e7b4215", function(data){
			apiData = data;
			//console.log(apiData); success
			render(apiData, C);
			$("#toggle").click(function(){
				C = !C;
				render(apiData, C);
				
			})
			
			var id = data.weather[0].id,
			 		bgIndex,
					bgId = [299, 499, 599, 699, 799, 800];
			
			bgId.push(id);
			bgIndex = bgId.sort().indexOf(id);
			//console.log(bgId); success
			
			$("body").css('background-image', 'url(' + backgroundImg[bgIndex] + ')');
			console.log(backgroundImg[bgIndex]); 
		})
	})
	
})