<!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>© 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)) + "° 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]);
})
})
})