Spaces:

Yfaite
/

undefined

Running

App Files Files Community

Yfaite commited on Oct 12, 2025

Commit

d12c2ff

verified ·

1 Parent(s): 8f6186d

Do the app from scratch

Browse files

Files changed (1) hide show

index.html +58 -133

index.html CHANGED Viewed

@@ -3,10 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cloudy With a Chance of Data</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         body {
@@ -39,13 +38,11 @@
 </head>
 <body class="py-8 px-4">
     <div class="max-w-4xl mx-auto">
-        <!-- Header -->
         <header class="text-center mb-8">
-            <h1 class="text-4xl font-bold text-gray-800 mb-2">Cloudy With a Chance of Data</h1>
-            <p class="text-gray-600">Your personal weather oracle</p>
         </header>
-        <!-- Search Bar -->
         <div class="flex mb-8 justify-center">
             <div class="relative w-full max-w-md">
                 <input
@@ -63,78 +60,63 @@
             </div>
         </div>
-        <!-- Current Weather -->
         <div id="current-weather" class="weather-card p-6 mb-8 text-center hidden">
             <div class="flex justify-between items-center mb-4">
                 <div class="text-left">
-                    <h2 id="location" class="text-2xl font-bold text-gray-800">New York, US</h2>
-                    <p id="date" class="text-gray-600">Friday, 15 October</p>
-                </div>
-                <div id="weather-icon" class="w-20 h-20">
-                    <!-- Weather icon will be inserted here -->
                 </div>
             </div>
             <div class="flex justify-around items-center">
                 <div>
-                    <p id="temp" class="text-5xl font-bold text-gray-800">22°C</p>
-                    <p id="weather-desc" class="text-gray-600">Partly Cloudy</p>
                 </div>
                 <div class="grid grid-cols-2 gap-4 text-sm">
                     <div class="flex items-center">
                         <i data-feather="wind" class="mr-2 text-blue-500"></i>
-                        <span id="wind-speed">5 km/h</span>
                     </div>
                     <div class="flex items-center">
                         <i data-feather="droplet" class="mr-2 text-blue-500"></i>
-                        <span id="humidity">65%</span>
                     </div>
                     <div class="flex items-center">
                         <i data-feather="compass" class="mr-2 text-blue-500"></i>
-                        <span id="pressure">1012 hPa</span>
                     </div>
                     <div class="flex items-center">
                         <i data-feather="eye" class="mr-2 text-blue-500"></i>
-                        <span id="visibility">10 km</span>
                     </div>
                 </div>
             </div>
         </div>
-        <!-- Forecast -->
         <div id="forecast-container" class="hidden">
             <h2 class="text-xl font-semibold text-gray-800 mb-4">5-Day Forecast</h2>
-            <div id="forecast" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-                <!-- Forecast items will be inserted here -->
-            </div>
         </div>
-        <!-- Loading State -->
         <div id="loading" class="text-center hidden">
             <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-2"></div>
             <p>Fetching weather data...</p>
         </div>
-        <!-- Error State -->
         <div id="error" class="text-center hidden">
             <i data-feather="alert-circle" class="text-red-500 w-12 h-12 mx-auto mb-2"></i>
-            <p id="error-message" class="text-red-500">Location not found. Please try another city.</p>
-            <div class="mt-4 text-sm text-gray-600">
-                <p>Search tips:</p>
-                <ul class="list-disc list-inside">
-                    <li>Check your spelling</li>
-                    <li>Try a nearby major city</li>
-                    <li>Include country code (e.g. "Paris, FR")</li>
-                </ul>
-            </div>
         </div>
-</div>
     <script>
         feather.replace();
-        // Initialize autocomplete
         const locationInput = document.getElementById('location-input');
         const searchBtn = document.getElementById('search-btn');
         // Debounce function to limit API calls
         function debounce(func, delay) {
             let timeout;
@@ -146,74 +128,14 @@
             };
         }
