"Show Local Weather Application"
Bootstrap 4.0.0 Snippet by ziaongit

<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(); })();

Related: See More


Questions / Comments:

Nice post, but how to get the next 3 days weather forcast

SUJITHA7YERUVA () - 6 years ago - Reply 0