First of all I’m not good at promises and get api. I’m building a weather app for learn these things but I stuck.

let input = document.querySelector("#search")
let key = "488400d8dc8ed03b97f50d625dbcb0e1"
const apiUrl = `https://api.openweathermap.org/data/2.5/`

input.addEventListener("input",()=>{
let query =  `${apiUrl}weather?q=${input.value.trim()}&appid=${key}&units=metric&lang=en`
console.log(query)

})

When I tried this code it’s work well. There is no problem but I have to use fetch for get a json.

let input = document.querySelector("#search")
let key = "488400d8dc8ed03b97f50d625dbcb0e1"
const apiUrl = `https://api.openweathermap.org/data/2.5/`

input.addEventListener("input",()=>{
let query =  `${apiUrl}weather?q=${input.value.trim()}&appid=${key}&units=metric&lang=en`
console.log(query)
fetch(query)
.then(data=>{
    data.json()
})
.catch(err=>{
    console.log(err)
})
})

But when I tried to this, fetch gives 400 bad request error. What is the problem or what I haven’t seen?