-        // Fetch location suggestions
-        async function fetchSuggestions(query) {
-            if (!query || query.length < 2) return;
-            try {
-                const response = await fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${query}&limit=5&appid=3fd7e0e3b5f5bf7f3a6cee1c6af5f8e0`);
-                if (!response.ok) return;
-                const data = await response.json();
-                return data;
-            } catch (error) {
-                console.error('Error fetching suggestions:', error);
-            }
-        }
-        // Show suggestions dropdown
-        function showSuggestions(suggestions) {
-            const dropdown = document.createElement('div');
-            dropdown.className = 'absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg max-h-60 overflow-auto';
-            dropdown.id = 'suggestions-dropdown';
-            suggestions.forEach(item => {
-                const suggestion = document.createElement('div');
-                suggestion.className = 'px-4 py-2 hover:bg-gray-100 cursor-pointer';
-                suggestion.textContent = `${item.name}, ${item.country}`;
-                suggestion.addEventListener('click', () => {
-                    locationInput.value = `${item.name}, ${item.country}`;
-                    dropdown.remove();
-                    fetchWeather();
-                });
-                dropdown.appendChild(suggestion);
-            });
-            // Remove existing dropdown if any
-            const existing = document.getElementById('suggestions-dropdown');
-            if (existing) existing.remove();
-            locationInput.parentNode.appendChild(dropdown);
-        }
-        // Handle input changes with debounce
-        locationInput.addEventListener('input', debounce(async (e) => {
-            const query = e.target.value.trim();
-            if (query.length >= 2) {
-                const suggestions = await fetchSuggestions(query);
-                if (suggestions && suggestions.length) {
-                    showSuggestions(suggestions);
-                }
-            }
-        }, 300));
-        // Handle click outside to close dropdown
-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('#suggestions-dropdown') && e.target !== locationInput) {
-                const dropdown = document.getElementById('suggestions-dropdown');
-                if (dropdown) dropdown.remove();
-            }
-        });
         // Handle search button and enter key
         searchBtn.addEventListener('click', fetchWeather);
-        locationInput.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter') {
-                const dropdown = document.getElementById('suggestions-dropdown');
-                if (dropdown) dropdown.remove();
-                fetchWeather();
-            }
         });
-async function fetchWeather() {
-            const location = document.getElementById('location-input').value.trim();
             if (!location) return;
             // Show loading state
@@ -221,74 +143,76 @@ async function fetchWeather() {
             document.getElementById('current-weather').classList.add('hidden');
             document.getElementById('forecast-container').classList.add('hidden');
             document.getElementById('error').classList.add('hidden');
             try {
-                // Fetch current weather
                 // First get coordinates for location
-                // Use OpenWeatherMap geocoding API which is more reliable
                 const geoResponse = await fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${location}&limit=1&appid=3fd7e0e3b5f5bf7f3a6cee1c6af5f8e0`);
                 if (!geoResponse.ok) throw new Error('Location service unavailable');
                 const geoData = await geoResponse.json();
                 if (!geoData || geoData.length === 0) {
-                    throw new Error('City not found. Try a different spelling or nearby location.');
                 }
                 const city = geoData[0];
                 const { lat: latitude, lon: longitude } = city;
-                const locationName = `${city.name}${city.state ? ', ' + city.state : ''}, ${city.country}`;
-// Fetch current weather and forecast in one call
-                // Use OpenWeatherMap API for weather data
                 const weatherResponse = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly,alerts&units=metric&appid=3fd7e0e3b5f5bf7f3a6cee1c6af5f8e0`);
-if (!weatherResponse.ok) throw new Error('Weather service unavailable');
                 const weatherData = await weatherResponse.json();
-                // Validate we got data
-                if (!weatherData.current_weather || !weatherData.daily) {
-                    throw new Error('Incomplete weather data received');
-                }
-                // Update UI with current weather
                 updateCurrentWeather(weatherData);
-                // Update UI with forecast
                 updateForecast(weatherData);
-// Hide loading, show weather
                 document.getElementById('loading').classList.add('hidden');
                 document.getElementById('current-weather').classList.remove('hidden');
                 document.getElementById('forecast-container').classList.remove('hidden');
             } catch (error) {
-                console.error('Error fetching weather:', error);
                 document.getElementById('loading').classList.add('hidden');
                 document.getElementById('error').classList.remove('hidden');
                 document.getElementById('error-message').textContent = error.message;
-}
         }
         function updateCurrentWeather(data) {
             const current = data.current;
             const date = new Date(current.dt * 1000);
             document.getElementById('location').textContent = locationName;
-document.getElementById('date').textContent = date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
-            document.getElementById('temp').textContent = `${Math.round(current.temp)}°C`;
-            const weatherDesc = current.weather[0].description;
-            document.getElementById('weather-desc').textContent = weatherDesc.charAt(0).toUpperCase() + weatherDesc.slice(1);
             document.getElementById('wind-speed').textContent = `${current.wind_speed} km/h`;
             document.getElementById('humidity').textContent = `${current.humidity}%`;
             document.getElementById('pressure').textContent = `${current.pressure} hPa`;
             document.getElementById('visibility').textContent = `${current.visibility / 1000} km`;
-            // Update weather icon with OpenWeatherMap icon
             const weatherIcon = document.getElementById('weather-icon');
-            weatherIcon.innerHTML = `<img src="https://openweathermap.org/img/wn/${current.weather[0].icon}@2x.png" alt="${weatherDesc}">`;
-}
         function updateForecast(data) {
             const forecastContainer = document.getElementById('forecast');
             forecastContainer.innerHTML = '';
             for (let i = 0; i < 5; i++) {
                 const forecast = data.daily[i];
                 const date = new Date(forecast.dt * 1000);
                 const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
                 const weatherDesc = forecast.weather[0].description;
-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>
@@ -298,16 +222,17 @@ const forecastItem = document.createElement('div');
                     <div class="flex justify-center gap-4 mt-2">
                         <span class="font-bold text-gray-800">${Math.round(forecast.temp.max)}°</span>
                         <span class="text-gray-600">${Math.round(forecast.temp.min)}°</span>
-</div>
-`;
                 forecastContainer.appendChild(forecastItem);
             }
-// Example: Load default weather for London on page load (more reliable)
-        // Load default weather for London on page load
         window.addEventListener('load', () => {
             locationInput.value = 'London, UK';
             fetchWeather();
         });
-</script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         body {
 </head>
 <body class="py-8 px-4">
     <div class="max-w-4xl mx-auto">
         <header class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">Weather Dashboard</h1>
+            <p class="text-gray-600">Get real-time weather updates</p>
         </header>
         <div class="flex mb-8 justify-center">
             <div class="relative w-full max-w-md">
                 <input
             </div>
         </div>
         <div id="current-weather" class="weather-card p-6 mb-8 text-center hidden">
             <div class="flex justify-between items-center mb-4">
                 <div class="text-left">
+                    <h2 id="location" class="text-2xl font-bold text-gray-800">Location</h2>
+                    <p id="date" class="text-gray-600">Date</p>
                 </div>
+                <div id="weather-icon" class="w-20 h-20"></div>
             </div>
             <div class="flex justify-around items-center">
                 <div>
+                    <p id="temp" class="text-5xl font-bold text-gray-800">0°C</p>
+                    <p id="weather-desc" class="text-gray-600">Weather</p>
                 </div>
                 <div class="grid grid-cols-2 gap-4 text-sm">
                     <div class="flex items-center">
                         <i data-feather="wind" class="mr-2 text-blue-500"></i>
+                        <span id="wind-speed">0 km/h</span>
                     </div>
                     <div class="flex items-center">
                         <i data-feather="droplet" class="mr-2 text-blue-500"></i>
+                        <span id="humidity">0%</span>
                     </div>
                     <div class="flex items-center">
                         <i data-feather="compass" class="mr-2 text-blue-500"></i>
+                        <span id="pressure">0 hPa</span>
                     </div>
                     <div class="flex items-center">
                         <i data-feather="eye" class="mr-2 text-blue-500"></i>
+                        <span id="visibility">0 km</span>
                     </div>
                 </div>
             </div>
         </div>
         <div id="forecast-container" class="hidden">
             <h2 class="text-xl font-semibold text-gray-800 mb-4">5-Day Forecast</h2>
+            <div id="forecast" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
         </div>
         <div id="loading" class="text-center hidden">
             <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-2"></div>
             <p>Fetching weather data...</p>
         </div>
         <div id="error" class="text-center hidden">
             <i data-feather="alert-circle" class="text-red-500 w-12 h-12 mx-auto mb-2"></i>
+            <p id="error-message" class="text-red-500">Location not found</p>
         </div>
+    </div>
     <script>
         feather.replace();
         const locationInput = document.getElementById('location-input');
         const searchBtn = document.getElementById('search-btn');
+        let locationName = '';
         // Debounce function to limit API calls
         function debounce(func, delay) {
             let timeout;
             };
         }
         // Handle search button and enter key
         searchBtn.addEventListener('click', fetchWeather);
