|
| 1 | +// SELECT ELEMENTS |
| 2 | +const iconElement = document.querySelector(".weather-icon"); |
| 3 | +const tempElement = document.querySelector(".temperature-value p"); |
| 4 | +const descElement = document.querySelector(".temperature-description p"); |
| 5 | +const locationElement = document.querySelector(".location p"); |
| 6 | +const notificationElement = document.querySelector(".notification"); |
| 7 | + |
| 8 | +// OUR APPLICATION DATA |
| 9 | +const weather = {}; |
| 10 | + |
| 11 | +weather.temperature = { |
| 12 | + unit : "celsius" |
| 13 | +}; |
| 14 | + |
| 15 | +// APP CONSTANTS AND VARS |
| 16 | +const KELVIN = 273; |
| 17 | + |
| 18 | +// API KEY |
| 19 | +const key = "82005d27a116c2880c8f0fcb866998a0"; |
| 20 | + |
| 21 | +// CHECK IF BROWSER SUPPORT GEOLOCATION and GET LOCATION |
| 22 | +if("geolocation" in navigator){ |
| 23 | + navigator.geolocation.getCurrentPosition(setPosition, showError); |
| 24 | + |
| 25 | +}else{ |
| 26 | + notificationElement.style.display = "block"; |
| 27 | + notificationElement.innerHTML = "<p>Browser Doesn't Support Geolocation.</p>"; |
| 28 | +} |
| 29 | + |
| 30 | +// SET POSITION |
| 31 | +function setPosition(position){ |
| 32 | + console.log(position); |
| 33 | + let latitude = position.coords.latitude; |
| 34 | + let longitude = position.coords.longitude; |
| 35 | + |
| 36 | + getWeather(latitude, longitude); |
| 37 | +} |
| 38 | + |
| 39 | +// GET WEATHER FROM API |
| 40 | +function getWeather(latitude, longitude){ |
| 41 | + let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`; |
| 42 | + fetch(api) |
| 43 | + .then(function(response){ |
| 44 | + let data = response.json(); |
| 45 | + return data; |
| 46 | + |
| 47 | + }).then(function(data){ |
| 48 | + weather.temperature.value = Math.floor(data.main.temp - KELVIN); // Celsius |
| 49 | + weather.description = data.weather[0].description; |
| 50 | + weather.iconId = data.weather[0].icon; |
| 51 | + weather.city = data.name; |
| 52 | + weather.country = data.sys.country; |
| 53 | + }).then(function(){ |
| 54 | + displayWeather(); |
| 55 | + }); |
| 56 | +} |
| 57 | + |
| 58 | +// SHOW ERROR |
| 59 | +function showError(error) { |
| 60 | + notificationElement.style.display = "block"; |
| 61 | + notificationElement.innerHTML = `<p> ${error.message} </p>`; |
| 62 | +} |
| 63 | + |
| 64 | +// toggle fahrenheit ans celcius |
| 65 | +tempElement.addEventListener("click", function(){ |
| 66 | + if(weather.temperature.value === undefined) return; |
| 67 | + if(weather.temperature.unit === "celsius"){ |
| 68 | + |
| 69 | + let fahrenheit = celsiusToFahrenheit(weather.temperature.value); |
| 70 | + fahrenheit = Math.floor(fahrenheit); |
| 71 | + |
| 72 | + tempElement.innerHTML = `${fahrenheit}° <span>F</span>`; |
| 73 | + weather.temperature.unit = "fahrenheit" |
| 74 | + }else{ |
| 75 | + tempElement.innerHTML = `${weather.temperature.value}° <span>F</span>`; |
| 76 | + weather.temperature.unit = "celsius" |
| 77 | + } |
| 78 | +}); |
| 79 | + |
| 80 | +// display weather info to ui |
| 81 | +function displayWeather(){ |
| 82 | + |
| 83 | + iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`; |
| 84 | + tempElement.innerHTML = `${weather.temperature.value}° <span>C</span>`; |
| 85 | + descElement.innerHTML = weather.description; |
| 86 | + locationElement.innerHTML = `${weather.city}, ${weather.country}`; |
| 87 | +} |
| 88 | + |
| 89 | +// °C to °F conversion |
| 90 | +function celsiusToFahrenheit(temperature){ |
| 91 | + // (0 °C × 9/5) + 32 = 32 °F |
| 92 | + return (temperature * 9/5) + 32; |
| 93 | +} |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | + |
| 100 | + |
0 commit comments