freeCodeCamp - Show the Local Weather

freecodecamp-show-the-local-weather.markdown

freeCodeCamp - Show the Local Weather

A Pen by GILLES Annthomy on CodePen.

License.

index.html

	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div>
					<h1>freeC<i class="fa fa-cloud" aria-hidden="true"></i>deCamp <br> Local Weather</h1>
					<hr>
					<h3> By Gotama</h3>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div id="data" class="text-center">
					<h2 id="temperature"></h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<div class="icon sun-shower" id="test">
					<div class="cloud"></div>
					<div class="sun">
						<div class="rays"></div>
					</div>
					<div class="rain"></div>
				</div>

				<div class="icon thunder-storm">
					<div class="cloud"></div>
					<div class="lightning">
						<div class="bolt"></div>
						<div class="bolt"></div>
					</div>
				</div>

				<div class="icon cloudy">
					<div class="cloud"></div>
					<div class="cloud"></div>
				</div>
			</div>

			<div class="col-md-12 text-center">
				<div class="icon flurries">
					<div class="cloud"></div>
					<div class="snow">
						<div class="flake"></div>
						<div class="flake"></div>
					</div>
				</div>

				<div class="icon sunny">
					<div class="sun">
						<div class="rays"></div>
					</div>
				</div>

				<div class="icon rainy">
					<div class="cloud"></div>
					<div class="rain"></div>
				</div>
			</div>

		</div>
	</div>

script.js

$(document).ready(function () {
	$(".icon").hide();

	function selectIcon(weather) {
		weather = weather.toLowerCase();
		switch (weather) {
			case "drizzle":
				$(".sun-shower").show();
				break;
			case "thunderstom":
				$(".thunder-storm").show();
				break;
			case "clouds":
				$(".clouds").show();
				break;
			case "snow":
				$(".flurries").show();
				break;
			case "clear":
				$(".sunny").show();
				break;
			case "rain":
				$(".rainy").show();
				break;
			default:
				$(".sunny").show();

		}
	}

	var temp = 0;
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function (position) {
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;
			var url = "http://api.openweathermap.org/data/2.5/weather?APPID=6b6d0e4abc25ddd59453fd3ef8a47104&lat=" + lat + "&lon=" + lon + "&units=metric&lang=fr";
			$.ajax({
				url: url,
				dataType: 'json',
				async: true,
				success: function (city) {
					temp = city.main.temp;
					$("#data").append("<h1>" + city.name + "," + city.sys.country + "</h1>");
					$("#temperature").append(city.main.temp + "°C");
					selectIcon(city.weather[0].main);
				}
			});
		});
	};
	$('#temperature').hover(function () {
		var tempF = 0;
		tempF = temp * 1.8 + 32;
		$main_text = $(this).text();
		$(this).text(tempF + "F");
	}, function () {
		$(this).text($main_text);
	});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

html {
	box-sizing: border-box;
}

html *,
html *:before,
html *:after {
	box-sizing: inherit;
}

body {
	max-width: 42em;
	padding: 2em;
	margin: 0 auto;
	color: black;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	background-color: black;
}

h1,
h2 {
	margin-bottom: 1.375em;
	color: white;
	font-weight: 100;
	font-size: 3em;
	font-family: 'Roboto', Tahoma, sans-serif;
}

#temperature {
	cursor: pointer;
	color: #006dcc;
}

.page-header {
	color: white;
}

p,
a {
	color: rgba(255, 255, 255, 0.3);
	font-size: small;
}

p {
	margin: 1.375rem 0;
}

.icon {
	position: relative;
	display: inline-block;
	width: 12em;
	height: 10em;
	font-size: 1em;
	/* control icon size here */
}

.cloud {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 3.6875em;
	height: 3.6875em;
	margin: -1.84375em;
	background: currentColor;
	border-radius: 50%;
	box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
}

.cloud:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: -0.5em;
	display: block;
	width: 4.5625em;
	height: 1em;
	background: currentColor;
	box-shadow: 0 0.4375em 0 -0.0625em #fff;
}

.cloud:nth-child(2) {
	z-index: 0;
	background: #fff;
	box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
	opacity: 0.3;
	transform: scale(0.5) translate(6em, -3em);
	animation: cloud 4s linear infinite;
}

