A Pen by Srinivas Iyer on CodePen.
Created
January 10, 2017 01:55
-
-
Save srini5/667ab50f62f873a141f2167e26c4984e to your computer and use it in GitHub Desktop.
Local Weather App
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class = "row"> | |
| <div class="col-md-4 col-sm-4 col-xs-2"></div> | |
| <div class="col-md-4 col-sm-4 col-xs-8"> | |
| <button class="btn btn-primary hidden" id="btnWeather">Get Weather</button> | |
| <br><br> | |
| <div class="well"> | |
| <div id="title"><h1> Local Weather App </h1></div> | |
| </div> | |
| <div class="well"> | |
| <div id="weatherBox"></div> | |
| <div class ="row"> | |
| <div class= "col-md-2 col-xs-4"><strong class="mainTemp"> </strong></div> | |
| <div class= "col-md-1 col-xs-1"><button id="btnTempDisp" class="btn btn-primary">F</button></div> | |
| </div> | |
| <div class="row"> | |
| <div class= "col-md-2 col-xs-4"><strong id="mainDesc"> </strong></div> | |
| <div class= "col-md-1 col-xs-1"><i><img id="imgWeatherIcon" src="#"></i></div> | |
| </div> | |
| </div> | |
| <div class="well"> | |
| <div id="placeBox"> *Current weather details, as per the station detected closest to your current location: </div> | |
| </div> | |
| </div> | |
| <div class="col-md-5 col-sm-4 col-xs-2"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var privateKey = "c008853ef46df484ccdd69b9cf5043e8"; | |
| var apiUrl = "http://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&units=metric&APPID={key}"; | |
| $(document).ready(function() { | |
| var loc = {}; | |
| var weatherResp = {}; | |
| var tempC = ""; | |
| var tempF = ""; | |
| // $("#btnWeather").click(function() { | |
| // $("#btnWeather").addClass("disabled"); | |
| // $(".hidden").removeClass("hidden"); | |
| $.getJSON("https://ipinfo.io/geo", function(resp) { | |
| console.log("received location response: " + JSON.stringify(resp)); | |
| loc.lat = resp.loc.split(",")[0]; | |
| loc.lon = resp.loc.split(",")[1]; | |
| loc.place = resp.city + ", " + resp.region + ", " + resp.country; | |
| var weatherContent = "<div>" + loc.place + " (" + loc.lat + "," + loc.lon + ")</div><br>"; | |
| weatherContent += ""; | |
| $("#weatherBox").html(weatherContent); | |
| if (loc.hasOwnProperty("lat") && loc.hasOwnProperty("lon")) { | |
| $.getJSON(apiUrl.replace("{lat}", loc.lat).replace("{lon}", loc.lon).replace("{key}", privateKey), function(json) { | |
| console.log("received weather response: " + JSON.stringify(json)); | |
| weatherResp = json; | |
| tempC = weatherResp.main.temp; | |
| tempF = tempC * 9 / 5 + 32; | |
| $(".mainTemp").html(tempC + "\xB0C"); | |
| $("#btnTempDisp").html('F'); | |
| $("#mainDesc").html(weatherResp.weather[0].description); | |
| $("#imgWeatherIcon")[0].src = "http://openweathermap.org/img/w/"+ weatherResp.weather[0].icon + ".png"; | |
| //01d | |
| }) | |
| } | |
| }); | |
| $("#btnTempDisp").click(function() { | |
| if ($("#btnTempDisp").html() === 'F') { | |
| $(".mainTemp").html(tempF + "\xB0F"); | |
| $("#btnTempDisp").html('C'); | |
| } else { | |
| $(".mainTemp").html(tempC + "\xB0C"); | |
| $("#btnTempDisp").html('F'); | |
| } | |
| }); | |
| // }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .mainTemp { | |
| text-size: larger; | |
| text-decoration: bold; | |
| } | |
| body{ | |
| background-color: black; | |
| } | |
| .well{ | |
| background-color: black; | |
| color: white; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment