<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Show Local Weather Application</title>
</head>
<body>
<div id="background">
<section id='itroBackground' class="intro">
<div class="inner">
<div class="content">
<h1>Show Current Weather Application</h1>
<div class="weather-app">
<div class="left">
<div id="toggleCelsius" class="temperature-celsius"><span id="temperatureCelsius">0</span></div>
<div style="display:none;" id='toggleFahrenheit' class="temperature-fahrenheit"><span id="temperatureFahrenheit">0</span></div>
<div class="location"><span id="loc">Unknown</span></div>
</div>
<div class="right">
<div class="top">
<img id="icon" width="75px" src="http://openweathermap.org/img/w/11d.png" onerror="this.src='http://openweathermap.org/img/w/11d.png'" />
<p id="description"></p>
</div>
<div class="bottom">
<div class="humidity">
<span>Humidity:
<span id="humidity">0</span>%
<span>💧</span>
</span>
</div>
<div class="wind">
<span>Wind: <span id="wind">0</span> m/h | Direction: <span id="direction">N</span></span>
</div>
</div>
</div>
</div>
<button onclick="toggleCF();" id="toggleCF" class="button">Toggle C/F</button>
</div>
</div>
</section>
</div>
</body>
</html>
/* =========================
GENERAL START
===========================*/
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Oswald', sans-serif;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
}
#background {
height: 100%;
width: 100%;
margin: 0;
background-size: cover;
background-repeat: no-repeat;
display: table;
}
.default-background {
background-image: url(http://wallpapercave.com/wp/nsu3cSp.jpg);
}
.clouds-background {
background-image: url(http://wallpapercave.com/wp/sYZGesY.jpg);
}
.rain-background {
background-image: url(https://images.alphacoders.com/201/201751.jpg);
}
.clear-background {
background-image: url(https://ak2.picdn.net/shutterstock/videos/27173719/thumb/1.jpg);
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 500px;
margin: 0 auto;
text-align: center
}
.content h1 {
font-family: 'Raleway', sans-serif;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 250%;
padding-bottom: 15px;
}
/* =========================
GENERAL END
===========================*/
/* =========================
WEATHER START
===========================*/
.weather-app {
margin: auto;
width: 100%;
height: 200px;
border: 1px solid black;
border-radius: 20px;
box-shadow: 10px 10px 50px #888888;
overflow: hidden;
text-align:center;
font-family: "Mono";
}
.left {
float: left;
background: #262626;
padding:10px;
width:40%;
height:100%;
color:white;
}
.temperature-celsius {
margin-top:30px;
margin-bottom:5px;
font-size:32px;
font-weight: bold;
width: 150px;
}
.temperature-fahrenheit {
display: none;
margin-top:30px;
margin-bottom:5px;
font-size:32px;
font-weight: bold;
width: 150px;
}
.location {
font-size: 18px;
width:100%;
width:150px;
}
.right {
float: right;
width: 60%;
height:100%;
}
.top {
height: 100px;
width: 100%;
margin: auto;
background: #cec;
}
.top img {
margin-top: 15px;
}
.top p {
margin-top: -14px;
position: relative;
text-transform: capitalize;
}
.bottom {
height: 100px;
background: #669999;
color: white;
font-weight: bold;
}
.humidity {
padding: 8px;
}
/* =========================
WEATHER END
===========================*/
/* =========================
TOPPGLE CF BUTTON START
===========================*/
#toggleCF {
font-family: 'Oswald', sans-serif;
font-size: 100%;
color: #000;
cursor: pointer;
background: #cec;
border: 1px solid black;
border-radius: 5px;
padding: 5px 20px;
margin-top: 15px;
}
#toggleCF:hover {
color: #FFF;
background: #669999;
border: 1px solid white;
}
/* =========================
TOGGLE CF TEM BUTTON END
===========================*/
(function WeatherApplication(){
this.init =function() {
this.startApp();
};
/* --------------------------
START APP START
--------------------------- */
this.startApp = function(){
var temperatureCelsius = document.getElementById('temperatureCelsius');
var temperatureFahrenheit = document.getElementById('temperatureFahrenheit');
var loc = document.getElementById('loc');
var icon = document.getElementById('icon');
var description = document.getElementById('description');
var humidity = document.getElementById('humidity');
var wind = document.getElementById('wind');
var direction = document.getElementById('direction');
updateByLaLo();
//update(weather);
};
/* --------------------------
START APP END
--------------------------- */
/* --------------------------
UPDATE BY ZIP START
--------------------------- */
this.updateByLaLo = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log('Geolocation is not supported by this browser.');
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var url = 'https://fcc-weather-api.glitch.me/api/current?lat='+latitude+'&lon='+longitude;
sendRequest(url);
}
}
/* --------------------------
UPDATE BY ZIP END
--------------------------- */
/* --------------------------
SEND REQUEST START
--------------------------- */
this.sendRequest = function(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState == 4 && xhttp.status == 200){
var data = JSON.parse(xhttp.responseText);
var weather = {};
weather.temperatureCelsius =data.main.temp;
weather.temperatureFahrenheit = data.main.temp * 9 / 5 + 32;
weather.loc = data.name;
weather.icon = data.weather[0].icon;
weather.description = data.weather[0].description;
weather.humidity = data.main.humidity;
weather.wind = data.wind.speed;
weather.direction = data.wind.deg;
update(weather);
}else {
console.log('Error: ReadyState:'+xhttp.readyState+' status:'+xhttp.status);
}
};
xhttp.open('GET', url, true);
xhttp.send();
}
/* --------------------------
SEND REQUEST END
--------------------------- */
/* --------------------------
UPDATE START
--------------------------- */
this.update = function(weather) {
temperatureCelsius.innerHTML = weather.temperatureCelsius+ ' ℃';
temperatureFahrenheit.innerHTML = weather.temperatureFahrenheit+ ' ℉';
loc.innerHTML = weather.loc;
icon.src = weather.icon;
description.innerHTML = weather.description;
humidity.innerHTML = weather.humidity;
wind.innerHTML = weather.wind;
direction.innerHTML = degreesToDirection(weather.direction);
fixBackground(weather.description);
};
/* --------------------------
UPDATE END
--------------------------- */
/* --------------------------
FIX BACKGROUND START
--------------------------- */
this.fixBackground = function(backgroundValued){
var backgrouund = document.getElementById("background");
if(backgroundValued.includes('clouds')) {
backgrouund.className = "clouds-background";
}else if(backgroundValued.includes('rain')) {
backgrouund.className = "rain-background";
}else if(backgroundValued.includes('clear')){
backgrouund.className = "clear-background";
}else {
backgrouund.className = "default-background";
}
}
/* --------------------------
FIX BACKGROUND END
--------------------------- */
/* --------------------------
DEGREES TO DITECTION START
--------------------------- */
this.degreesToDirection = function(degrees){
var range = 360/16;
var low = 360 - range/2;
var high = (low + range) % 360;
var angles = ['N', 'NNE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW','NW','NNW'];
for(i in angles) {
low = (low + range) % 360;
high = (high + range) % 360;
if(degrees >= low && degrees < high){
return angles[i];
}
}
return 'N';
}
/* --------------------------
DEGREES TO DITECTION START
--------------------------- */
/* --------------------------
TOGGLE CF START
--------------------------- */
this.toggleCF = function() {
var fahrenheit = document.getElementById('toggleFahrenheit');
var celsius = document.getElementById('toggleCelsius');
if (fahrenheit.style.display === 'none') {
fahrenheit.style.display = 'block';
celsius.style.display = 'none';
} else {
fahrenheit.style.display = 'none';
celsius.style.display = 'block';
}
}
/* --------------------------
TOGGLE CF START
--------------------------- */
this.init();
})();
