amjohnson38/FreeCodeCamp Weather App Project: Show Me The Weather .markdown

## FreeCodeCamp Weather App Project: Show Me The Weather .markdown

      
    Raw
  

              FreeCodeCamp Weather App Project: Show Me The Weather .markdown
            
          
    FreeCodeCamp Weather App Project: Show Me The Weather

The purpose of this project was to build a weather app where the user can see the weather at their current location,  receive  the temperature in either Fahrenheit or Celsius if they desire, and also include a  picture  to reflect the weather in the given location.   In order you to get the full effect of this project, please make sure that you have used (https instead of http) in the Codepen address link.
A Pen by  Angela Johnson on CodePen.
License.

  
## index.html
<html>

<head>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Show Me The Weather</title>
</head>

<body>
	<div class = "backgroundContainer">
	<div class="titleContainer container">
		<h1 class="appTitle">Show Me The Weather</h1>
	</div>
	<div class="data container text-center">

		<div id="location"></div>


		<div id="dateTime"></div>


		<div id="weatherType"></div>


		<div id="airMoisture"></div>


		<div id="wind"></div>


		<div id="temp">
			<p id="celsiusTemp"></p>
			<p id="farenheitTemp"></p>
			<button class="btn btn-primary btn-lg" id="button">&#8451 / &#8457</button>
		</div>
	</div>
</body>
	<footer>
		<p>Created and designed by Angela Johnson</p>
		<p>Copyright &copy; 2016. All rights reserved.</p>
	</background>
</html>

## script.js
$(document).ready(function() {
	// call function to get the user's location
	getUserLocation();

   var momemntDate = moment();

   console.log(momemntDate.format('ddd MMM, YYYY'));
   var dateString = momemntDate.format('ddd MMM DD, YYYY');
  //display the date and time
    // var today = new Date();
    // console.log("date " + today);
  document.getElementById("dateTime").innerHTML = moment().format("MMMM Do YYYY, h:mm:ss a");

	//allows the button to display either farenheit or celsius when clicked
	$("#button").click(function() {
		$("#farenheitTemp").toggle();
		$("#celsiusTemp").toggle();
	});

});

//get the user's location

var getUserLocation = function() {
	// Geolocation Data Locator
	var LATITUDE, LONGITUDE;

	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
			function(position) { // geolocation success
				LONGITUDE = position.coords.longitude;
				LATITUDE = position.coords.latitude;
				// call the get weather and get location functions
				getWeather(LATITUDE, LONGITUDE);
				getLocationName(LATITUDE, LONGITUDE);
			},
			function(positionError) { // geolocation error
				console.warn("ERROR(' + positionError.code + '): " + positionError.message);
				 alert("Please enable geolocation.");
			});
	}

};

var getLocationName = function(lat, long) {
	var locationCall = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + long + "&key=AIzaSyCViLYBfAt-182hIVoBJU_4uMOVWRMbTo8";
	console.log(locationCall);

	$.ajax({
		url: locationCall,
		success: function(data) {
			var city = data.results[0].address_components[2].long_name;
			var locObj = {
				city: city
			};
			console.log(city);
			displayLocation(locObj);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			console.log("error getting location");
			console.log(jqXHR);
			console.log(textStatus);
			console.log(errorThrown);
		}

	});
};

/*****************************************************************************
 * getWeather
 * 		call the weather API and get the weather information
 */
var getWeather = function(lat, long) { //API with geolocation
	var apiCall = "https://api.forecast.io/forecast/" + "29bbab42b5f516976fdfa806e68d54d6" + "/" +
		+lat + "," + long;
	console.log(apiCall);

	$.ajax({
		url: apiCall,
		dataType: "jsonp",
		success: function(data) {
			var weatherDescrip = data.currently.summary;
			var airMoisture = data.currently.humidity;
			var farenheit = data.currently.temperature;
			var windSpeed = data.currently.windSpeed;
			var weatherIcon = data.currently.icon;
			var weatherObj = {
				weatherDescrip: weatherDescrip,
				airMoisture: airMoisture,
				farenheit: farenheit,
				windSpeed: windSpeed,
				weatherIcon: weatherIcon
			};
			displayWeather(weatherObj);
			console.log("here");
			console.log(data);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			console.log("error getting weather");
			console.log(jqXHR);
			console.log(textStatus);
			console.log(errorThrown);

		}

	});

};
// display the location data via the html element assigned
function displayLocation(location) {
	$("#location").html(location.city);
}
//display the type of weather via the html element assigned
function displayWeather(weather) {
	$("#weatherType").html(weather.weatherDescrip);

//allows the background picture to change as the weather.icon data from the api changes, which is dependent on the type of weather occurring.
	var backgroundImageChange = weather.weatherIcon;
	var weatherImageName;
	switch (backgroundImageChange) {
		case "clear-day":
			weatherImageName = "v1464200456/photo-1422405153578-4bd676b19036_amruhd.jpg";
			break;
		case "clear-night":
			weatherImageName = "v1464200354/photo-1443456066412-3e3ea69ee37c_nxzzyv.jpg";
			break;
		case "fog":
			weatherImageName = "v1464200391/photo-1434532628716-fb9cef84f469_ip1wjz.jpg";
			break;
		case "sleet":
			weatherImageName = "v1464398173/nNsxaPH_r57oy4.jpg";
			break;
		case "rain":
			weatherImageName = "v1464200393/photo-1433863448220-78aaa064ff47_xfu5hs.jpg";
			break;
		case "wind":
			weatherImageName = "v1464200415/7a2fd8ac_uokc4h.jpg";
			break;
		case "cloudy":
			weatherImageName = "v1464200375/photo-1448032279986-c25cf997c38e_fmfkk8.jpg";
			break;
		case "snow":
			weatherImageName = "v1464200361/photo-1431036101494-66a36de47def_ugasc1.jpg";
			break;
		case "partly-cloudy-day":
			weatherImageName = "v1464200436/158H_hkwqzm.jpg";
			break;
		case "partly-cloudy-night":
			weatherImageName = "v1464398621/EyXTy5t_hmybfw.jpg";
			break;
		case "hail":
			weatherImageName = "v1464200423/hail_r6kprs.jpg";
			break;
		case "thunderstorm":
			weatherImageName = "v1464398837/j3MHfVb_ij1uyb.jpg";
			break;
		case "tornado":
			weatherImageName = "v1464200424/9WTNHBFJUX_upj8yp.jpg";
			break;
		default:
			weatherImageName = "v1464200420/photo-1460500063983-994d4c27756c_rgonym.jpg";
			break;
	}
	var imgURLString = "https://res.cloudinary.com/angiemjohnson/image/upload/" + weatherImageName;


	console.log(imgURLString);
// connects the background image to the body of the app.
	$(".backgroundContainer").css("background-image", "url(" + imgURLString + ")");


	//Displaying humidity value
	var humidity = humidityToPercent(weather.airMoisture);
	$("#airMoisture").html(humidity + "% " + " Humidity");
	//Displaying windspeed in mph as oppose to miles/sec
	var windSpeedChange = windSpeedConversion(weather.windSpeed);
	$("#wind").html(windSpeedChange + " mph " + " wind");

	//calling the function celToFar to convert from Farenheit to Celsius
	var cTemp = farToCel(weather.farenheit);
	// Displaying Celsius and Farenheit values
	$("#celsiusTemp").html(cTemp + "&#8451");
	$("#farenheitTemp").html(weather.farenheit.toFixed(0) + "&#8457");

}

//convert humidity to a percent
function humidityToPercent(airMoisture) {
	return (airMoisture * 100).toFixed(0);
}

// convert farenheit to celsius
function farToCel(farenheit) {
	return ((farenheit - 32) * 5 / 9).toFixed(0);
}

// rounds the wind value to the nearest integer
function windSpeedConversion(windSpeed) {
	return Math.round(windSpeed);
}

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>

## Show Me The Weather .markdown

      
    Raw
  

              Show Me The Weather .markdown
            
          
    Show Me The Weather

