A Pen by Stephen Peters on CodePen.
Last active
September 3, 2017 04:03
-
-
Save stephepush/d1e927276a1ad088eb1885ea0e361197 to your computer and use it in GitHub Desktop.
FCC 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> | |
| <head> | |
| <title></title> | |
| <meta charset="UTF-8"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css?family=Sansita+One" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!--In case you forget, this is why the box and all the info in it is on the left side. You want to put it in the middle. Might requrire making 3 divs and putting #weather in the 2nd one. Try it when you come back--> | |
| <div class="row"> | |
| <div id="weather" class="col-xs-10 col-sm-8 col-md-6 col-lg-6"> | |
| <!--This is the div that will contain all of the weather info--> | |
| <h1 id="location"> | |
| </h1> | |
| <div id="temp" class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> | |
| <div class="unit" id="tempFar"> | |
| <!--This div contains the temperature. Find a way to toggle between tempFar and tempCel jQuery vars--> | |
| </div> | |
| <div id="tempCel"> | |
| </div> | |
| </div> | |
| <div id="iconAndDesc" class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> | |
| <!--This div will contain the svg weather icon as determined by the jQuery script. Floats to the right of #tempFar div--> | |
| <p id="imgAndDescr"></p> | |
| </div> | |
| <!--Jquery cases will determine what SVG will go here--> | |
| <div id="humidWind"> | |
| <!--Weather list items div, clears above div--> | |
| <ul> | |
| <li id="descr"></li> | |
| <li id="humidity"></li> | |
| <li id="windSpeedMph"></li> | |
| <li id="windSpeedKph"></li> | |
| </ul> | |
| </div> | |
| <div id="unitButton"> | |
| <button id="unit_toggle" class="btn btn-lg"><p id="textFar" class="buttonText">Click for °F</p><p id="textCel" class="buttonText">Click for °C</p></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> | |
| </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 weatherApp = function() { | |
| //var lat = position.coords.latitude; | |
| //var lon = position.coords.longitude; | |
| var apiKey = "dc8dfec1388640a990b222829171407&q="; | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| var lat = position.coords.latitude; | |
| var lon = position.coords.longitude; | |
| //console.log(lat); | |
| //console.log(lon); | |
| //now onto the weather api | |
| var weatherApi = "https://api.apixu.com/v1/current.json?key=" + apiKey + lat +","+ lon; | |
| console.log(weatherApi); | |
| $.getJSON(weatherApi, function(data) { | |
| console.log(data.location.name); | |
| var location = data.location.name + ", " + data.location.region; | |
| var tempFarenheit = Math.round(data.current.temp_f) + "°F"; | |
| //var tempCelsius = Math.round((data.current_f - 32) * 0.5556) + "°C"; | |
| var tempCelsius = Math.round(data.current.temp_c) + "°C"; | |
| var humidity = data.current.humidity; | |
| /* var id = data.weather[0].id; //this is for parsing through openweather maps weather codes, if I ever decided to switch back to that api... corresponds with line 68*/ | |
| var id = data.current.condition.code; //line 68 relies on this object now that I switched to apixu | |
| var descr = data.current.condition.text; | |
| console.log(descr + "for line 29!"); | |
| /*var conditionIcon = data.current.condition.icon; | |
| console.log(conditionIcon); | |
| var imageUrl = $('#weather-img').html('<img src= "' + conditionIcon + '">'); was usable when I used open weather app since weather conditions were paired with Erik Flowers' svg iconset. Apixu only provides png's and no svgs' lines 134 and 136 will also be commented out since it relies on these variable declarations*/ | |
| /*var sunUp = data.sys.sunrise; | |
| var sunDown = data.sys.sunset;*/ | |
| var windSpeedMph = Math.round(data.current.wind_mph); | |
| var windSpeedKph = Math.round(windSpeedMph / 0.62137); | |
| var deg = data.current.wind_degree; | |
| //var imgAndDescr = $("#imgAndDescr").html("<p> <span id='weather-img'>"+imageUrl+ "</span><br /><span id='descr'>" +descr+ "</span></p>") | |
| console.log(windSpeedMph + "mph"); | |
| console.log(windSpeedKph + "kph"); | |
| console.log(deg + " degrees!"); | |
| function degToCompass(deg) { | |
| var val = Math.floor((deg / 22.5) + 0.5); | |
| var arr = ["North", "NNE", "NE", "ENE", "East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW"]; | |
| return arr[(val % 16)]; | |
| } | |
| console.log(degToCompass(deg)); | |
| //var backgroundImage = "url(https://i.imgur.com/DgdZaiD.jpg)"; | |
| var weatherDescId = { | |
| thunderStorm: [200, 201, 202, 210, 211, 212, 221, 230, 231, 232, 960], | |
| rain: [300, 301, 302, 310, 311, 312, 313, 314, 321, 500, 501, 502, 503, 504, 520, 521, 522, 531], | |
| snow: [600, 601, 602, 615, 616, 620, 621, 622], | |
| freezingRain: [511, 611, 612], | |
| clearSky: [1000], | |
| clouds: [801, 802, 803], | |
| cloudy: [804], | |
| tropicalStorm: [901], | |
| hurricane: [902, 962], | |
| windy: [905], | |
| fog: [701, 741] | |
| }; | |
| function checkAnswer(id, weatherDescId) { | |
| for (var p in weatherDescId) { | |
| if (weatherDescId[p].indexOf(id) > -1) return p; | |
| } | |
| return false; | |
| }; | |
| //console.log(id); | |
| switch (checkAnswer(id, weatherDescId)) { | |
| case 'Moderate or heavy rain with thunder': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181651/weather_app/rain_cogy1e.jpg)"; | |
| break; | |
| case 'rain': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181651/weather_app/rain_cogy1e.jpg)"; | |
| break; | |
| case 'snow': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181653/weather_app/snow_bz1a2o.jpg)"; | |
| break; | |
| case 'freezingRain': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181649/weather_app/freezingRain_vuihob.jpg)"; | |
| break; | |
| case 'clearSky': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181646/weather_app/bright-sun-in-blue-skyClearSky_cjvpov.jpg)"; | |
| break; | |
| case 'clouds': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181651/weather_app/overcast_dwx1hb.jpg)"; | |
| break; | |
| case 'cloudy': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181653/weather_app/partlyCloudy_ie4hxo.jpg)"; | |
| break; | |
| case 'tropicalStorm': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181653/weather_app/tropicalStorm_q47ih3.jpg)"; | |
| break; | |
| case 'hurricane': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181654/weather_app/hurricane_q8zh6n.jpg)"; | |
| break; | |
| case 'windy': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181647/weather_app/dandelion-1335575wind_kefgit.jpg)"; | |
| break; | |
| case 'fog': | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181650/morning-mist-1535967_1920mistFog_bwxiqw.jpg)"; | |
| break; | |
| /*case objectProperty: | |
| backgroundImage = "url(insertLink)"; | |
| break; | |
| case objectProperty: | |
| backgroundImage = "url(insertLink)"; | |
| break;*/ | |
| default: | |
| backgroundImage = "url(https://res.cloudinary.com/dmkct6wfu/image/upload/v1500181648/weather_app/flying-seeds-1533742wind_gug2s0.jpg)"; | |
| break; | |
| }; | |
| $("body").css({ | |
| "background-image": backgroundImage, | |
| "background-repeat": "no-repeat", | |
| "background-size": "cover", | |
| "width": "100%", | |
| "height": "100%", | |
| }); | |
| $('#location').text("Current Conditions in " + location + ":"); | |
| $('#tempFar').text(tempFarenheit); | |
| $('#tempCel').text(tempCelsius); | |
| $('#humidity').text("Humidity: " + humidity + "%"); | |
| $('#descr').text(descr); | |
| //$('#sunUp').text(sunUp); | |
| //$('#sunDown').text(sunDown); | |
| //$('#weather-img').html("<i class='" + imageUrl + "'></i>"); relies on line 32 | |
| $('#windSpeedMph').text("Wind Speed/Direction: " + windSpeedMph + "mph " + degToCompass(deg)); | |
| //imgAndDescr; relies on line 32 | |
| $('#windSpeedKph').text("Wind Speed/Direction: " + windSpeedKph + "kph " + degToCompass(deg)); | |
| $("button").click(function() { | |
| $("#tempCel, #tempFar, #textCel, #textFar, #windSpeedMph, #windSpeedKph").toggle(); | |
| }); | |
| }); //end of weather Api | |
| }); //end of geo api | |
| }; //end of weather app | |
| }; | |
| $(document).ready(function() { | |
| weatherApp(); | |
| }); //end of document.ready function |
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
| /*Gonna use this color scheme: http://www.color-hex.com/color-palette/21953, also cool font is "sansita one"*/ | |
| #weather { | |
| margin: 0 auto; | |
| margin-top: 10%; | |
| margin-bottom: 10%; | |
| width: 100%; | |
| height: auto; | |
| border: 12px solid white; | |
| border-radius: 8px; | |
| background-color: rgba(125, 249, 255, 0.1); | |
| } | |
| h1, | |
| ul, | |
| #tempFar, | |
| #tempCel, | |
| #descr { | |
| font-family: "sansita one"; | |
| } | |
| h1 { | |
| font-size: 4em; | |
| color: #ffec8b; | |
| } | |
| #tempFar, | |
| #tempCel { | |
| color: white; | |
| font-size: 16em; | |
| padding-top: 1%; | |
| } | |
| ul { | |
| color: #ffec8b; | |
| font-size: 1.5em; | |
| } | |
| #weather-img { | |
| color: white; | |
| font-size: 15.75em; | |
| height: 15px; | |
| margin: 0 auto; | |
| } | |
| #descr { | |
| color: white; | |
| font-size: 3.5em; | |
| margin-top: 2%; | |
| } | |
| body { | |
| background-color: #333; | |
| margin: 0 auto; | |
| } | |
| #location { | |
| padding-left: 1%; | |
| display: block; | |
| } | |
| .unit, | |
| #textCel, | |
| #windSpeedMph { | |
| display: none; | |
| } | |
| #tempFar, | |
| #tempCel { | |
| margin: 0 auto; | |
| } | |
| #temp{ | |
| display:block; | |
| /*float: left;*/ | |
| text-align:center; | |
| width: 100%; | |
| /*padding-left: 10%;*/ | |
| } | |
| #iconAndDesc{ | |
| display: block; | |
| /*float:left;*/ | |
| width: 100%; | |
| /*padding-left: 10%;*/ | |
| } | |
| /*#weather-img, | |
| #descr { | |
| padding-left: 20%; | |
| }*/ | |
| ul { | |
| clear: both; | |
| list-style-type: none; | |
| padding-left: 10%; | |
| display: inline-block; | |
| } | |
| #unitButton{ | |
| display: block; | |
| clear: both; | |
| padding-top: 5%; | |
| padding-bottom: 5%; | |
| } | |
| .btn-lg { | |
| margin: 0 auto; | |
| display: block; | |
| background-color: rgba(0, 0, 0, 0); | |
| color: white; | |
| outline: none; | |
| box-shadow: none; | |
| border: solid 5px white; | |
| border-radius: 5px; | |
| font-family: "sansita one"; | |
| font-size: 1.5em; | |
| } | |
| .buttonText { | |
| margin: 0px; | |
| } | |
| .btn-lg:hover { | |
| border: solid 5px #ffec8b; | |
| color: #ffec8b; | |
| font-size: 1.52em; | |
| } | |
| .btn-lg:focus { | |
| 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/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" /> | |
| <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