Weather App

In this example below you will see how to do a Weather App with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by --Gordon--, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright --Gordon-- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Weather App</title>
<link rel="stylesheet" href="style.css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="text/javascript" href="app.js">

<body>
 <div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-header">
    <a class="navbar-brand" href="#">Weather App</a>
   </div>
   <!-- navbar-header -->


  </nav>
  <div class="spacer"></div>
  <div class="block">
   <h1 class="text-center"><span id="currentTemp"></span></h1>
   <h1 class="text-center"><span id="currentWeather"></span></h1>
   <span><a href="#" id="toggle">Celsius/Fahrenheit</a></span><br><br>

   <!-- weather infro -->
   You're in: <span id="country"></span><br> City of: <span id="city"></span><br> Latitude: <span id="latitude"></span><br> Longitude: <span id="longitude"></span><br>
  </div>
  <div class="spacer"></div>
 </div>
 <!-- container --><br>
 <footer id="footer">
  <ul class="nav navbar-nav">
   <p>&copy All rights reserved to
    <a href="https://www.freecodecamp.com/charlesmarlow" target="_blank">
			Charles Marlow</a></p>
 </footer>

 <!-- app's javascript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 <!-- jQuery -->

</body>

</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*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)) + "&deg; C";
		return Math.round(F) + "&deg; 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]); 
		})
	})
	
})

Comments