A Pen by [ Angela Johnson]
License.

  
## style.css
html {
   margin: 0px;
	padding: 0px;
   height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

.backgroundContainer{
	background: black;
	padding: 5em;
	/*background: no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
}

.titleContainer {
	margin-bottom: 150px;
}

.appTitle {
	text-align: center;
	font-size: 60px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: thick;
	color: white;
	2px 2px 1px #20293F,
	-2px -2px 1px #20293F,
	-2px 2px 1px #20293F,
	2px -2px 1px #20293F;
}

.container {
	-webkit-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.75);
	border-style: solid;
	border-width: thin;
	border-color: lightgray;
	font-weight: 700;
	color: white;
	font-size: 30px;
	text-shadow: 0 0 15px #20293F;
	font-family: Verdana, Geneva, sans-serif
}

.data{
	padding: 1em;
}
#celsiusTemp {
	display: none;
}


.myButton {
	-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
	box-shadow:inset 0px -3px 7px 0px #29bbff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #0b0e07;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:9px 23px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
	background-color:#0688fa;
}
.myButton:active {
	position:relative;
	top:1px;
}

footer{
	padding: 100px;
	font-weight:700;
	color: white;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<html>

	<head>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Show Me The Weather</title>
	</head>

	<body>
	<div class = "backgroundContainer">
	<div class="titleContainer container">
	<h1 class="appTitle">Show Me The Weather</h1>
	</div>
	<div class="data container text-center">

	<div id="location"></div>


	<div id="dateTime"></div>


	<div id="weatherType"></div>


	<div id="airMoisture"></div>


	<div id="wind"></div>


	<div id="temp">
	<p id="celsiusTemp"></p>
	<p id="farenheitTemp"></p>
	<button class="btn btn-primary btn-lg" id="button">&#8451 / &#8457</button>
	</div>
	</div>
	</body>
	<footer>
	<p>Created and designed by Angela Johnson</p>
	<p>Copyright © 2016. All rights reserved.</p>
	</background>
	</html>
	$(document).ready(function() {
	// call function to get the user's location
	getUserLocation();

	var momemntDate = moment();

	console.log(momemntDate.format('ddd MMM, YYYY'));
	var dateString = momemntDate.format('ddd MMM DD, YYYY');
	//display the date and time
	// var today = new Date();
	// console.log("date " + today);
	document.getElementById("dateTime").innerHTML = moment().format("MMMM Do YYYY, h:mm:ss a");

	//allows the button to display either farenheit or celsius when clicked
	$("#button").click(function() {
	$("#farenheitTemp").toggle();
	$("#celsiusTemp").toggle();
	});

	});

	//get the user's location

	var getUserLocation = function() {
	// Geolocation Data Locator
	var LATITUDE, LONGITUDE;

	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
	function(position) { // geolocation success
	LONGITUDE = position.coords.longitude;
	LATITUDE = position.coords.latitude;
	// call the get weather and get location functions
	getWeather(LATITUDE, LONGITUDE);
	getLocationName(LATITUDE, LONGITUDE);
	},
	function(positionError) { // geolocation error
	console.warn("ERROR(' + positionError.code + '): " + positionError.message);
	alert("Please enable geolocation.");
	});
	}

	};

	var getLocationName = function(lat, long) {
	var locationCall = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + long + "&key=AIzaSyCViLYBfAt-182hIVoBJU_4uMOVWRMbTo8";
	console.log(locationCall);

	$.ajax({
	url: locationCall,
	success: function(data) {
	var city = data.results[0].address_components[2].long_name;
	var locObj = {
	city: city
	};
	console.log(city);
	displayLocation(locObj);
	},
	error: function(jqXHR, textStatus, errorThrown) {
	console.log("error getting location");
	console.log(jqXHR);
	console.log(textStatus);
	console.log(errorThrown);
	}

	});
	};

	/*****************************************************************************
	* getWeather
	* call the weather API and get the weather information
	*/
	var getWeather = function(lat, long) { //API with geolocation
	var apiCall = "https://api.forecast.io/forecast/" + "29bbab42b5f516976fdfa806e68d54d6" + "/" +
	+lat + "," + long;
	console.log(apiCall);

	$.ajax({
	url: apiCall,
	dataType: "jsonp",
	success: function(data) {
	var weatherDescrip = data.currently.summary;
	var airMoisture = data.currently.humidity;
	var farenheit = data.currently.temperature;
	var windSpeed = data.currently.windSpeed;
	var weatherIcon = data.currently.icon;
	var weatherObj = {
	weatherDescrip: weatherDescrip,
	airMoisture: airMoisture,
	farenheit: farenheit,
	windSpeed: windSpeed,
	weatherIcon: weatherIcon
	};
	displayWeather(weatherObj);
	console.log("here");
	console.log(data);
	},
	error: function(jqXHR, textStatus, errorThrown) {
	console.log("error getting weather");
	console.log(jqXHR);
	console.log(textStatus);
	console.log(errorThrown);

	}

	});

	};
	// display the location data via the html element assigned
	function displayLocation(location) {
	$("#location").html(location.city);
	}
	//display the type of weather via the html element assigned
	function displayWeather(weather) {
	$("#weatherType").html(weather.weatherDescrip);

	//allows the background picture to change as the weather.icon data from the api changes, which is dependent on the type of weather occurring.
	var backgroundImageChange = weather.weatherIcon;
	var weatherImageName;
	switch (backgroundImageChange) {
	case "clear-day":
	weatherImageName = "v1464200456/photo-1422405153578-4bd676b19036_amruhd.jpg";
	break;
	case "clear-night":
	weatherImageName = "v1464200354/photo-1443456066412-3e3ea69ee37c_nxzzyv.jpg";
	break;
	case "fog":
	weatherImageName = "v1464200391/photo-1434532628716-fb9cef84f469_ip1wjz.jpg";
	break;
	case "sleet":
	weatherImageName = "v1464398173/nNsxaPH_r57oy4.jpg";
	break;
	case "rain":
	weatherImageName = "v1464200393/photo-1433863448220-78aaa064ff47_xfu5hs.jpg";
	break;
	case "wind":
	weatherImageName = "v1464200415/7a2fd8ac_uokc4h.jpg";
	break;
	case "cloudy":
	weatherImageName = "v1464200375/photo-1448032279986-c25cf997c38e_fmfkk8.jpg";
	break;
	case "snow":
	weatherImageName = "v1464200361/photo-1431036101494-66a36de47def_ugasc1.jpg";
	break;
	case "partly-cloudy-day":
	weatherImageName = "v1464200436/158H_hkwqzm.jpg";
	break;
	case "partly-cloudy-night":
	weatherImageName = "v1464398621/EyXTy5t_hmybfw.jpg";
	break;
	case "hail":
	weatherImageName = "v1464200423/hail_r6kprs.jpg";
	break;
	case "thunderstorm":
	weatherImageName = "v1464398837/j3MHfVb_ij1uyb.jpg";
	break;
	case "tornado":
	weatherImageName = "v1464200424/9WTNHBFJUX_upj8yp.jpg";
	break;
	default:
	weatherImageName = "v1464200420/photo-1460500063983-994d4c27756c_rgonym.jpg";
	break;
	}
	var imgURLString = "https://res.cloudinary.com/angiemjohnson/image/upload/" + weatherImageName;


	console.log(imgURLString);
	// connects the background image to the body of the app.
	$(".backgroundContainer").css("background-image", "url(" + imgURLString + ")");



	//Displaying humidity value
	var humidity = humidityToPercent(weather.airMoisture);
	$("#airMoisture").html(humidity + "% " + " Humidity");
	//Displaying windspeed in mph as oppose to miles/sec
	var windSpeedChange = windSpeedConversion(weather.windSpeed);
	$("#wind").html(windSpeedChange + " mph " + " wind");

	//calling the function celToFar to convert from Farenheit to Celsius
	var cTemp = farToCel(weather.farenheit);
	// Displaying Celsius and Farenheit values
	$("#celsiusTemp").html(cTemp + "&#8451");
	$("#farenheitTemp").html(weather.farenheit.toFixed(0) + "&#8457");

	}

	//convert humidity to a percent
	function humidityToPercent(airMoisture) {
	return (airMoisture * 100).toFixed(0);
	}

	// convert farenheit to celsius
	function farToCel(farenheit) {
	return ((farenheit - 32) * 5 / 9).toFixed(0);
	}

	// rounds the wind value to the nearest integer
	function windSpeedConversion(windSpeed) {
	return Math.round(windSpeed);
	}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
	html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	}

	body {
	margin: 0;
	height: 100%;
	}

	.backgroundContainer{
	background: black;
	padding: 5em;
	/*background: no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
	}

	.titleContainer {
	margin-bottom: 150px;
	}

	.appTitle {
	text-align: center;
	font-size: 60px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: thick;
	color: white;
	2px 2px 1px #20293F,
	-2px -2px 1px #20293F,
	-2px 2px 1px #20293F,
	2px -2px 1px #20293F;
	}

	.container {
	-webkit-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.75);
	border-style: solid;
	border-width: thin;
	border-color: lightgray;
	font-weight: 700;
	color: white;
	font-size: 30px;
	text-shadow: 0 0 15px #20293F;
	font-family: Verdana, Geneva, sans-serif
	}

	.data{
	padding: 1em;
	}
	#celsiusTemp {
	display: none;
	}



	.myButton {
	-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
	box-shadow:inset 0px -3px 7px 0px #29bbff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #0b0e07;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:9px 23px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
	}
	.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
	background-color:#0688fa;
	}
	.myButton:active {
	position:relative;
	top:1px;
	}

	footer{
	padding: 100px;
	font-weight:700;
	color: white;
	}