Update index.html

SHORETALENT · Sep 24, 2024 · 188c344 · 188c344
1 parent 296cc32
commit 188c344
Showing 1 changed file with 54 additions and 86 deletions.
diff --git a/index.html b/index.html
@@ -7,111 +7,79 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #f0f4f8;
+            background-color: #f0f8ff;
             color: #333;
             text-align: center;
         }
-        .container {
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 20px;
-            background: white;
-            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-            border-radius: 10px;
-        }
         h1 {
-            color: #0077b6;
-        }
-        .weather-icon {
-            width: 100px;
-            height: 100px;
-        }
-        .forecast-item {
-            margin: 20px 0;
-            padding: 15px;
-            border-bottom: 1px solid #ddd;
+            color: #007bff;
         }
-        .temp {
-            font-size: 32px;
-            font-weight: bold;
-            color: #ff6b6b;
-        }
-        .description {
-            font-size: 20px;
-            font-weight: 500;
-            margin-bottom: 10px;
+        .forecast {
+            margin-top: 20px;
+            padding: 20px;
+            border: 1px solid #007bff;
+            border-radius: 8px;
+            background-color: #ffffff;
+            display: inline-block;
         }
-        .time {
-            color: #888;
+        .icon {
+            width: 50px;
+            height: 50px;
         }
     </style>
 </head>
 <body>
-
-<div class="container">
     <h1>Weather Forecast for Mankato, MN</h1>
-    <div id="forecast"></div>
-</div>
+    <div class="forecast" id="forecast"></div>
 
-<script>
-    const apiKey = 'bDzDfu2CvUSFxxZFIPk8o9Z3c28u6Y9M';
-    const apiUrl = `https://api.tomorrow.io/v4/weather/forecast?location=42.3478,-71.0466&apikey=${apiKey}`;
+    <script>
+        const apiKey = 'bDzDfu2CvUSFxxZFIPk8o9Z3c28u6Y9M';
+        const location = '42.3478,-71.0466'; // Coordinates for Mankato, MN
 
-    // Function to convert UTC to Central Time (Mankato, MN)
-    function convertToMankatoTime(utcTime) {
-        const date = new Date(utcTime * 1000); // API returns time in seconds, so convert to milliseconds
-        return date.toLocaleString('en-US', { timeZone: 'America/Chicago' });
-    }
-
-    // Function to fetch the weather data
-    async function fetchWeatherData() {
-        try {
-            const response = await fetch(apiUrl);
-            const data = await response.json();
-            displayWeatherData(data);
-        } catch (error) {
-            console.error('Error fetching the weather data:', error);
+        async function getWeather() {
+            try {
+                const response = await fetch(`https://api.tomorrow.io/v4/weather/forecast?location=${location}&apikey=${apiKey}&fields=temperature,weatherCode`);
+                const data = await response.json();
+                displayWeather(data);
+            } catch (error) {
+                console.error('Error fetching weather data:', error);
+            }
         }
-    }
 
-    // Function to display the weather data
-    function displayWeatherData(data) {
-        const forecastDiv = document.getElementById('forecast');
-        const forecasts = data.timelines.daily; // Adjust based on the API structure
+        function displayWeather(data) {
+            const forecastDiv = document.getElementById('forecast');
+            forecastDiv.innerHTML = ''; // Clear previous content
 
-        forecasts.forEach(day => {
-            const forecastItem = document.createElement('div');
-            forecastItem.className = 'forecast-item';
+            const weatherData = data.data;
+            weatherData.forEach((item) => {
+                const temperature = item.temperature;
+                const weatherCode = item.weatherCode;
 
-            const date = convertToMankatoTime(day.time);
-            const temp = `${Math.round(day.values.temperatureMin)}°C - ${Math.round(day.values.temperatureMax)}°C`;
-            const description = day.values.weatherCode;
-
-            // Matching icons based on weather codes (this is an example, you can add more)
-            let weatherIcon = '';
-            if (description.includes('rain')) {
-                weatherIcon = '🌧️';
-            } else if (description.includes('clear')) {
-                weatherIcon = '☀️';
-            } else if (description.includes('cloudy')) {
-                weatherIcon = '☁️';
-            } else if (description.includes('snow')) {
-                weatherIcon = '❄️';
-            }
+                // Map weather codes to icons
+                const weatherIcon = getWeatherIcon(weatherCode);
 
-            forecastItem.innerHTML = `
-                <div class="time">${date}</div>
-                <div class="temp">${temp}</div>
-                <div class="description">${weatherIcon} ${description}</div>
-            `;
-
-            forecastDiv.appendChild(forecastItem);
-        });
-    }
+                forecastDiv.innerHTML += `
+                    <div>
+                        <img src="${weatherIcon}" alt="Weather icon" class="icon">
+                        <p>Temperature: ${temperature}°F</p>
+                    </div>
+                `;
+            });
+        }
 
-    // Fetch weather data on page load
-    fetchWeatherData();
-</script>
+        function getWeatherIcon(code) {
+            // Simple mapping of weather codes to icons
+            const icons = {
+                'clear-day': 'https://example.com/icons/clear-day.png',
+                'clear-night': 'https://example.com/icons/clear-night.png',
+                'rain': 'https://example.com/icons/rain.png',
+                'snow': 'https://example.com/icons/snow.png',
+                // Add more mappings as needed
+            };
+            return icons[code] || 'https://example.com/icons/default.png'; // Default icon
+        }
 
+        getWeather();
+    </script>
 </body>
 </html>