How to add bg image to API weather project?

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 class="input">
        <input type="text" class="inputValue" placeholder="Enter a city">
        <input type="submit" value="Submit" class="button">
    </div>

    <div class="display">
        <h1 class="name"></h1>
        <p class="weather"></p>
        <p class="desc"></p>
        <p class="temp"></p>
        <p class="humi"></p>
    </div>
    
    <script src= "weather_app.js"></script>
</body>
</html>

Solution

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