Last active
October 19, 2017 17:26
-
-
Save marcuszierke/8b949960ff503f4abb15cdce0a38d34d to your computer and use it in GitHub Desktop.
The challenge was to create a local weather app which shows the local weather after clicking a button with the temperature, description of the weather and the name of the location.
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
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Weather App</title> | |
| <link rel="stylesheet" href="weather-icons-master/css/weather-icons.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> | |
| <style> | |
| body { | |
| background-color: white; | |
| font-family: "Lato", sans-serif; | |
| font-style: bold; | |
| color: black; | |
| } | |
| button { | |
| font-family: "Lato", sans-serif; | |
| border-radius: 70px; | |
| padding: 15px; | |
| border-color: black; | |
| border-style: solid; | |
| background-color: transparent; | |
| } | |
| col-lg-3 { | |
| padding-top: 20px; | |
| width: 100px; | |
| } | |
| col-lg-6 { | |
| width: 300px; | |
| padding-top: 20px; | |
| } | |
| .startButton { | |
| margin-top: 300px; | |
| text-align: center; | |
| font-size: 27px; | |
| } | |
| .container { | |
| margin-top: -100px; | |
| } | |
| #location { | |
| font-size: 50px; | |
| } | |
| #weatherIcon { | |
| font-size: 90px; | |
| padding-top: 20px; | |
| padding-left: 50px; | |
| } | |
| #temp { | |
| font-size: 42px; | |
| } | |
| #tempText { | |
| font-size: 32px; | |
| } | |
| </style> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| var weatherIcons = { | |
| "200": { | |
| "label": "thunderstorm with light rain", | |
| "icon": "storm-showers" | |
| }, | |
| "201": { | |
| "label": "thunderstorm with rain", | |
| "icon": "storm-showers" | |
| }, | |
| "202": { | |
| "label": "thunderstorm with heavy rain", | |
| "icon": "storm-showers" | |
| }, | |
| "210": { | |
| "label": "light thunderstorm", | |
| "icon": "storm-showers" | |
| }, | |
| "211": { | |
| "label": "thunderstorm", | |
| "icon": "thunderstorm" | |
| }, | |
| "212": { | |
| "label": "heavy thunderstorm", | |
| "icon": "thunderstorm" | |
| }, | |
| "221": { | |
| "label": "ragged thunderstorm", | |
| "icon": "thunderstorm" | |
| }, | |
| "230": { | |
| "label": "thunderstorm with light drizzle", | |
| "icon": "storm-showers" | |
| }, | |
| "231": { | |
| "label": "thunderstorm with drizzle", | |
| "icon": "storm-showers" | |
| }, | |
| "232": { | |
| "label": "thunderstorm with heavy drizzle", | |
| "icon": "storm-showers" | |
| }, | |
| "300": { | |
| "label": "light intensity drizzle", | |
| "icon": "sprinkle" | |
| }, | |
| "301": { | |
| "label": "drizzle", | |
| "icon": "sprinkle" | |
| }, | |
| "302": { | |
| "label": "heavy intensity drizzle", | |
| "icon": "sprinkle" | |
| }, | |
| "310": { | |
| "label": "light intensity drizzle rain", | |
| "icon": "sprinkle" | |
| }, | |
| "311": { | |
| "label": "drizzle rain", | |
| "icon": "sprinkle" | |
| }, | |
| "312": { | |
| "label": "heavy intensity drizzle rain", | |
| "icon": "sprinkle" | |
| }, | |
| "313": { | |
| "label": "shower rain and drizzle", | |
| "icon": "sprinkle" | |
| }, | |
| "314": { | |
| "label": "heavy shower rain and drizzle", | |
| "icon": "sprinkle" | |
| }, | |
| "321": { | |
| "label": "shower drizzle", | |
| "icon": "sprinkle" | |
| }, | |
| "500": { | |
| "label": "light rain", | |
| "icon": "rain" | |
| }, | |
| "501": { | |
| "label": "moderate rain", | |
| "icon": "rain" | |
| }, | |
| "502": { | |
| "label": "heavy intensity rain", | |
| "icon": "rain" | |
| }, | |
| "503": { | |
| "label": "very heavy rain", | |
| "icon": "rain" | |
| }, | |
| "504": { | |
| "label": "extreme rain", | |
| "icon": "rain" | |
| }, | |
| "511": { | |
| "label": "freezing rain", | |
| "icon": "rain-mix" | |
| }, | |
| "520": { | |
| "label": "light intensity shower rain", | |
| "icon": "showers" | |
| }, | |
| "521": { | |
| "label": "shower rain", | |
| "icon": "showers" | |
| }, | |
| "522": { | |
| "label": "heavy intensity shower rain", | |
| "icon": "showers" | |
| }, | |
| "531": { | |
| "label": "ragged shower rain", | |
| "icon": "showers" | |
| }, | |
| "600": { | |
| "label": "light snow", | |
| "icon": "snow" | |
| }, | |
| "601": { | |
| "label": "snow", | |
| "icon": "snow" | |
| }, | |
| "602": { | |
| "label": "heavy snow", | |
| "icon": "snow" | |
| }, | |
| "611": { | |
| "label": "sleet", | |
| "icon": "sleet" | |
| }, | |
| "612": { | |
| "label": "shower sleet", | |
| "icon": "sleet" | |
| }, | |
| "615": { | |
| "label": "light rain and snow", | |
| "icon": "rain-mix" | |
| }, | |
| "616": { | |
| "label": "rain and snow", | |
| "icon": "rain-mix" | |
| }, | |
| "620": { | |
| "label": "light shower snow", | |
| "icon": "rain-mix" | |
| }, | |
| "621": { | |
| "label": "shower snow", | |
| "icon": "rain-mix" | |
| }, | |
| "622": { | |
| "label": "heavy shower snow", | |
| "icon": "rain-mix" | |
| }, | |
| "701": { | |
| "label": "mist", | |
| "icon": "sprinkle" | |
| }, | |
| "711": { | |
| "label": "smoke", | |
| "icon": "smoke" | |
| }, | |
| "721": { | |
| "label": "haze", | |
| "icon": "day-haze" | |
| }, | |
| "731": { | |
| "label": "sand, dust whirls", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "741": { | |
| "label": "fog", | |
| "icon": "fog" | |
| }, | |
| "751": { | |
| "label": "sand", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "761": { | |
| "label": "dust", | |
| "icon": "dust" | |
| }, | |
| "762": { | |
| "label": "volcanic ash", | |
| "icon": "smog" | |
| }, | |
| "771": { | |
| "label": "squalls", | |
| "icon": "day-windy" | |
| }, | |
| "781": { | |
| "label": "tornado", | |
| "icon": "tornado" | |
| }, | |
| "800": { | |
| "label": "clear sky", | |
| "icon": "sunny" | |
| }, | |
| "801": { | |
| "label": "few clouds", | |
| "icon": "cloudy" | |
| }, | |
| "802": { | |
| "label": "scattered clouds", | |
| "icon": "cloudy" | |
| }, | |
| "803": { | |
| "label": "broken clouds", | |
| "icon": "cloudy" | |
| }, | |
| "804": { | |
| "label": "overcast clouds", | |
| "icon": "cloudy" | |
| }, | |
| "900": { | |
| "label": "tornado", | |
| "icon": "tornado" | |
| }, | |
| "901": { | |
| "label": "tropical storm", | |
| "icon": "hurricane" | |
| }, | |
| "902": { | |
| "label": "hurricane", | |
| "icon": "hurricane" | |
| }, | |
| "903": { | |
| "label": "cold", | |
| "icon": "snowflake-cold" | |
| }, | |
| "904": { | |
| "label": "hot", | |
| "icon": "hot" | |
| }, | |
| "905": { | |
| "label": "windy", | |
| "icon": "windy" | |
| }, | |
| "906": { | |
| "label": "hail", | |
| "icon": "hail" | |
| }, | |
| "951": { | |
| "label": "calm", | |
| "icon": "sunny" | |
| }, | |
| "952": { | |
| "label": "light breeze", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "953": { | |
| "label": "gentle breeze", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "954": { | |
| "label": "moderate breeze", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "955": { | |
| "label": "fresh breeze", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "956": { | |
| "label": "strong breeze", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "957": { | |
| "label": "high wind, near gale", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "958": { | |
| "label": "gale", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "959": { | |
| "label": "severe gale", | |
| "icon": "cloudy-gusts" | |
| }, | |
| "960": { | |
| "label": "storm", | |
| "icon": "thunderstorm" | |
| }, | |
| "961": { | |
| "label": "violent storm", | |
| "icon": "thunderstorm" | |
| }, | |
| "962": { | |
| "label": "hurricane", | |
| "icon": "cloudy-gusts" | |
| } | |
| }; | |
| var positionLink; | |
| var req; | |
| $("#click").click(function() { | |
| $("#click").hide(); | |
| $("#buttonClick").show(); | |
| if(navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| positionLink = "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=a87433b1a4a095b8ee441fb573032f7a"; | |
| req = $.getJSON(positionLink); | |
| req.then(function(resp) { | |
| var code = resp.weather[0].id; | |
| var icon = weatherIcons[code].icon; | |
| var today = new Date(); | |
| var hour = today.getHours(); | |
| var description = weatherIcons[code].label; | |
| var celcius = Math.round((resp.main.temp - 273.15)) + " ˚C"; | |
| if (code < 699 || (code > 800 && code < 899)) { | |
| if(hour > 6 && hour < 20) { | |
| $("#weatherIcon").html("<i class='wi wi-day-" + icon + "'></i>"); | |
| } | |
| else { | |
| if(icon == "sunny") { | |
| $("#weatherIcon").html("<i class='wi wi-night-clear'></i>"); | |
| } | |
| else { | |
| $("#weatherIcon").html("<i class='wi wi-night-alt-" + icon + "'></i>"); | |
| } | |
| } | |
| } | |
| else { | |
| $("#weatherIcon").html("<i class='wi wi-" + icon + "'></i>"); | |
| } | |
| $("#location").text(resp.name); | |
| $("#temp").text(celcius); | |
| $("#tempText").text(description); | |
| }); | |
| }); | |
| } | |
| }); | |
| $("#buttonClick").click(function() { | |
| var tempSplit = $("#temp").text().split(' '); | |
| if (tempSplit[1] == "˚C") { | |
| $("#temp").text(Math.round((tempSplit[0]*1.8) + 32) + " ˚F"); | |
| } | |
| else { | |
| $("#temp").text(Math.round((tempSplit[0]-32) / 1.8) + " ˚C"); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="startButton"> | |
| <button id="click"> | |
| CHECK YOUR<br>LOCAL WEATHER | |
| </button> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-3"></div> | |
| <div class="col-lg-6" id="location"></div> | |
| <div class="col-lg-3"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-lg-3"></div> | |
| <div class="col-lg-6"> | |
| <div class="row"> | |
| <div class="col-lg-6" id="weatherIcon"></div> | |
| <div class="col-lg-6"> | |
| <div class="row"> | |
| <div id="temp"></div> | |
| </div> | |
| <div class="row"> | |
| <div > | |
| <button id="buttonClick" style="display: none">Change C / F</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-3"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-lg-3"></div> | |
| <div class="col-lg-6" id="tempText"></div> | |
| <div class="col-lg-3"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment