Why does my JavaScript code not update the weather information on the webpage?

I am developing a weather forecast web application using HTML, CSS, and JavaScript. The application is supposed to fetch weather data from a backend service and display it dynamically on the page, but the weather information is not being updated as expected. Here is the relevant part of my JavaScript and Java code:

package weatherController;

import weather.Weather;
import weatherService.WeatherService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class WeatherController {

    @Autowired
    private WeatherService weatherService;

    @GetMapping("/weather/{city}")
    public Weather getWeatherForCity(@PathVariable String city) {
        return weatherService.getWeather(city);
    }
}

package weatherService;



import weather.Weather;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

@RestController
public class WeatherService{

    @Value("${api.weather.key}")
    private String apiKey;

    private static final String WEATHER_URL = "http://api.weatherapi.com/v1/current.json";

    @GetMapping("/weather")
    public Weather getWeather(@RequestParam String city) {
        String url = String.format("%s?key=%s&q=%s", WEATHER_URL, apiKey, city);
        RestTemplate restTemplate = new RestTemplate();
        return restTemplate.getForObject(url, Weather.class);
    }
}

import conditions from './conditions.js';

console.log(conditions);


const header = document.querySelector('.header');
const form = document.querySelector('#form');
const input = document.querySelector('#inputCity');


function removeCard() {
    const prevCard = document.querySelector('.card');
    if (prevCard) prevCard.remove();
}


function showError(errorMessage) {
    const html = `<div class="card">${errorMessage}</div>`;
    header.insertAdjacentHTML('afterend', html);
}


function showCard({ name, country, temp, condition, imgPath }) {
    const html = `<div class="card">
        <h2 class="card-city">${name} <span>${country}</span></h2>
        <div class="card-weather">
            <div class="card-value">${temp}<sup>°C</sup></div>
            <img class="card-img" src="${imgPath}" alt="Weather">
        </div>
        <div class="card-description">${condition}</div>
    </div>`;
    header.insertAdjacentHTML('afterend', html);
}


async function getWeather(city) {
    const url = `http://localhost:8080/weather?city=${encodeURIComponent(city)}`;
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    return data;
}


form.onsubmit = async function (e) {
    e.preventDefault();
    let city = input.value.trim();
    const data = await getWeather(city);

    if (data.error) {
        removeCard();
        showError(data.error.message);
    } else {
        removeCard();
       
        const info = conditions.find(obj => obj.code === data.current.condition.code);
        const filePath = './img/' + (data.current.is_day ? 'day' : 'night') + '/';
        const fileName = (data.current.is_day ? info.day : info.night) + '.png';
        const imgPath = filePath + fileName;
        
        const weatherData = {
            name: data.location.name,
            country: data.location.country,
            temp: data.current.temp_c,
            condition: data.current.condition.text,
            imgPath
        };

        showCard(weatherData); 
    }
};

1. Ensuring the backend API is returning the correct JSON data.

2. Checking that all DOM elements (input, form, and .card) exist in the HTML.

3. Confirming there are no console errors related to fetching or parsing data.