diff --git a/index.html b/index.html index c0493bd..5a361df 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,3 @@ - - - @@ -33,13 +30,7 @@
Wind speed: 6.2 km/h
- +
diff --git a/script.js b/script.js index 1e1d451..e57955c 100644 --- a/script.js +++ b/script.js @@ -2,51 +2,73 @@ const API_KEY = "9cc4edd6d8064a5b7d8fea55305f7c1d" const geocode_API_KEY = "5333f43e8a7a4553abee4745425cae8b" const geocode_API_URL = "https://api.opencagedata.com/geocode/v1/json" const API_URL = "https://api.openweathermap.org/data/2.5/" +const ICON_URL = "https://openweathermap.org/img/wn/" -let weather = { - fetchWeather: function (city) { - fetch(`${API_URL}weather?q=${city}&units=metric&appid=${API_KEY}`) - .then((response) => { // error part if it fails - if (!response.ok) { - alert("No weather found."); - throw new Error("No weather found."); - } - return response.json(); - }) - .then((data) => this.displayWeather(data)); - }, - displayWeather: function (data) { - const { name } = data; - const { icon, description } = data.weather[0]; - const { temp, humidity } = data.main; - const { speed } = data.wind; - document.querySelector(".city").innerText = `Weather in ${name}`; - document.querySelector(".icon").src = `https://openweathermap.org/img/wn/${icon}.png`; - document.querySelector(".description").innerText = description; - document.querySelector(".temp").innerText = `${temp} °C`; - document.querySelector(".humidity").innerText = `Humidity: ${humidity}%`; - document.querySelector(".wind").innerText = `Wind speed: ${speed}km/h`; - document.querySelector(".weather").classList.remove("loading"); - document.body.style.backgroundImage = `var(--${data.weather[0].main})`; - }, - search: function () { - this.fetchWeather(document.querySelector(".search-bar").value); - }, -}; - -let forcast = { - fetchForcast: function(latitude, longitude) { - fetch(`${API_URL}forcast?lat=${latitude}&lon${longitude}&apiid=${API_KEY}`) +let forecast = { + fetchforecast: function(city) { + fetch(`${API_URL}forecast?q=${city}&units=metric&appid=${API_KEY}`) .then((responce) => { if (!responce.ok) { - alert("No forcast found"); - throw new Error("No forcast found."); + alert("No forecast found"); + throw new Error("No forecast found."); } return responce.json(); - }).then((data) => this.displayForcast(data)); + }).then((data) => this.displayforecast(data)); }, - displayForcast: function(data) { - + displayforecast: function(data) { + // Get latest weather data for each day + let days = []; + for (let i = 0; i < data.list.length; i++) { + let exists = false + for (let j = 0; j < days.length; j++) { + if (days[j].dt_txt.substr(0, 10) == data.list[i].dt_txt.substr(0, 10)) { + days[j] = data.list[i] + exists = true + break + } + } + + if (!exists) days.push(data.list[i]) + } + + // Display todays data + document.querySelector(".city").innerText = `Weather in ${data.city.name}`; + document.querySelector(".icon").src = `${ICON_URL}${days[0].weather[0].icon}.png`; + document.querySelector(".description").innerText = days[0].weather[0].description; + document.querySelector(".temp").innerText = `${Math.round(days[0].main.temp)} °C`; + document.querySelector(".humidity").innerText = `Humidity: ${days[0].main.humidity}%`; + document.querySelector(".wind").innerText = `Wind speed: ${days[0].wind.speed}km/h`; + document.querySelector(".weather").classList.remove("loading"); + document.body.style.backgroundImage = `var(--${days[0].weather[0].main})`; + + // Display next 5 days data + const weekday = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; + let d, day, forecastElem, forecastIcon, forecastDay, forecastTemp; + document.getElementById("week-list").innerHTML = ""; + for (let i = 1; i < days.length; i++) { + + d = new Date(days[i].dt_txt); + day = weekday[d.getDay()]; + + // Construct element + forecastIcon = document.createElement("img"); + forecastIcon.src = `${ICON_URL}${days[i].weather[0].icon}.png`; + forecastDay = document.createElement("span"); + forecastDay.classList.add("day-name"); + forecastDay.innerHTML = day; + forecastTemp = document.createElement("span"); + forecastTemp.classList.add("day-temp"); + forecastTemp.innerHTML = `${Math.round(days[i].main.temp)}°C`; + forecastElem = document.createElement("li"); + forecastElem.appendChild(forecastIcon); + forecastElem.appendChild(forecastDay); + forecastElem.appendChild(forecastTemp); + + document.getElementById("week-list").appendChild(forecastElem); + } + }, + search: function() { + this.fetchforecast(document.querySelector(".search-bar").value); } } @@ -67,8 +89,7 @@ let geocode = { if (request.status == 200) { // Success! var data = JSON.parse(request.responseText); - weather.fetchWeather(data.results[0].components.city); - console.log(data.results[0].components.city) + forecast.fetchforecast(data.results[0].components.city); } else if (request.status <= 500) { // We reached our target server, but it returned an error @@ -95,19 +116,19 @@ let geocode = { navigator.geolocation.getCurrentPosition(success, console.error); } else { - weather.fetchWeather("Surrey"); + forecast.fetchforecast("Surrey"); } } }; document.querySelector(".search button").addEventListener("click", function () { - weather.search(); + forecast.search(); }); document.querySelector(".search-bar") .addEventListener("keyup", function (event) { if (event.key == "Enter") { - weather.search(); + forecast.search(); } }); diff --git a/style.css b/style.css index 8562c6f..a37e3f2 100644 --- a/style.css +++ b/style.css @@ -22,12 +22,12 @@ body { } .card { - background: #000000d0; + background: rgba(0, 0, 0, 0.65); color: white; padding: 1.5em; border-radius: 40px; width: 100%; - max-width: 420px; + max-width: 520px; margin: 1em; } @@ -67,7 +67,7 @@ button:hover { } h1.temp { - margin: 0; + margin: 10px; margin-bottom: 0.3em; } @@ -82,6 +82,10 @@ h1.temp { margin-top: 1em; } +.weather { + margin-left: 43px; +} + .weather.loading { visibility: hidden; max-height: 20px; @@ -110,9 +114,6 @@ h1.temp { } .week-list>li { - border: solid; - border-width: 1px; - border-color: rgba(255, 255, 255, 0.4); float: left; padding: 15px; cursor: pointer; @@ -122,13 +123,14 @@ h1.temp { border-radius: 10px; margin: 4px; align-items: center; + background: #7c7c7c2b; } .week-list>li:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); - background: #7c7c7c2b; + background: #7c7c7c6b; outline: none; -webkit-box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2)