.cloud:nth-child(2):after {
	background: #fff;
}

.sun {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.5em;
	height: 2.5em;
	margin: -1.25em;
	background: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 0 0.375em #fff;
	animation: spin 12s infinite linear;
}

.rays {
	position: absolute;
	top: -2em;
	left: 50%;
	display: block;
	width: 0.375em;
	height: 1.125em;
	margin-left: -0.1875em;
	background: #fff;
	border-radius: 0.25em;
	box-shadow: 0 5.375em #fff;
}

.rays:before,
.rays:after {
	content: '';
	position: absolute;
	top: 0em;
	left: 0em;
	display: block;
	width: 0.375em;
	height: 1.125em;
	transform: rotate(60deg);
	transform-origin: 50% 3.25em;
	background: #fff;
	border-radius: 0.25em;
	box-shadow: 0 5.375em #fff;
}

.rays:before {
	transform: rotate(120deg);
}

.cloud+.sun {
	margin: -2em 1em;
}

.rain,
.lightning,
.snow {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 3.75em;
	height: 3.75em;
	margin: 0.375em 0 0 -2em;
	background: currentColor;
}

.rain:after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 1.125em;
	height: 1.125em;
	margin: -1em 0 0 -0.25em;
	background: #0cf;
	border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
	box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
	transform: rotate(-28deg);
	animation: rain 3s linear infinite;
}

.bolt {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -0.25em 0 0 -0.125em;
	color: #fff;
	opacity: 0.3;
	animation: lightning 2s linear infinite;
}

.bolt:nth-child(2) {
	width: 0.5em;
	height: 0.25em;
	margin: -1.75em 0 0 -1.875em;
	transform: translate(2.5em, 2.25em);
	opacity: 0.2;
	animation: lightning 1.5s linear infinite;
}

.bolt:before,
.bolt:after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	margin: -1.625em 0 0 -1.0125em;
	border-top: 1.25em solid transparent;
	border-right: 0.75em solid;
	border-bottom: 0.75em solid;
	border-left: 0.5em solid transparent;
	transform: skewX(-10deg);
}

.bolt:after {
	margin: -0.25em 0 0 -0.25em;
	border-top: 0.75em solid;
	border-right: 0.5em solid transparent;
	border-bottom: 1.25em solid transparent;
	border-left: 0.75em solid;
	transform: skewX(-10deg);
}

.bolt:nth-child(2):before {
	margin: -0.75em 0 0 -0.5em;
	border-top: 0.625em solid transparent;
	border-right: 0.375em solid;
	border-bottom: 0.375em solid;
	border-left: 0.25em solid transparent;
}

.bolt:nth-child(2):after {
	margin: -0.125em 0 0 -0.125em;
	border-top: 0.375em solid;
	border-right: 0.25em solid transparent;
	border-bottom: 0.625em solid transparent;
	border-left: 0.375em solid;
}

.flake:before,
.flake:after {
	content: '\2744';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1.025em 0 0 -1.0125em;
	color: #fff;
	list-height: 1em;
	opacity: 0.2;
	animation: spin 8s linear infinite reverse;
}

.flake:after {
	margin: 0.125em 0 0 -1em;
	font-size: 1.5em;
	opacity: 0.4;
	animation: spin 14s linear infinite;
}

.flake:nth-child(2):before {
	margin: -0.5em 0 0 0.25em;
	font-size: 1.25em;
	opacity: 0.2;
	animation: spin 10s linear infinite;
}

.flake:nth-child(2):after {
	margin: 0.375em 0 0 0.125em;
	font-size: 2em;
	opacity: 0.4;
	animation: spin 16s linear infinite reverse;
}


/* Animations */

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cloud {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 0;
		transform: scale(0.5) translate(-200%, -3em);
	}
}

@keyframes rain {
	0% {
		background: #0cf;
		box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
	}
	25% {
		box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
	}
	50% {
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
	}
	100% {
		box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
	}
}

@keyframes lightning {
	45% {
		color: #fff;
		background: #fff;
		opacity: 0.2;
	}
	50% {
		color: #0cf;
		background: #0cf;
		opacity: 1;
	}
	55% {
		color: #fff;
		background: #fff;
		opacity: 0.2;
	}
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" rel="stylesheet" />