A Pen by Mohammed Jasil on CodePen.
Last active
October 24, 2016 04:23
-
-
Save jasil1414/9ff0c21cf9d254e9b96cc6e75b6c5f4f to your computer and use it in GitHub Desktop.
Weather Web
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
| <!--Weather App for FCC project. | |
| --> | |
| <html> | |
| <head> | |
| <title>Weather Application</title> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Work+Sans" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row_middle"> | |
| <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12"> | |
| <div class="weatherBox col-lg-12 col-md-12 col-sm-12 col-xs-12"> | |
| <div class="currentLocation col-xs-12">Getting Location..</div> | |
| <div class="row col-xs-12"> | |
| <div class="weatherIcon col-xs-4 col-xs-offset-4"><img alt="Weather Icon" id=weatherIcon src="#"></div> | |
| </div> | |
| <div class="row col-xs-12"> | |
| <div class="currentWeather col-xl-12 col-xs-12"></div> | |
| <div class="toggleButtons col-md-2 col-md-ffset-5 col-sm-2 col-sm-offset-5 col-xs-3 col-xs-offset-4"><a href="#" id="toggle">°C/ °F</div> | |
| </div> | |
| <div class="weatherInfoBox col-xs-12"> | |
| <div class="row col-xs-12"> | |
| <div class="currentTemperature col-xl-4 col-lg-12 col-xs-12">Temperature: <span id="currentTemperature" class="styleFont">N/A</span></div> | |
| <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12 maxTemperature ">Max: <span id="maxTemperature" class="styleFont">N/A</span></div> | |
| <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12 minTemperature ">Min: <span id="minTemperature" class="styleFont">N/A</span></div> | |
| </div> | |
| <div class="col-xs-12 sectionSeperator"> | |
| <div class="humidity col-lg-6 col-md-6 col-sm-12 col-xs-12">Humidity: <span id="humidity" class="styleFont">N/A</span></div> | |
| <div class="pressure col-lg-6 col-md-6 col-sm-12 col-xs-12">Pressure: <span id="pressure" class="styleFont">N/A</span></div> | |
| </div> | |
| <div class="weatherDescription col-xs-12">Weather Description: <span id="weatherDescription"></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| var API_KEY = "68ee9448cb79b8e23054fc1f7caea0b4"; | |
| var loc = []; | |
| var faherenheit = false; | |
| var WData; | |
| function toggleUnits(celTemp, celsius) { | |
| if (faherenheit) return Math.round(celTemp * 1.8 + 32) + " °F"; | |
| return celTemp + " °C"; | |
| } | |
| function weatherDataRender(WData) { | |
| var current_loc = WData.name; | |
| var current_country = WData.sys.country; | |
| var Icon = WData.weather[0].icon; | |
| var current_weather = WData.weather[0].main; | |
| var weather_description = WData.weather[0].description; | |
| var current_temperature = toggleUnits(WData.main.temp, faherenheit); | |
| var max_temperature = toggleUnits(WData.main.temp_max, faherenheit); | |
| var min_temperature = toggleUnits(WData.main.temp_min, faherenheit); | |
| var humidity = WData.main.humidity; | |
| var pressure = WData.main.pressure; | |
| /*var wind_speed = WData.wind.speed; | |
| var cloud = WData.clouds.all; | |
| var rain = WData.rain["3h"]; | |
| var snow = WData.snow["3h"];*/ | |
| //Changing the DOM with the Data from OpenWeatherMap | |
| $(".currentLocation").html(current_loc+","+current_country); | |
| $("#weatherIcon").attr("src", "https://openweathermap.org/img/w/" + Icon + ".png") | |
| $(".currentWeather").html(current_weather); | |
| $("#weatherDescription").html(weather_description); | |
| $("#currentTemperature").html(current_temperature); | |
| $("#maxTemperature").html(max_temperature); | |
| $("#minTemperature").html(min_temperature); | |
| $("#humidity").html(humidity + "%"); | |
| $("#pressure").html(pressure + "hPa"); | |
| /*$("#windSpeed").html(wind_speed + " "+SPEED); | |
| $("#cloud").html(cloud + " %"); | |
| $("#rain").html( rain + " mm"); | |
| $("#snow").html(snow +" mm");*/ | |
| } | |
| $(document).ready(function() { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| loc[0] = position.coords.latitude; | |
| loc[1] = position.coords.longitude; | |
| console.log(loc[0] + "," + loc[1]); | |
| $.getJSON('https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?units=metric&lat=' + loc[0] + '&lon=' + loc[1] + '&APPID=' + API_KEY, function(apiData) { | |
| var WData = apiData; | |
| console.log(WData); | |
| weatherDataRender(apiData, faherenheit); | |
| $("#toggle").click(function() { | |
| faherenheit = !faherenheit; | |
| weatherDataRender(apiData, faherenheit); | |
| }); | |
| }); | |
| }); | |
| }); |
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/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{ | |
| background:url(https://raw.githubusercontent.com/jasil1414/me/master/images/Wonderful-Road-Wallpaper-47806-1920x1080-px-fond-ecran.jpg)no-repeat; | |
| } | |
| .row_middle{ | |
| position:relative; | |
| top:10vh; | |
| } | |
| .weatherBox { | |
| padding:10px; | |
| background:rgba(200,200,200,0.8); | |
| border-radius:10px; | |
| font-family:'Open Sans',sans-serif; | |
| } | |
| .col-xs-12{ | |
| text-align:center; | |
| padding-top:2px; | |
| padding-bottom:2px; | |
| } | |
| .currentLocation{ | |
| color:#225606; | |
| margin-top:7px; | |
| font-weight:bold; | |
| border:2px solid #96A643; | |
| border-radius:4px; | |
| psition:absolute; | |
| height:40px; | |
| font-size:1.6em; | |
| } | |
| .currentWeather{ | |
| height:30px; | |
| font-size:1.5em; | |
| font-weight:bold; | |
| font-family:'Roboto',sans-serif; | |
| color:#225606; | |
| } | |
| .toggleButtons{ | |
| margin-top:10px; | |
| background:#96A643; | |
| border-radius:7px; | |
| font-size:1.1em; | |
| font-family:'Roboto',sans-serif | |
| } | |
| a, a:hover, a:focus{ | |
| color:#225606; | |
| text-decoration:none; | |
| } | |
| .weatherInfoBox{ | |
| border:2px solid #96A643; | |
| margin-top:10px; | |
| margin-bottom:10px; | |
| padding-top:10px; | |
| padding-bottom:20px; | |
| border-radius:5px; | |
| font-family:'Work Sans', sans-serif; | |
| font-size:1.2em; | |
| font-weight:600; | |
| letter-spacing:1px; | |
| color:#1A3802; | |
| } | |
| .sectionSeperator{ | |
| border-top:2px solid #96A643; | |
| margin-top:10px; | |
| } | |
| .styleFont{ | |
| font-size:1.3em; | |
| font-weight:900; | |
| } | |
| .weatherDescription{ | |
| border-top:2px solid #96A643; | |
| margin-top:10px; | |
| } | |
| @media screen and (min-width: 320px) and (max-width: 720px){ | |
| .weatherInfoBox{ | |
| font-size:1em; | |
| } | |
| .row_middle{ | |
| position:relative; | |
| top:5vh; | |
| } | |
| .styleFont{ | |
| font-size:1.1em; | |
| font-weight:900; | |
| } | |
| .toggleButtons{ | |
| margin-left:37%; | |
| } | |
| } |
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/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
A Pen by Mohammed Jasil on CodePen.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use Firefox browser to fetch the API data from Open Weather Map.
Open Weather Map requires its API users to upgrade to pro or enterprise accounts in order to route through HTTPS request and browsers like Chrome restrict API access through a mere HTTP request.