weader

components/ForecastList.js

@@ -0,0 +1,13 @@
+// UPDATED: Passes weather condition to WeatherCard
+import { WeatherCard } from './WeatherCard.js';
+
+export const ForecastList = (weatherData) => {
+    return `
+        <div class="forecast-container">
+            <h2>Weekly Forecast</h2>
+            <div class="forecast-list">
+                ${weatherData.map((temp, index) => WeatherCard(index + 1, temp, "sunny")).join('')}
+            </div>
+        </div>
+    `;
+}

components/HourlyForecast.js

@@ -0,0 +1,20 @@
+import { WeatherCard } from './WeatherCard.js';
+
+export function HourlyForecast(hourlyData, weatherCodes) {
+    return `
+        <div class="forecast-container">
+            <h2>24-Hour Forecast</h2>
+            <div class="forecast-list">
+                ${hourlyData.map((temp, index) => WeatherCard(index, temp, getWeatherCondition(weatherCodes[index]))).join('')}
+            </div>
+        </div>
+    `;
+}
+
+function getWeatherCondition(code) {
+    if (code === 1) return "sunny";
+    if (code === 2) return "cloudy";
+    if (code === 3) return "rainy";
+    if (code === 4) return "snowy";
+    return "cloudy"; // Default
+}

components/SearchBar.js

@@ -0,0 +1,9 @@
+// NEW FILE: Search bar component for user input
+export const SearchBar = () => {
+    return `
+        <div class="search-container">
+            <input type="text" id="search" placeholder="Enter city or country..." />
+            <button id="search-btn">Search</button>
+        </div>
+    `;
+}

components/WeatherCard.js

@@ -0,0 +1,34 @@
+export const WeatherCard = (hourIndex, temperature, condition) => {
+    const icon = getWeatherIcon(condition);
+    return `
+        <div class="weather-card">
+            <h3>${formatHour(hourIndex)}</h3>
+            <img src="assets/${icon}" alt="${condition}" />
+            <p>${temperature !== undefined ? temperature.toFixed(1) : "N/A"}°C</p>
+        </div>
+    `;
+};
+
+// Function to format hours correctly (00:00 to 23:00)
+const formatHour = (hourIndex) => {
+    return `${hourIndex.toString().padStart(2, '0')}:00`;
+};
+
+// Function to get weather icons based on conditions
+const getWeatherIcon = (condition) => {
+    if (condition.includes("sunny")) return "../public/sunny.png";
+if (condition.includes("cloudy")) return "../public/cloudy.png";
+if (condition.includes("rain")) return "../public/rainy.jpg";
+if (condition.includes("snow")) return "../public/snow.webp";
+return "cloudy.png"; // Default icon
+};
+
+
+
+
+/*if (condition.includes("sunny")) return "../public/sunny.png";
+if (condition.includes("cloudy")) return "../public/cloudy.png";
+if (condition.includes("rain")) return "../public/rainy.jpg";
+if (condition.includes("snow")) return "../public/snow.webp";
+return "cloudy.png"; // Default icon
+};*/

components/WeeklyForecast.js

@@ -0,0 +1,19 @@
+import { WeatherCard } from './WeatherCard.js';
+
+export function WeeklyForecast(weeklyData) {
+    const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "Next Monday", "Next Tuesday", "Next Wednesday"];
+
+    return `
+        <div class="forecast-container">
+            <h2>10-Day Forecast</h2>
+            <div class="forecast-list">
+                ${weeklyData.map((temp, index) => `
+                    <div class="weather-card">
+                        <h3>${days[index]}</h3>
+                        <p>${temp !== undefined ? temp.toFixed(1) : "N/A"}°C</p>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    `;
+}

data/weatherData.js

@@ -0,0 +1,16 @@
+export async function getWeatherData(location) {
+    const API_URL = `https://api.open-meteo.com/v1/forecast?latitude=${location.lat}&longitude=${location.lon}&hourly=temperature_2m,weathercode&daily=temperature_2m_max,temperature_2m_min,weathercode&forecast_days=10&timezone=auto`;
+
+    try {
+        const response = await fetch(API_URL);
+        const data = await response.json();
+        return {
+            hourly: data.hourly.temperature_2m.slice(0, 24), // 24-hour forecast
+            weekly: data.daily.temperature_2m_max.slice(0, 10), // 10-day forecast
+            weatherCodes: data.hourly.weathercode.slice(0, 24) // Weather conditions
+        };
+    } catch (error) {
+        console.error("Error fetching weather data:", error);
+        return { hourly: [], weekly: [], weatherCodes: [] };
+    }
+}

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="./styles/main.css">
+</head>
+<body>
+    <div id="app">
+        <input type="text" id="search" placeholder="Enter city or country..." />
+        <button id="search-btn" type="button">Search</button>
+        <div id="hourly-forecast"></div>  <!--24-hour forecast -->
+        <div id="weekly-forecast"></div>  <!-- Weekly forecast -->
+    <script type="module" src="./src/main.js"></script>
+</body>
+</html>