script.js

let city = ''
let input = document.querySelector('#location')
let cityName = document.querySelector('#cityName')
let countryName = document.querySelector('#countryName')
let temp = document.querySelector('#temperature')
let condition = document.querySelector('#condition')
let icon = document.querySelector('#weather-icon')
let response;
let data;

async function London() {
    response = await fetch(`https://api.weatherapi.com/v1/current.json?key=704e4be1ec21428ab30100713252108&q=London`)
    data = await response.json();
    cityName.innerHTML =  data.location.name
    countryName.innerHTML =  data.location.country
    temp.innerHTML = data.current.temp_c + ' °C'
    condition.innerHTML = data.current.condition.text
    icon.setAttribute('src' , data.current.condition.icon)
}

London()

input.addEventListener('keydown' , async (e)=>{
    if(e.key == 'Enter'){
        city = input.value;
        response = await fetch(`https://api.weatherapi.com/v1/current.json?key=704e4be1ec21428ab30100713252108&q=${city}`)
        data = await response.json();
        cityName.innerHTML =  data.location.name
        countryName.innerHTML =  data.location.country
        temp.innerHTML = data.current.temp_c + ' °C'
        condition.innerHTML = data.current.condition.text
        icon.setAttribute('src' , data.current.condition.icon)
    }
})