Почему мой код JavaScript не обновляет информацию о погоде на веб-странице?

Я разрабатываю веб-приложение с прогнозом погоды, используя HTML, CSS и JavaScript. Приложение должно получать данные о погоде из серверной службы и динамически отображать их на странице, но информация о погоде не обновляется должным образом. Вот соответствующая часть моего кода JavaScript и Java. Так же вот где браузер открывает локал хост http://localhost:8080/test/ :

package cz.tul.weatherController;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import cz.tul.weatherService.WeatherService;
import cz.tul.weather.Weather;

@RestController
public class WeatherController {

    @Autowired
    private WeatherService weatherService;

    @GetMapping("/test/weather")
    public ResponseEntity<?> getWeather(@RequestParam String city) {
        Weather weather = weatherService.getWeatherData(city);
        if (weather != null) {
            return ResponseEntity.ok(weather);
        } else {
            return ResponseEntity.badRequest().body("Failed to fetch weather data");
        }
    }
}


package cz.tul.weatherService;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;
import cz.tul.weather.Weather;

@Service
public class WeatherService {

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

    private final RestTemplate restTemplate;

    public WeatherService() {
        this.restTemplate = new RestTemplate();
    }

    public Weather getWeatherData(String city) {
        String url = String.format("http://api.weatherapi.com/v1/current.json?key=%s&q=%s", apiKey, city);
        try {
            return restTemplate.getForObject(url, Weather.class);
        } catch (Exception e) {
            return null; 
        }
    }
}

document.addEventListener("DOMContentLoaded", function () {
    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 error">${errorMessage}</div>`;
        header.insertAdjacentHTML('afterend', html);
    }

    // Function to show the weather data card on the web page
    function showCard(weatherData) {
        const { location, current } = weatherData;
        const html = `
            <div class="card">
                <h2 class="card-city">${location.name}, ${location.country}</h2>
                <div class="card-weather">
                    <div class="card-value">${current.temp_c}<sup>°C</sup></div>
                    <img class="card-img" src="https:${current.condition.icon}" alt="Weather icon">
                </div>
                <div class="card-description">${current.condition.text}</div>
            </div>`;
        header.insertAdjacentHTML('afterend', html);
    }

    // Event listener for form submission
    form.onsubmit = async function (e) {
        e.preventDefault(); 
        const city = input.value.trim();
        if (!city) {
            showError("Please enter a city name.");
            return;
        }

        removeCard();

        try {
            const response = await fetch(`http://localhost:8080/weather?city=${encodeURIComponent(city)}`);
            if (!response.ok) {
                throw new Error('Failed to fetch weather data.'); 
            }
            const data = await response.json();
            if (data.error || !data.current) {
                showError(data.error.message || "No weather data available."); 
            } else {
                showCard(data); 
            }
        } catch (error) {
            showError(error.message || "Failed to fetch weather data. Please try again later."); 
        }
    };
});