Error that appears solve it : API issue. Please try again later.

index.html

@@ -150,27 +150,24 @@
             document.getElementById('error').classList.add('hidden');
             try {
                 // Fetch current weather
-                const currentWeatherResponse = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=YOUR_API_KEY`);
+                // First get coordinates for location
+                const geoResponse = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${location}&count=1`);
+                if (!geoResponse.ok) throw new Error('Location service unavailable');
+                const geoData = await geoResponse.json();
                 
-                if (!currentWeatherResponse.ok) {
-                    if (currentWeatherResponse.status === 404) {
-                        throw new Error('City not found. Try a different spelling or nearby location.');
-                    } else if (currentWeatherResponse.status === 401) {
-                        throw new Error('API issue. Please try again later.');
-                    } else {
-                        throw new Error(`Error: ${currentWeatherResponse.statusText}`);
-                    }
+                if (!geoData.results || geoData.results.length === 0) {
+                    throw new Error('City not found. Try a different spelling or nearby location.');
                 }
+                
+                const { latitude, longitude } = geoData.results[0];
+                
+                // Fetch current weather and forecast in one call
+                const weatherResponse = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto`);
+                if (!weatherResponse.ok) throw new Error('Weather service unavailable');
+                const weatherData = await weatherResponse.json();
 
-                const currentWeatherData = await currentWeatherResponse.json();
-
-                // Fetch forecast
-                const forecastResponse = await fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${location}&units=metric&appid=YOUR_API_KEY`);
-                if (!forecastResponse.ok) throw new Error('Forecast data unavailable');
-                const forecastData = await forecastResponse.json();
-
-                // Validate we got data for the city
-                if (currentWeatherData.cod !== 200 || forecastData.cod !== "200") {
+                // Validate we got data
+                if (!weatherData.current_weather || !weatherData.daily) {
                     throw new Error('Incomplete weather data received');
                 }
 // Update UI with current weather
@@ -190,45 +187,84 @@
                 document.getElementById('error-message').textContent = error.message;
 }
         }
-
         function updateCurrentWeather(data) {
-            document.getElementById('location').textContent = `${data.name}, ${data.sys.country}`;
-            document.getElementById('date').textContent = new Date(data.dt * 1000).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
-            document.getElementById('temp').textContent = `${Math.round(data.main.temp)}°C`;
-            document.getElementById('weather-desc').textContent = data.weather[0].description;
-            document.getElementById('wind-speed').textContent = `${data.wind.speed} km/h`;
-            document.getElementById('humidity').textContent = `${data.main.humidity}%`;
-            document.getElementById('pressure').textContent = `${data.main.pressure} hPa`;
-            document.getElementById('visibility').textContent = `${data.visibility / 1000} km`;
+            const current = data.current_weather;
+            const date = new Date(current.time);
+            
+            document.getElementById('location').textContent = document.getElementById('location-input').value;
+            document.getElementById('date').textContent = date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+            document.getElementById('temp').textContent = `${Math.round(current.temperature)}°C`;
+            
+            // Map weather codes to descriptions
+            const weatherCodes = {
+                0: 'Clear sky',
+                1: 'Mainly clear',
+                2: 'Partly cloudy',
+                3: 'Overcast',
+                45: 'Fog',
+                48: 'Depositing rime fog',
+                51: 'Light drizzle',
+                53: 'Moderate drizzle',
+                55: 'Dense drizzle',
+                56: 'Light freezing drizzle',
+                57: 'Dense freezing drizzle',
+                61: 'Slight rain',
+                63: 'Moderate rain',
+                65: 'Heavy rain',
+                66: 'Light freezing rain',
+                67: 'Heavy freezing rain',
+                71: 'Slight snow fall',
+                73: 'Moderate snow fall',
+                75: 'Heavy snow fall',
+                77: 'Snow grains',
+                80: 'Slight rain showers',
+                81: 'Moderate rain showers',
+                82: 'Violent rain showers',
+                85: 'Slight snow showers',
+                86: 'Heavy snow showers',
+                95: 'Thunderstorm',
+                96: 'Thunderstorm with slight hail',
+                99: 'Thunderstorm with heavy hail'
+            };
+            
+            const weatherDesc = weatherCodes[current.weathercode] || 'Unknown';
+            document.getElementById('weather-desc').textContent = weatherDesc;
+            document.getElementById('wind-speed').textContent = `${current.windspeed} km/h`;
 
-            // Update weather icon
+            // Update weather icon with placeholder since Open-Meteo doesn't provide icons
             const weatherIcon = document.getElementById('weather-icon');
-            weatherIcon.innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="${data.weather[0].description}">`;
-        }
-
+            weatherIcon.innerHTML = `<img src="http://static.photos/weather/200x200/${current.weathercode}" alt="${weatherDesc}">`;
+}
         function updateForecast(data) {
             const forecastContainer = document.getElementById('forecast');
             forecastContainer.innerHTML = '';
 
-            // Filter to get one forecast per day (every 24 hours)
-            const dailyForecasts = data.list.filter((forecast, index) => index % 8 === 0);
+            const weatherCodes = {
+                0: 'Clear', 1: 'Mainly clear', 2: 'Partly cloudy', 3: 'Overcast',
+                45: 'Fog', 48: 'Rime fog', 51: 'Drizzle', 53: 'Drizzle', 55: 'Drizzle',
+                61: 'Rain', 63: 'Rain', 65: 'Rain', 80: 'Showers', 81: 'Showers', 82: 'Showers',
+                71: 'Snow', 73: 'Snow', 75: 'Snow', 85: 'Snow', 86: 'Snow',
+                95: 'Thunderstorm', 96: 'Thunderstorm', 99: 'Thunderstorm'
+            };
 
-            dailyForecasts.forEach(forecast => {
-                const date = new Date(forecast.dt * 1000);
+            for (let i = 0; i < 5; i++) {
+                const date = new Date(data.daily.time[i]);
                 const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
+                const weatherCode = data.daily.weathercode[i];
+                const weatherDesc = weatherCodes[weatherCode] || 'Unknown';
                 
                 const forecastItem = document.createElement('div');
                 forecastItem.className = 'weather-card p-4 text-center forecast-item';
                 forecastItem.innerHTML = `
                     <p class="font-medium text-gray-800">${dayName}</p>
                     <p class="text-sm text-gray-600 mb-2">${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</p>
-                    <img src="https://openweathermap.org/img/wn/${forecast.weather[0].icon}.png" alt="${forecast.weather[0].description}" class="mx-auto w-16 h-16">
-                    <p class="text-gray-600 text-sm capitalize">${forecast.weather[0].description}</p>
+                    <img src="http://static.photos/weather/200x200/${weatherCode}" alt="${weatherDesc}" class="mx-auto w-16 h-16">
+                    <p class="text-gray-600 text-sm capitalize">${weatherDesc}</p>
                     <div class="flex justify-center gap-4 mt-2">
-                        <span class="font-bold text-gray-800">${Math.round(forecast.main.temp_max)}°</span>
-                        <span class="text-gray-600">${Math.round(forecast.main.temp_min)}°</span>
+                        <span class="font-bold text-gray-800">${Math.round(data.daily.temperature_2m_max[i])}°</span>
+                        <span class="text-gray-600">${Math.round(data.daily.temperature_2m_min[i])}°</span>
                     </div>
-                `;
+`;
                 forecastContainer.appendChild(forecastItem);
             });
         }