← Back to Hub

I've hit a roadblock!

Unfortunately, I encountered a lot of errors in this phase and phase six, such as the pesky ⚠️ Network error. Check your connection. and the ❌ Could not get weather data.

The Plot Twist: I tried a LOT of things, going even as far as deleting all my JS and starting over from scratch! Turns out it was just an error with my computer :)

🚧 Phase 5: The Roadblock...

"If it can go wrong, it will..."

I’ve preserved the code and logic I attempted during my "Roadblock Phase" below for future reference.


My First Attempt
async function handleSearch() {
    const cityName = cityInput.value.trim();
    if (!cityName) return;
    display.innerHTML = "Searching...";

    try {
        const safeName = encodeURIComponent(cityName);
        const geoUrl = `https://open-meteo.com{safeName}&count=1&language=en&format=json`;

        const geoResponse = await fetch(geoUrl);
        
        if (!geoResponse.ok) {
            throw new Error(`Server responded with ${geoResponse.status}`);
        }

        const geoData = await geoResponse.json();

        if (!geoData.results || geoData.results.length === 0) {
            display.innerHTML = `No results found for "${cityName}".`;
            return;
        }

        const { latitude, longitude, name, admin1, country } = geoData.results[0];
        const locationLabel = admin1 ? `${name}, ${admin1}` : `${name}, ${country}`;

        fetchWeather(latitude, longitude, locationLabel);

    } catch (error) {
        display.innerHTML = "⚠️ Network error. Check console (F12) for details.";
        console.error("DEBUG INFO:", error.message);
    }
}
My Second Attempt (Timeout Logic)
async function handleSearch() {
    const cityName = cityInput.value.trim();
    if (!cityName) return;
    display.innerHTML = "Connecting...";
    try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000);

        const geoUrl = `https://open-meteo.com{encodeURIComponent(cityName)}&count=1`;
        
        const response = await fetch(geoUrl, { signal: controller.signal });
        clearTimeout(timeoutId);

        const data = await response.json();
        if (!data.results) {
            display.innerHTML = "City not found.";
            return;
        }

        fetchWeather(data.results[0].latitude, data.results[0].longitude, data.results[0].name);
    } catch (err) {
        display.innerHTML = err.name === 'AbortError' ? "Request timed out." : "Blocked by browser or Ad-blocker.";
        console.error("Full Error:", err);
    }
}