+        locationInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') fetchWeather();
         });
+        async function fetchWeather() {
+            const location = locationInput.value.trim();
             if (!location) return;
             // Show loading state
             document.getElementById('current-weather').classList.add('hidden');
             document.getElementById('forecast-container').classList.add('hidden');
             document.getElementById('error').classList.add('hidden');
             try {
                 // First get coordinates for location
                 const geoResponse = await fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${location}&limit=1&appid=3fd7e0e3b5f5bf7f3a6cee1c6af5f8e0`);
                 if (!geoResponse.ok) throw new Error('Location service unavailable');
                 const geoData = await geoResponse.json();
                 if (!geoData || geoData.length === 0) {
+                    throw new Error('City not found');
                 }
                 const city = geoData[0];
                 const { lat: latitude, lon: longitude } = city;
+                locationName = `${city.name}${city.state ? ', ' + city.state : ''}, ${city.country}`;
+                // Fetch weather data
                 const weatherResponse = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly,alerts&units=metric&appid=3fd7e0e3b5f5bf7f3a6cee1c6af5f8e0`);
+                if (!weatherResponse.ok) throw new Error('Weather service unavailable');
                 const weatherData = await weatherResponse.json();
+                // Update UI
                 updateCurrentWeather(weatherData);
                 updateForecast(weatherData);
+                // Hide loading, show weather
                 document.getElementById('loading').classList.add('hidden');
                 document.getElementById('current-weather').classList.remove('hidden');
                 document.getElementById('forecast-container').classList.remove('hidden');
             } catch (error) {
+                console.error('Error:', error);
                 document.getElementById('loading').classList.add('hidden');
                 document.getElementById('error').classList.remove('hidden');
                 document.getElementById('error-message').textContent = error.message;
+            }
         }
         function updateCurrentWeather(data) {
             const current = data.current;
             const date = new Date(current.dt * 1000);
             document.getElementById('location').textContent = locationName;
+            document.getElementById('date').textContent = date.toLocaleDateString('en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            });
+            document.getElementById('temp').textContent = `${Math.round(current.temp)}°C`;
+            document.getElementById('weather-desc').textContent = current.weather[0].description;
             document.getElementById('wind-speed').textContent = `${current.wind_speed} km/h`;
             document.getElementById('humidity').textContent = `${current.humidity}%`;
             document.getElementById('pressure').textContent = `${current.pressure} hPa`;
             document.getElementById('visibility').textContent = `${current.visibility / 1000} km`;
             const weatherIcon = document.getElementById('weather-icon');
+            weatherIcon.innerHTML = `<img src="https://openweathermap.org/img/wn/${current.weather[0].icon}@2x.png" alt="${current.weather[0].description}">`;
+        }
         function updateForecast(data) {
             const forecastContainer = document.getElementById('forecast');
             forecastContainer.innerHTML = '';
             for (let i = 0; i < 5; i++) {
                 const forecast = data.daily[i];
                 const date = new Date(forecast.dt * 1000);
                 const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
                 const weatherDesc = forecast.weather[0].description;
+                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>
                     <div class="flex justify-center gap-4 mt-2">
                         <span class="font-bold text-gray-800">${Math.round(forecast.temp.max)}°</span>
                         <span class="text-gray-600">${Math.round(forecast.temp.min)}°</span>
+                    </div>
+                `;
                 forecastContainer.appendChild(forecastItem);
             }
+        }
+        // Load default weather on page load
         window.addEventListener('load', () => {
             locationInput.value = 'London, UK';
             fetchWeather();
         });
+    </script>
 </body>
+</html>