Data just adding up to previous result. I want to remove the previous one when inputting another city. I use openweather API.
I made refresh button to reload the page before entering another input. But I want is removing the previous result when inputting another city without reloading the page. I use javascript in this case.
function fetchWeather(city){
displayLoading();
const fetchAPI = fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api}&units=metric`);
fetchAPI.then(response => {
return response.json();
}).then(data => {
hideLoading();
displayWeather(data)
})
.catch(err => {
error.style.display = "block";
console.log(err);
})
}
//Fetch daily and hourly forecast
function fetchForecast(city) {
const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${api}&units=metric&cnt=25`;
fetch(url).then(response => {
return response.json();
}).then(data => displayForecast(data))
.catch(err => {
console.log(err);
})
}
//Display animated weather icon
function displayWeatherIcon(weather){
const icon = document.createElement("img");
switch(weather){
case "clear sky":
icon.setAttribute("src", "./images/clear-day.svg");
break;
case "few clouds":
icon.setAttribute("src", "./images/partly-cloudy-day.svg");
break;
case "scattered clouds":
icon.setAttribute("src", "./images/cloudy.svg");
break;
case "overcast clouds":
case "broken clouds":
icon.setAttribute("src", "./images/overcast.svg");
break;
case "shower rain":
icon.setAttribute("src", "./images/overcast-rain.svg");
break;
case "light rain":
case "moderate rain":
case "rain":
icon.setAttribute("src", "./images/overcast-day-drizzle.svg");
break;
case "thunderstorm":
icon.setAttribute("src", "./images/thunderstorm-overcast.svg");
break;
case "snow":
icon.setAttribute("src", "./images/snow.svg");
break;
case "mist":
icon.setAttribute("src", "./images/mist.svg");
break;
}
row.prepend(icon);
}
//Display weather informations from fetched api
function displayWeather(weather){
// console.log(weather);
const city = document.createElement("h1");
city.innerHTML = `${weather.name}, ${weather.sys.country}`;
header.prepend(city);
const weatherDesc = weather.weather[0].description;
displayWeatherIcon(weatherDesc);
const temp = document.createElement("p");
const temperature = weather.main.temp;
temp.innerHTML = `${temperature.toFixed()}°C`;
row.append(temp);
info.style.backgroundColor = "#F0F0F0";
const desc = document.createElement("p");
desc.innerHTML = weather.weather[0].description;
info.append(desc);
const cloudIcon = document.createElement("i");
cloudIcon.setAttribute("class","fas fa-cloud-sun-rain");
desc.prepend(cloudIcon);
const humidity = document.createElement("p");
humidity.innerHTML = `Humidity: ${weather.main.humidity}%`;
info.append(humidity);
const humidIcon = document.createElement("i");
humidIcon.setAttribute("class","fas fa-water");
humidity.prepend(humidIcon);
const wind = document.createElement("p");
wind.innerHTML = `Wind: ${weather.wind.speed} m/s`;
info.append(wind);
const windIcon = document.createElement("i");
windIcon.setAttribute("class","fas fa-wind");
wind.prepend(windIcon);
}
//Display daily forecast informations from fetched api
function displayForecast(forecast){
console.log(forecast.list);
const list = forecast.list;
for(let index = 7; index < list.length; index+=8){
const col_one = document.createElement("div");
const col_one_time = document.createElement("div");
let dateString = list[index].dt_txt;
let date = new Date(dateString).toLocaleDateString('en-us', {weekday:'long'})
let time = new Date(dateString).toLocaleTimeString('en-us', {hour: '2-digit', minute: '2-digit'})
col_one.setAttribute("class", `column-${index}`);
col_one.innerHTML = date;
col_one_time.innerHTML = time;
middle.append(col_one);
col_one.append(col_one_time);
let col_one_icon = document.createElement("img");
col_one_icon.setAttribute("src", "http://openweathermap.org/img/w/" + list[index].weather[0].icon + ".png");
col_one.append(col_one_icon);
let col_one_temp = document.createElement("div");
col_one_temp.innerHTML = `${list[index].main.temp.toFixed(0)}°C`;
col_one.append(col_one_temp);
}
}
function handleClick(event){
event.preventDefault();
const cityInput = document.getElementById("cityInput").value;
fetchWeather(cityInput);
fetchForecast(cityInput);
}
function refreshPage(){
window.location.reload();
}
button.addEventListener('click', handleClick);
refresh.addEventListener('click', refreshPage);