Simple weather app, takes coord and gives back city, state degrees in C and F. Api from openweathermap. background and image change with the weather.
A Pen by Francesco Agnoletto on CodePen.
Last active
March 17, 2016 10:29
-
-
Save Kornil/ba88c04d3583e83f30c0 to your computer and use it in GitHub Desktop.
Weather app
This file contains 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
| <body> | |
| <div class="app row trigger"> | |
| <div> | |
| <h3 id="city"></h3> | |
| </div> | |
| <div> | |
| <h3 class="tog" id="degrees"></h3> | |
| <h3 class="tog" style="display: none" id="degreesf"></h3> | |
| </div> | |
| <div class="col"> | |
| <h4 id="desc"></h4> | |
| <img src="" id="icon"> | |
| </div> | |
| </div> | |
| <footer class="navbar-fixed-bottom"> | |
| <div class="fixfooter"> | |
| <a href="https://twitter.com/FrAgno92" target="_blank"> | |
| <p>by Fragno92</p> | |
| </a> | |
| </div> | |
| </footer> | |
| </body> |
This file contains 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
| $(document).ready(function() { | |
| var location = "http://ip-api.com/json"; | |
| var background = { | |
| sunny: "url(http://www.deromemarkbostad.se/storage/ma/b239ca03ec0d4681aced1fef397cf435/acec8e689a014f2592fb60e2830e7003/png/20B0881DC9220BD975D4393899E0190786B61566/meadow01-1920.png)", | |
| moon: "url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/11/Sky-Clouds-Moon-Desktop-Wallpaper.jpg)", | |
| cloudyS: "url(http://static1.squarespace.com/static/560f44f6e4b042344e71beec/t/56245a54e4b0d232542bec10/1445223005165/M8PLLYRHYR.jpg?format=1500w)", | |
| cloudyN: "url(http://wallions.com/wp-content/uploads/2016/02/4303.jpeg)", | |
| bigCloud: "url(http://static1.squarespace.com/static/562eb53fe4b02eaf02fa7768/t/563059f8e4b033c8289f47b6/1446009355152/Ocean+Sunset.jpg?format=2500w)", | |
| rain: "url(http://1.bp.blogspot.com/-oQTBPdo8Yns/VbxtlE6JsjI/AAAAAAAAMH0/OiCankZWEPs/s1600/68R5B0LYU0.jpg)", | |
| storm: "url(https://images.unsplash.com/photo-1447829172150-e5deb8972256?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375)", | |
| snow: "url(http://www.handisport-vosges.fr/images/fond-page/fond3.jpg)", | |
| fog: "url(http://blog.wanderable.com/wp-content/uploads/2015/05/bay-bridge.jpeg)" | |
| }; | |
| $.getJSON(location, function(data) { | |
| var lat = data.lat; | |
| var lon = data.lon; | |
| $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=7abcac641aa6aa0fce567a27bf2258a6" + "&units=metric", function(data) { | |
| var tempc = Math.round(data.main.temp); | |
| var tempf = Math.round(tempc * 1.8 + 32); | |
| var icontag = data.weather[0].icon; | |
| var icon = "http://openweathermap.org/img/w/" + icontag + ".png"; | |
| $("#city").html(data.name + ", " + data.sys.country); | |
| $("#degrees").html(tempc + " °C"); | |
| $("#degreesf").html(tempf + " °F"); | |
| $("#desc").html(data.weather[0].main); | |
| $("#icon").attr("src", icon); | |
| switch(icontag){ | |
| case "01d": | |
| $("body").css("background-image", background.sunny); | |
| break; | |
| case "01n": | |
| $("body").css("background-image", background.moon); | |
| break; | |
| case "02d": | |
| case "03d": | |
| $("body").css("background-image", background.cloudyS); | |
| break; | |
| case "02n": | |
| case "03n": | |
| $("body").css("background-image", background.cloudyN); | |
| break; | |
| case "04d": | |
| case "04n": | |
| $("body").css("background-image", background.bigCloud); | |
| break; | |
| case "09d": | |
| case "09n": | |
| case "10d": | |
| case "10n": | |
| $("body").css("background-image", background.rain); | |
| break; | |
| case "11d": | |
| case "11n": | |
| $("body").css("background-image", background.storm); | |
| break; | |
| case "13d": | |
| case "13n": | |
| $("body").css("background-image", background.snow); | |
| break; | |
| case "50d": | |
| case "50n": | |
| $("body").css("background-image", background.fog); | |
| break; | |
| } | |
| $(".app").click(function() { | |
| $(".tog").toggle(); | |
| }); | |
| }); | |
| }); | |
| }); |
This file contains 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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains 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
| body{ | |
| padding-top: 100px; | |
| color: #fff; | |
| text-align: center; | |
| background: no-repeat center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| .app{ | |
| background-color: rgba(0,0,0,0.6); | |
| max-width: 300px; | |
| height: 135px; | |
| margin: 0 auto; | |
| border: #fff solid 2px; | |
| cursor: pointer; | |
| } | |
| h3{ | |
| margin: 10px; | |
| } | |
| .tog{ | |
| margin-bottom: 5px; | |
| } | |
| .col h4{ | |
| display: inline-block; | |
| text-align: left; | |
| } | |
| h4{ | |
| margin-bottom: 0; | |
| margin-right: 10px; | |
| } | |
| footer a:link { | |
| color: #fff; | |
| font-size: 12px; | |
| } | |
| footer a:visited, | |
| footer a:hover, | |
| footer a:active { | |
| color: #fff; | |
| } | |
| .fixfooter { | |
| display: inline-block; | |
| } |
This file contains 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment