How to add bg image to API weather project?-CodePudding

Hello lately i've been working with APIs to get the hang of them through the usual weather app project BUT i'm pretty much still a beginner in javascript and i was wondering how to add a background image that matches the weather report of the city selected by the user.

I wanted to create many classes in css, each called like the weather (ex: .clear, .clouds,.rain etc...) and then use a classList.add() method to change it each time depending on the openWeatherMap data. I tried adding something like document.getElementsByTagName("body")[0].classList.add(weatherValue); inside the .then promise but it doesn't work. Can somebody help me? If there's a much simpler way i'd like to hear about it too :) Thank you so much

var button = document.querySelector(".button");
var inputValue = document.querySelector(".inputValue");
var cityName = document.querySelector(".name");
var weather = document.querySelector(".weather");
var desc = document.querySelector(".desc");
var temp = document.querySelector(".temp");
var humi = document.querySelector(".humi");

button.addEventListener("click", function() {
    fetch("https://api.openweathermap.org/data/2.5/weather?q=" inputValue.value "&appid={myapikey}")
    .then(response => response.json())
    .then(data => {
        var nameValue = data['name'];
        var weatherValue = data['weather'][0]['main']; 
        var tempValue = data['main']['temp'];
        var descValue = data['weather'][0]['description'];
        var humiValue = data['main']['humidity'];
        
        cityName.innerHTML = nameValue;
        weather.innerHTML = weatherValue; // this gives "clear" "clouds" etc to <p> element
        desc.innerHTML = descValue;
        temp.innerHTML = "Temperature: "   tempValue;
        humi.innerHTML = "Humidity: "   humiValue;
        
    })

 
    .catch(err => alert("Wrong city name!"))
})

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Nunito", sans-serif;
    background-repeat: no-repeat;
    background-size: cover;
}


.input {
    text-align: center;
    margin: 100px 0;
}

input[type="text"] {
    height: 50px;
    width: 600px;
    background: #e7e7e7;
    font-family: "Nunito", sans-serif;
    font-weight: bold;
    font-size: 20px;
    border: none;
    border-radius: 2px;
    padding: 10px 10px;
}

input[type="submit"] {
    height: 50px;
    width: 100px;
    background: #e7e7e7;
    font-family: "Nunito", sans-serif;
    font-weight: bold;
    font-size: 20px;
    border: none;
    border-radius: 2px;
}

.display {
    text-align: center;
}


.clear {
    /* background image here */
}

.clouds {
  /* another background image here */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="weather_app.css">
</head>
<body>
    <div >
        <input type="text"  placeholder="Enter a city">
        <input type="submit" value="Submit" >
    </div>

    <div >
        <h1 ></h1>
        <p ></p>
        <p ></p>
        <p ></p>
        <p ></p>
    </div>
    
    <script src= "weather_app.js"></script>
</body>
</html>

CodePudding user response：

I did a project like this not long ago, https://github.com/Kroplewski-M/Weather-App , I used the openWeater API. I did this:

function setBackground(weather) {
  if (weather == "Rain") {
    background.src = "./resources/rainy-weather.jpg";
  } else if (weather == "Snow") {
    background.src = "./resources/snowy-weather.jpg";
  } else if (weather == "Clear") {
    background.src = "./resources/sunny-weather.jpg";
  } else if (weather == "Clouds") {
    background.src = "./resources/cloudy-weather.jpg";
  }
}

The openWeather API returns what condition the weather is so you can just if statement on what the condition is and set the background accordingly