What am l missing here? [closed]

it’s the first time I’m posting here and i’m a beginner with API’s and I’m trying to make my own weather app. I can’t understand why is it not working. I believe there is a problem in my js code. Any thoughts or help?

const apiKey = '5e005f26bb4c4dd1a6b111343240510';
const apiUrl = 'http://api.weatherapi.com/v1/current.json?key={API_KEY}&q={CITY_NAME}';
const locationInput = document.getElementById('locationInput');
const searchButton = document.getElementById('searchButton');
const locationElement = document.getElementById('location');
const temperatureElement = document.getElementById('temperature');
const descriptionElement = document.getElementById('description');

searchButton.addEventListener('click', () => {
    const location = locationInput.value;
    if (location) {
        fetchWeather(location);
    }
});

function fetchWeather(location) {
    const url = `${apiUrl}?q=${location}&appid=${apiKey}&units=metric`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            locationElement.textContent = data.name;
            temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
            descriptionElement.textContent = data.weather[0].description;
        })
        .catch(error => {
            console.error('Error fetching weather data:', error);
        });
}

I’ve tried regenerate my API key but still nothing. It just doesn’t work.