The weather in my city, activity freecodecamp using simpleweatherjs
A Pen by Francisco Velasquez on CodePen.
Created
August 24, 2015 04:18
-
-
Save francves/1f2191ef76fb628d4dbb to your computer and use it in GitHub Desktop.
Show the Local Weather (Barquisimeto)
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
| <!-- I use http://http://simpleweatherjs.com Na' Guará Barquisimeto --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css"> | |
| <div id="weather"></div> | |
| <button class="js-barquisimeto"><i class="zmdi zmdi-cloud-outline zmdi-hc-2x mdc-text-light-blue"></i> | |
| Barquisimeto Weather</button> | |
| <button class="js-geolocation"><i class="zmdi zmdi-pin zmdi-hc-2x animated infinite wobble zmdi-hc-fw"></i>Use Your Location</button> |
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
| // I use http://http://simpleweatherjs.com Na' Guará Barquisimeto | |
| if ("geolocation" in navigator) { | |
| $('.js-Barquisimeto').show(); | |
| } else { | |
| $('.js-Barquisimeto').hide(); | |
| } | |
| /* Where in the world are you? */ | |
| $('.js-geolocation').on('click', function() { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| loadWeather(position.coords.latitude+','+position.coords.longitude); //load weather using your lat/lng coordinates | |
| }); | |
| }); | |
| /*You are in Barquisimeto?*/ | |
| $('.js-Barquisimeto').on('click', function() { | |
| loadWeather('Barquisimeto','VE'); | |
| }); | |
| /* | |
| * Test Locations | |
| * Austin lat/long: 30.2676,-97.74298 | |
| * Austin WOEID: 2357536 | |
| */ | |
| $(document).ready(function() { | |
| loadWeather('Barquisimeto','VE'); //@params location, woeid | |
| }); | |
| function loadWeather(location, woeid) { | |
| $.simpleWeather({ | |
| location: location, | |
| woeid: woeid, | |
| unit: 'f', | |
| success: function(weather) { | |
| html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'°'+weather.units.temp+'</h2>'; | |
| html += '<ul><li>'+weather.city+', '+weather.region+'</li>'; | |
| html += '<li class="currently">'+weather.currently+'</li>'; | |
| html += '<li>'+weather.alt.temp+'°C</li></ul>'; | |
| $("#weather").html(html); | |
| }, | |
| error: function(error) { | |
| $("#weather").html('<p>'+error+'</p>'); | |
| } | |
| }); | |
| } |
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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.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
| /* I use http://http://simpleweatherjs.com Na' Guará Barquisimeto */ | |
| @font-face { | |
| font-family: 'weather'; | |
| src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot'); | |
| src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), | |
| url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), | |
| url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| html { | |
| width: 100%; | |
| height: 100%; | |
| background: #00e676 url(http://k33.kn3.net/A/F/F/3/D/9/834.jpg) no-repeat bottom right; | |
| background-size: cover; | |
| } | |
| body { | |
| padding: 45px 0; | |
| font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
| } | |
| #weather { | |
| width: 500px; | |
| margin: 0px auto; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| i { | |
| font-family: weather; | |
| font-size: 150px; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1.0; | |
| } | |
| .icon-0:before { content: ":"; } | |
| .icon-1:before { content: "p"; } | |
| .icon-2:before { content: "S"; } | |
| .icon-3:before { content: "Q"; } | |
| .icon-4:before { content: "S"; } | |
| .icon-5:before { content: "W"; } | |
| .icon-6:before { content: "W"; } | |
| .icon-7:before { content: "W"; } | |
| .icon-8:before { content: "W"; } | |
| .icon-9:before { content: "I"; } | |
| .icon-10:before { content: "W"; } | |
| .icon-11:before { content: "I"; } | |
| .icon-12:before { content: "I"; } | |
| .icon-13:before { content: "I"; } | |
| .icon-14:before { content: "I"; } | |
| .icon-15:before { content: "W"; } | |
| .icon-16:before { content: "I"; } | |
| .icon-17:before { content: "W"; } | |
| .icon-18:before { content: "U"; } | |
| .icon-19:before { content: "Z"; } | |
| .icon-20:before { content: "Z"; } | |
| .icon-21:before { content: "Z"; } | |
| .icon-22:before { content: "Z"; } | |
| .icon-23:before { content: "Z"; } | |
| .icon-24:before { content: "E"; } | |
| .icon-25:before { content: "E"; } | |
| .icon-26:before { content: "3"; } | |
| .icon-27:before { content: "a"; } | |
| .icon-28:before { content: "A"; } | |
| .icon-29:before { content: "a"; } | |
| .icon-30:before { content: "A"; } | |
| .icon-31:before { content: "6"; } | |
| .icon-32:before { content: "1"; } | |
| .icon-33:before { content: "6"; } | |
| .icon-34:before { content: "1"; } | |
| .icon-35:before { content: "W"; } | |
| .icon-36:before { content: "1"; } | |
| .icon-37:before { content: "S"; } | |
| .icon-38:before { content: "S"; } | |
| .icon-39:before { content: "S"; } | |
| .icon-40:before { content: "M"; } | |
| .icon-41:before { content: "W"; } | |
| .icon-42:before { content: "I"; } | |
| .icon-43:before { content: "W"; } | |
| .icon-44:before { content: "a"; } | |
| .icon-45:before { content: "S"; } | |
| .icon-46:before { content: "U"; } | |
| .icon-47:before { content: "S"; } | |
| #weather h2 { | |
| margin: 0 0 8px; | |
| color: #fff; | |
| font-size: 100px; | |
| font-weight: 300; | |
| text-align: center; | |
| text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); | |
| } | |
| #weather ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #weather li { | |
| background: #fff; | |
| background: rgba(255,255,255,0.90); | |
| padding: 20px; | |
| display: inline-block; | |
| border-radius: 5px; | |
| } | |
| #weather .currently { | |
| margin: 0 20px; | |
| } | |
| button { | |
| color: #000000; | |
| display: block; | |
| margin: 15px auto; | |
| width: 180px; | |
| padding: 5px; | |
| background: #fff; | |
| background: rgba(255,255,255,0.90); | |
| border: 0; | |
| border-radius: 5px; | |
| } |
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://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.1/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment