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.
"If it can go wrong, it will..."
I’ve preserved the code and logic I attempted during my "Roadblock Phase" below for future reference.
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);
}
}
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);
}
}