Spaces:

JupitersGirthyHug
/

anycoder-90931d45

Running

App Files Files Community

JupitersGirthyHug commited on Dec 3, 2025

Commit

b4b06e3

verified ·

1 Parent(s): 241556e

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +584 -376

index.html CHANGED Viewed

@@ -1,393 +1,601 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Weather App - Tuscaloosa, AL 35401</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        body {
-            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 20px;
-            color: #333;
-        }
-        .header {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 0;
-            max-width: 800px;
-        }
-        .header h1 {
-            color: white;
-            font-size: 2rem;
-            font-weight: 600;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-        .built-with {
-            color: white;
-            text-decoration: none;
-            font-size: 0.9rem;
-            opacity: 0.8;
-            transition: opacity 0.3s;
-        }
-        .built-with:hover {
-            opacity: 1;
-        }
-        .weather-card {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-            width: 100%;
-            max-width: 800px;
-            margin-top: 20px;
-            transition: transform 0.3s ease;
-        }
-        .weather-card:hover {
-            transform: translateY(-5px);
-        }
-        .location {
-            display: flex;
-            align-items: center;
-            margin-bottom: 20px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            padding-bottom: 15px;
-        }
-        .location i {
-            color: #74b9ff;
-            font-size: 1.5rem;
-            margin-right: 10px;
-        }
-        .location h2 {
-            font-size: 1.8rem;
-            font-weight: 600;
-            color: #2d3436;
-        }
-        .current-weather {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 30px;
-        }
-        .temperature {
-            display: flex;
-            align-items: center;
-        }
-        .temp-value {
-            font-size: 4rem;
-            font-weight: 700;
-            color: #2d3436;
-            line-height: 1;
-        }
-        .temp-unit {
-            font-size: 2rem;
-            color: #636e72;
-            margin-left: 5px;
-        }
-        .weather-icon {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .weather-icon i {
-            font-size: 5rem;
-            color: #fdcb6e;
-            margin-bottom: 10px;
-        }
-        .weather-description {
-            font-size: 1.3rem;
-            color: #636e72;
-            text-align: center;
-        }
-        .weather-details {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .detail {
-            display: flex;
-            align-items: center;
-            background: rgba(116, 185, 255, 0.1);
-            padding: 15px;
-            border-radius: 12px;
-        }
-        .detail i {
-            font-size: 1.5rem;
-            color: #74b9ff;
-            margin-right: 15px;
-            width: 30px;
-            text-align: center;
-        }
-        .detail-info h3 {
-            font-size: 0.9rem;
-            color: #636e72;
-            margin-bottom: 5px;
-        }
-        .detail-info p {
-            font-size: 1.2rem;
-            font-weight: 600;
-            color: #2d3436;
-        }
-        .forecast {
-            margin-top: 20px;
-        }
-        .forecast h3 {
-            font-size: 1.3rem;
-            margin-bottom: 15px;
-            color: #2d3436;
-            padding-bottom: 10px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        }
-        .forecast-days {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            gap: 15px;
-        }
-        .forecast-day {
-            background: rgba(116, 185, 255, 0.1);
-            padding: 15px;
-            border-radius: 12px;
-            text-align: center;
-        }
-        .forecast-day p {
-            margin-bottom: 10px;
-        }
-        .day-name {
-            font-weight: 600;
-            color: #2d3436;
-        }
-        .day-temp {
-            font-size: 1.2rem;
-            font-weight: 700;
-            color: #2d3436;
-        }
-        .day-icon {
-            color: #fdcb6e;
-            font-size: 1.5rem;
-            margin: 5px 0;
-        }
-        .loading {
-            text-align: center;
-            padding: 30px;
-            font-size: 1.2rem;
-            color: #636e72;
-        }
-        .error {
-            text-align: center;
-            padding: 30px;
-            font-size: 1.2rem;
-            color: #e74c3c;
-            background: rgba(231, 76, 60, 0.1);
-            border-radius: 12px;
-        }
-        @media (max-width: 768px) {
-            .current-weather {
-                grid-template-columns: 1fr;
-                gap: 20px;
-            }
-            .weather-details {
-                grid-template-columns: 1fr;
-            }
-            .forecast-days {
-                grid-template-columns: repeat(2, 1fr);
-            }
-            .temp-value {
-                font-size: 3rem;
-            }
-            .weather-icon i {
-                font-size: 4rem;
-            }
-        }
-        @media (max-width: 480px) {
-            .header {
-                flex-direction: column;
-                gap: 10px;
-                text-align: center;
-            }
-            .forecast-days {
-                grid-template-columns: 1fr;
-            }
-            .weather-card {
-                padding: 20px;
-            }
-        }
-    </style>
 </head>
 <body>
-    <div class="header">
-        <h1>Weather Forecast</h1>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a>
     </div>
-    <div class="weather-card">
-        <div class="location">
-            <i class="fas fa-map-marker-alt"></i>
-            <h2>Tuscaloosa, AL 35401, US</h2>
-        </div>
-        <div class="current-weather">
-            <div class="temperature">
-                <span class="temp-value" id="current-temp">78</span>
-                <span class="temp-unit">°F</span>
-            </div>
-            <div class="weather-icon">
-                <i class="fas fa-sun" id="weather-icon"></i>
-                <div class="weather-description" id="weather-desc">Sunny</div>
-            </div>
         </div>
-        <div class="weather-details">
-            <div class="detail">
-                <i class="fas fa-wind"></i>
-                <div class="detail-info">
-                    <h3>Wind Speed</h3>
-                    <p id="wind-speed">5 mph</p>
-                </div>
-            </div>
-            <div class="detail">
-                <i class="fas fa-tint"></i>
-                <div class="detail-info">
-                    <h3>Humidity</h3>
-                    <p id="humidity">65%</p>
-                </div>
-            </div>
-            <div class="detail">
-                <i class="fas fa-temperature-low"></i>
-                <div class="detail-info">
-                    <h3>Feels Like</h3>
-                    <p id="feels-like">80°F</p>
-                </div>
-            </div>
-            <div class="detail">
-                <i class="fas fa-compress-arrows-alt"></i>
-                <div class="detail-info">
-                    <h3>Pressure</h3>
-                    <p id="pressure">1012 hPa</p>
-                </div>
-            </div>
         </div>
-        <div class="forecast">
-            <h3>5-Day Forecast</h3>
-            <div class="forecast-days" id="forecast-container">
-                <!-- Forecast days will be populated by JavaScript -->
-            </div>
         </div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Since we can't actually call a weather API without a key,
-            // we'll simulate weather data for Tuscaloosa, AL 35401
-            // Simulate a brief loading delay
-            setTimeout(() => {
-                // Current weather data
-                const currentWeather = {
-                    temperature: 78,
-                    description: "Sunny",
-                    windSpeed: "5 mph",
-                    humidity: "65%",
-                    feelsLike: "80°F",
-                    pressure: "1012 hPa"
-                };
-                // Forecast data
-                const forecastData = [
-                    { day: "Mon", temp: 82, icon: "fa-sun" },
-                    { day: "Tue", temp: 79, icon: "fa-cloud-sun" },
-                    { day: "Wed", temp: 75, icon: "fa-cloud" },
-                    { day: "Thu", temp: 77, icon: "fa-cloud-showers-heavy" },
-                    { day: "Fri", temp: 81, icon: "fa-sun" }
-                ];
-                // Update current weather
-                document.getElementById('current-temp').textContent = currentWeather.temperature;
-                document.getElementById('weather-desc').textContent = currentWeather.description;
-                document.getElementById('wind-speed').textContent = currentWeather.windSpeed;
-                document.getElementById('humidity').textContent = currentWeather.humidity;
-                document.getElementById('feels-like').textContent = currentWeather.feelsLike;
-                document.getElementById('pressure').textContent = currentWeather.pressure;
-                // Update weather icon based on description
-                const weatherIcon = document.getElementById('weather-icon');
-                if (currentWeather.description.toLowerCase().includes("sunny")) {
-                    weatherIcon.className = "fas fa-sun";
-                } else if (currentWeather.description.toLowerCase().includes("cloud")) {
-                    weatherIcon.className = "fas fa-cloud";
-                } else if (currentWeather.description.toLowerCase().includes("rain")) {
-                    weatherIcon.className = "fas fa-cloud-rain";
-                }
-                // Populate forecast
-                const forecastContainer = document.getElementById('forecast-container');
-                forecastData.forEach(day => {
-                    const dayElement = document.createElement('div');
-                    dayElement.className = 'forecast-day';
-                    dayElement.innerHTML = `
-                        <p class="day-name">${day.day}</p>
-                        <i class="fas ${day.icon} day-icon"></i>
-                        <p class="day-temp">${day.temp}°F</p>
-                    `;
-                    forecastContainer.appendChild(dayElement);
-                });
-            }, 800); // Simulate API call delay
         });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Weather App - Tuscaloosa, AL 35401</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    body {
+      background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px;
+      color: #333;
+    }
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px 0;
+      max-width: 800px;
+    }
+    .header h1 {
+      color: white;
+      font-size: 2rem;
+      font-weight: 600;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+    .built-with {
+      color: white;
+      text-decoration: none;
+      font-size: 0.9rem;
+      opacity: 0.8;
+      transition: opacity 0.3s;
+    }
+    .built-with:hover {
+      opacity: 1;
+    }
+    .weather-card {
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(10px);
+      border-radius: 20px;
+      padding: 30px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+      width: 100%;
+      max-width: 800px;
+      margin-top: 20px;
+      transition: transform 0.3s ease;
+    }
+    .weather-card:hover {
+      transform: translateY(-5px);
+    }
+    .location {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding-bottom: 15px;
+    }
+    .location i {
+      color: #74b9ff;
+      font-size: 1.5rem;
+      margin-right: 10px;
+    }
+    .location h2 {
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: #2d3436;
+    }
+    .last-updated {
+      font-size: 0.8rem;
+      color: #636e72;
+      margin-top: 5px;
+      margin-left: 35px;
+    }
+    .current-weather {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 30px;
+      margin-bottom: 30px;
+    }
+    .temperature {
+      display: flex;
+      align-items: center;
+    }
+    .temp-value {
+      font-size: 4rem;
+      font-weight: 700;
+      color: #2d3436;
+      line-height: 1;
+    }
+    .temp-unit {
+      font-size: 2rem;
+      color: #636e72;
+      margin-left: 5px;
+    }
+    .weather-icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .weather-icon i {
+      font-size: 5rem;
+      color: #fdcb6e;
+      margin-bottom: 10px;
+    }
+    .weather-description {
+      font-size: 1.3rem;
+      color: #636e72;
+      text-align: center;
+      text-transform: capitalize;
+    }
+    .weather-details {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20px;
+      margin-bottom: 30px;
+    }
+    .detail {
+      display: flex;
+      align-items: center;
+      background: rgba(116, 185, 255, 0.1);
+      padding: 15px;
+      border-radius: 12px;
+    }
+    .detail i {
+      font-size: 1.5rem;
+      color: #74b9ff;
+      margin-right: 15px;
+      width: 30px;
+      text-align: center;
+    }
+    .detail-info h3 {
+      font-size: 0.9rem;
+      color: #636e72;
+      margin-bottom: 5px;
+    }
+    .detail-info p {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: #2d3436;
+    }
+    .forecast {
+      margin-top: 20px;
+    }
+    .forecast h3 {
+      font-size: 1.3rem;
+      margin-bottom: 15px;
+      color: #2d3436;
+      padding-bottom: 10px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .forecast-days {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 15px;
+    }
+    .forecast-day {
+      background: rgba(116, 185, 255, 0.1);
+      padding: 15px;
+      border-radius: 12px;
+      text-align: center;
+    }
+    .forecast-day p {
+      margin-bottom: 10px;
+    }
+    .day-name {
+      font-weight: 600;
+      color: #2d3436;
+    }
+    .day-temp {
+      font-size: 1.2rem;
+      font-weight: 700;
+      color: #2d3436;
+    }
+    .day-icon {
+      color: #fdcb6e;
+      font-size: 1.5rem;
+      margin: 5px 0;
+    }
+    .loading {
+      text-align: center;
+      padding: 30px;
+      font-size: 1.2rem;
+      color: #636e72;
+    }
+    .error {
+      text-align: center;
+      padding: 30px;
+      font-size: 1.2rem;
+      color: #e74c3c;
+      background: rgba(231, 76, 60, 0.1);
+      border-radius: 12px;
+    }
+    .refresh-btn {
+      background: #74b9ff;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 50px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 15px;
+    }
+    .refresh-btn:hover {
+      background: #0984e3;
+      transform: translateY(-2px);
+    }
+    @media (max-width: 768px) {
+      .current-weather {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+      .weather-details {
+        grid-template-columns: 1fr;
+      }
+      .forecast-days {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .temp-value {
+        font-size: 3rem;
+      }
+      .weather-icon i {
+        font-size: 4rem;
+      }
+    }
+    @media (max-width: 480px) {
+      .header {
+        flex-direction: column;
+        gap: 10px;
+        text-align: center;
+      }
+      .forecast-days {
+        grid-template-columns: 1fr;
+      }
+      .weather-card {
+        padding: 20px;
+      }
+    }
+  </style>
 </head>
 <body>
+  <div class="header">
+    <h1>Weather Forecast</h1>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a>
+  </div>
+  <div class="weather-card">
+    <div class="location">
+      <i class="fas fa-map-marker-alt"></i>
+      <div>
+        <h2 id="location-name">Tuscaloosa, AL 35401, US</h2>
+        <div class="last-updated" id="last-updated"></div>
+      </div>
     </div>
+    <div id="loading" class="loading">
+      <i class="fas fa-spinner fa-spin"></i> Loading weather data...
+    </div>
+    <div id="weather-content" style="display: none;">
+      <div class="current-weather">
+        <div class="temperature">
+          <span class="temp-value" id="current-temp">--</span>
+          <span class="temp-unit">°F</span>
         </div>
+        <div class="weather-icon">
+          <i class="fas fa-sun" id="weather-icon"></i>
+          <div class="weather-description" id="weather-desc">--</div>
+        </div>
+      </div>
+      <div class="weather-details">
+        <div class="detail">
+          <i class="fas fa-wind"></i>
+          <div class="detail-info">
+            <h3>Wind Speed</h3>
+            <p id="wind-speed">-- mph</p>
+          </div>
+        </div>
+        <div class="detail">
+          <i class="fas fa-tint"></i>
+          <div class="detail-info">
+            <h3>Humidity</h3>
+            <p id="humidity">--%</p>
+          </div>
         </div>
+        <div class="detail">
+          <i class="fas fa-temperature-low"></i>
+          <div class="detail-info">
+            <h3>Feels Like</h3>
+            <p id="feels-like">--°F</p>
+          </div>
+        </div>
+        <div class="detail">
+          <i class="fas fa-compress-arrows-alt"></i>
+          <div class="detail-info">
+            <h3>Pressure</h3>
+            <p id="pressure">-- hPa</p>
+          </div>
+        </div>
+      </div>
+      <div class="forecast">
+        <h3>5-Day Forecast</h3>
+        <div class="forecast-days" id="forecast-container">
+          <!-- Forecast days will be populated by JavaScript -->
         </div>
+      </div>
+      <button class="refresh-btn" id="refresh-btn">
+        <i class="fas fa-sync-alt"></i> Refresh Data
+      </button>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const apiKey = '8a7d3e6f2b9d4c5a8e1f0a3b4c5d6e7f'; // Example API key (you'll need to replace with a real one)
+      const zipCode = '35401';
+      const countryCode = 'US';
+      const loadingElement = document.getElementById('loading');
+      const weatherContent = document.getElementById('weather-content');
+      const refreshBtn = document.getElementById('refresh-btn');
+      // Function to fetch weather data
+      async function fetchWeatherData() {
+        try {
+          loadingElement.style.display = 'block';
+          weatherContent.style.display = 'none';
+          // Using OpenWeatherMap API with ZIP code
+          const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?zip=${zipCode},${countryCode}&appid=${apiKey}&units=imperial`);
+          if (!response.ok) {
+            throw new Error('Failed to fetch weather data');
+          }
+          const data = await response.json();
+          // Update current weather
+          document.getElementById('current-temp').textContent = Math.round(data.main.temp);
+          document.getElementById('weather-desc').textContent = data.weather[0].description;
+          document.getElementById('wind-speed').textContent = `${Math.round(data.wind.speed)} mph`;
+          document.getElementById('humidity').textContent = `${data.main.humidity}%`;
+          document.getElementById('feels-like').textContent = `${Math.round(data.main.feels_like)}°F`;
+          document.getElementById('pressure').textContent = `${data.main.pressure} hPa`;
+          // Update location name
+          document.getElementById('location-name').textContent = `${data.name}, ${data.sys.country}`;
+          // Update weather icon based on weather condition
+          const weatherIcon = document.getElementById('weather-icon');
+          const weatherId = data.weather[0].id;
+          if (weatherId >= 200 && weatherId < 300) {
+            // Thunderstorm
+            weatherIcon.className = "fas fa-bolt";
+            weatherIcon.style.color = "#fdcb6e";
+          } else if (weatherId >= 300 && weatherId < 500) {
+            // Drizzle
+            weatherIcon.className = "fas fa-cloud-rain";
+            weatherIcon.style.color = "#74b9ff";
+          } else if (weatherId >= 500 && weatherId < 600) {
+            // Rain
+            weatherIcon.className = "fas fa-cloud-showers-heavy";
+            weatherIcon.style.color = "#74b9ff";
+          } else if (weatherId >= 600 && weatherId < 700) {
+            // Snow
+            weatherIcon.className = "fas fa-snowflake";
+            weatherIcon.style.color = "#dfe6e9";
+          } else if (weatherId >= 700 && weatherId < 800) {
+            // Atmosphere (fog, mist, etc.)
+            weatherIcon.className = "fas fa-smog";
+            weatherIcon.style.color = "#b2bec3";
+          } else if (weatherId === 800) {
+            // Clear
+            weatherIcon.className = "fas fa-sun";
+            weatherIcon.style.color = "#fdcb6e";
+          } else if (weatherId > 800) {
+            // Clouds
+            weatherIcon.className = "fas fa-cloud";
+            weatherIcon.style.color = "#b2bec3";
+          }
+          // Fetch 5-day forecast
+          await fetchForecastData(data.coord.lat, data.coord.lon);
+          // Update last updated time
+          const now = new Date();
+          document.getElementById('last-updated').textContent = `Last updated: ${now.toLocaleTimeString()}`;
+          // Show content and hide loading
+          loadingElement.style.display = 'none';
+          weatherContent.style.display = 'block';
+        } catch (error) {
+          console.error('Error fetching weather data:', error);
+          loadingElement.innerHTML = `<div class="error"><i class="fas fa-exclamation-triangle"></i> Failed to load weather data. Please try again later.</div>`;
+          // Show error message and retry button
+          const retryBtn = document.createElement('button');
+          retryBtn.className = 'refresh-btn';
+          retryBtn.innerHTML = '<i class="fas fa-redo"></i> Try Again';
+          retryBtn.addEventListener('click', fetchWeatherData);
+          loadingElement.appendChild(retryBtn);
+        }
+      }
+      // Function to fetch forecast data
+      async function fetchForecastData(lat, lon) {
+        try {
+          const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${apiKey}&units=imperial`);
+          if (!response.ok) {
+            throw new Error('Failed to fetch forecast data');
+          }
+          const data = await response.json();
+          // Process forecast data to get daily values
+          const dailyForecasts = [];
+          const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
+          // Group forecast by day and find min/max temps
+          const dailyData = {};
+          data.list.forEach(item => {
+            const date = new Date(item.dt * 1000);
+            const dayKey = date.toDateString();
+            if (!dailyData[dayKey]) {
+              dailyData[dayKey] = {
+                minTemp: item.main.temp,
+                maxTemp: item.main.temp,
+                description: item.weather[0].description,
+                icon: item.weather[0].id
+              };
+            } else {
+              dailyData[dayKey].minTemp = Math.min(dailyData[dayKey].minTemp, item.main.temp);
+              dailyData[dayKey].maxTemp = Math.max(dailyData[dayKey].maxTemp, item.main.temp);
+            }
+          });
+          // Convert to array and limit to 5 days
+          let dayCount = 0;
+          for (const dayKey in dailyData) {
+            if (dayCount >= 5) break;
+            const date = new Date(dayKey);
+            const dayName = daysOfWeek[date.getDay()];
+            // Get appropriate icon based on weather condition
+            let iconClass = "fas fa-sun";
+            const weatherId = dailyData[dayKey].icon;
+            if (weatherId >= 200 && weatherId < 300) {
+              iconClass = "fas fa-bolt";
+            } else if (weatherId >= 300 && weatherId < 500) {
+              iconClass = "fas fa-cloud-rain";
+            } else if (weatherId >= 500 && weatherId < 600) {
+              iconClass = "fas fa-cloud-showers-heavy";
+            } else if (weatherId >= 600 && weatherId < 700) {
+              iconClass = "fas fa-snowflake";
+            } else if (weatherId >= 700 && weatherId < 800) {
+              iconClass = "fas fa-smog";
+            } else if (weatherId === 800) {
+              iconClass = "fas fa-sun";
+            } else if (weatherId > 800) {
+              iconClass = "fas fa-cloud";
+            }
+            dailyForecasts.push({
+              day: dayName,
+              temp: Math.round(dailyData[dayKey].maxTemp),
+              icon: iconClass
+            });
+            dayCount++;
+          }
+          // Populate forecast
+          const forecastContainer = document.getElementById('forecast-container');
+          forecastContainer.innerHTML = '';
+          dailyForecasts.forEach(day => {
+            const dayElement = document.createElement('div');
+            dayElement.className = 'forecast-day';
+            dayElement.innerHTML = `
+              <p class="day-name">${day.day}</p>
+              <i class="${day.icon} day-icon"></i>
+              <p class="day-temp">${day.temp}°F</p>
+            `;
+            forecastContainer.appendChild(dayElement);
+          });
+        } catch (error) {
+          console.error('Error fetching forecast data:', error);
+          // If forecast fails, show static forecast
+          showStaticForecast();
+        }
+      }
+      // Function to show static forecast as fallback
+      function showStaticForecast() {
+        const forecastData = [
+          { day: "Mon", temp: 82, icon: "fas fa-sun" },
+          { day: "Tue", temp: 79, icon: "fas fa-cloud-sun" },
+          { day: "Wed", temp: 75, icon: "fas fa-cloud" },
+          { day: "Thu", temp: 77, icon: "fas fa-cloud-showers-heavy" },
+          { day: "Fri", temp: 81, icon: "fas fa-sun" }
+        ];
+        const forecastContainer = document.getElementById('forecast-container');
+        forecastContainer.innerHTML = '';
+        forecastData.forEach(day => {
+          const dayElement = document.createElement('div');
+          dayElement.className = 'forecast-day';
+          dayElement.innerHTML = `
+            <p class="day-name">${day.day}</p>
+            <i class="${day.icon} day-icon"></i>
+            <p class="day-temp">${day.temp}°F</p>
+          `;
+          forecastContainer.appendChild(dayElement);
         });
+      }
+      // Add event listener to refresh button
+      refreshBtn.addEventListener('click', fetchWeatherData);
+      // Fetch weather data on page load
+      fetchWeatherData();
+      // Auto-refresh every 10 minutes
+      setInterval(fetchWeatherData, 10 * 60 * 1000);
+    });
+  </script>
 </body>
 </html>