I am currently working on a weather application using ES6 which is intended to suggest a song from Spotify based on the current weather conditions and forecast. However, I have encountered an issue where if a user performs consecutive searches for different locations, the app continues to display the song from the initial search.
My current approach involves hiding song tracks in CSS using the 'display: none' property and then toggling their display to 'block' in JavaScript based on the search results using if-statements. I am now seeking a solution to remove the first song displayed from the initial search.
I attempted to replace the if-statements with a switch statement, but it resulted in all songs being hidden. Another idea I have is to utilize classList, although I am unsure of the implementation...
CSS
#musicRain,
#musicClear,
#musicThunderstorm,
#musicSnow,
#musicClouds,
#musicAtmosphere {
display: none;
}
JS
function showCurrentWeather(response) {
let currentTemperature = document.querySelector("#currentTemperature");
currentTemperature.innerHTML = `${Math.round(response.data.main.temp)}°C`;
[etc... ]
if (response.data.weather[0].main === "Clear") {
document.getElementById("musicClear").style.display = "block";
}
if (response.data.weather[0].main === "Drizzle") {
document.getElementById("musicDrizzle").style.display = "block";
}
if (response.data.weather[0].main === "Rain") {
document.getElementById("musicRain").style.display = "block";
}
if (response.data.weather[0].main === "Clouds") {
document.getElementById("musicClouds").style.display = "block";
} else {
document.getElementById("musicAtmosphere").style.display = "block";
}
}