Earth 2 PR

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}

README.md

@@ -1 +1,16 @@
-# js-project-weather-app
+# 🌦️ Project Weather App
+
+We built a weather application that fetches real-time weather data from an external API. Users can search for any city and instantly get information about the current temperature, a weather description, and a matching icon. The app also displays a 4-day forecast with upcoming weather conditions.
+
+The project is mainly developed using **TypeScript**, with some supporting **HTML structure** and **CSS styling** to create a responsive and user-friendly interface.
+
+This was a group project where we used both **mob programming** and worked in smaller breakout groups to collaborate effectively. Along the way, we faced several challenges – from API issues to layout bugs – but we solved them together. It’s been a learning experience filled with hard work, teamwork, and a lot of fun.
+
+We're proud of the result, but even more proud of how we worked together as a team.
+
+🔗 [Live site](https://earth2weather.netlify.app)
+
+---
+
+© 2025 Project Weather App. All Rights Reserved.  
+**Developed & created by Casandra, Linda, Caspian & Cathrine**

dist/script.js

@@ -0,0 +1,186 @@
+"use strict";
+// Function to get DOM elements by ID
+const getElement = (id) => document.getElementById(id);
+// DOM ELEMENTS
+const elements = {
+    weatherContainer: getElement("weather-container"),
+    weatherContainerChild: getElement("weather-container-child"),
+    todaysWeatherContainer: getElement("todays-weather-container"),
+    iconTextContainer: getElement("iconText-container"),
+    searchForm: document.getElementById("search-form"),
+    searchInput: document.getElementById("search-input"),
+    lastSearched: document.getElementById("last-searched"),
+    searchStatus: document.getElementById("search-status"),
+    githubIcon: document.getElementById("github-icon")
+};
+// ENUMS
+var WeatherState;
+(function (WeatherState) {
+    WeatherState["Clear"] = "Clear";
+    WeatherState["Clouds"] = "Clouds";
+    WeatherState["Rain"] = "Rain";
+    WeatherState["Snow"] = "Snow";
+})(WeatherState || (WeatherState = {}));
+// GLOBAL VARIABLES
+let weatherDescription = "";
+// Use a hardcoded API key for now (you should move this to a secure configuration later)
+const API_KEY = "081d5769835e0277d80d7efa7aca13c6"; // Replace with your actual API key
+const BASE_URL = "https://api.openweathermap.org/data/2.5";
+// Default city if no search is performed
+const DEFAULT_CITY = "Stockholm";
+// FUNCTIONS
+const fetchWeatherData = (city) => {
+    return fetch(`${BASE_URL}/weather?q=${city}&units=metric&appid=${API_KEY}`)
+        .then((response) => {
+        if (!response.ok) {
+            throw new Error("Weather data fetch failed");
+        }
+        return response.json();
+    })
+        .then((data) => {
+        // Formats the time from Unix to local Swedish settings
+        const formatTime = (timestamp, timezoneOffset) => {
+            return new Date((timestamp + timezoneOffset) * 1000).toLocaleTimeString("sv-SE", {
+                hour: "2-digit",
+                minute: "2-digit",
+                timeZone: "UTC"
+            });
+        };
+        return {
+            cityName: data.name,
+            temperature: Math.round(data.main.temp),
+            weatherDescription: data.weather[0].main,
+            weatherId: data.weather[0].id,
+            sunrise: formatTime(data.sys.sunrise, data.timezone),
+            sunset: formatTime(data.sys.sunset, data.timezone)
+        };
+    })
+        .catch((error) => {
+        console.error("Error fetching weather data:", error);
+        throw error;
+    });
+};
+const fetchForecastData = (city) => {
+    return fetch(`${BASE_URL}/forecast?q=${city}&units=metric&appid=${API_KEY}`)
+        .then((response) => {
+        if (!response.ok) {
+            throw new Error("Forecast data fetch failed");
+        }
+        return response.json();
+    })
+        .then((data) => {
+        const processedForecasts = new Map();
+        // Get today's and tomorrow's dates for comparison
+        const today = new Date();
+        const todayString = today.toISOString().split("T")[0]; // YYYY-MM-DD
+        data.list.forEach((item) => {
+            const date = new Date(item.dt * 1000).toISOString().split("T")[0]; // YYYY-MM-DD
+            // Ignore today's forecasts, start from tomorrow
+            if (date > todayString && !processedForecasts.has(date)) {
+                processedForecasts.set(date, {
+                    date: date, // Store in ISO format (YYYY-MM-DD)
+                    temperature: Math.round(item.main.temp),
+                    weatherDescription: item.weather[0].description,
+                    weatherId: item.weather[0].id
+                });
+            }
+        });
+        return Array.from(processedForecasts.values()).slice(0, 4); // Ensure only 4 future days
+    })
+        .catch((error) => {
+        console.error("Error fetching forecast data:", error);
+        throw error;
+    });
+};
+const updateBodyClass = (weatherState) => {
+    const body = document.body;
+    const validClasses = ["clear", "rain", "clouds", "snow"];
+    // Remove old weather classes
+    body.classList.remove(...validClasses);
+    elements.githubIcon.classList.remove(...validClasses);
+    // Add the new class if it's valid
+    if (validClasses.includes(weatherState.toLowerCase())) {
+        body.classList.add(weatherState.toLowerCase());
+        elements.githubIcon.classList.add(weatherState.toLowerCase());
+    }
+};
+// Define catchyTextTemplate using city from API as a placeholder
+const catchyTextTemplate = {
+    [WeatherState.Clear]: "Get your sunnies on. {city} is looking rather great today.",
+    [WeatherState.Rain]: "Don't forget your umbrella. It's wet in {city} today.",
+    [WeatherState.Clouds]: "Light a fire and get cosy. {city} is looking grey today.",
+    [WeatherState.Snow]: "Time for a snowball fight! {city} is covered in snow."
+};
+// Event handler for search that calls on every other function in the program
+const runWeatherApp = async (event) => {
+    event.preventDefault();
+    const city = elements.searchInput?.value.trim() || DEFAULT_CITY;
+    try {
+        // Fetch both weather and forecast data
+        const [weatherData, forecastData] = await Promise.all([
+            fetchWeatherData(city),
+            fetchForecastData(city),
+        ]);
+        // Get weather state from weather description
+        const weatherMain = weatherData.weatherDescription.toLowerCase();
+        const weatherState = weatherMain === "clear"
+            ? WeatherState.Clear
+            : weatherMain === "rain"
+                ? WeatherState.Rain
+                : weatherMain === "snow"
+                    ? WeatherState.Snow
+                    : WeatherState.Clouds;
+        updateBodyClass(weatherState);
+        // Update today's weather
+        if (elements.todaysWeatherContainer) {
+            elements.todaysWeatherContainer.innerHTML = `
+                <p>${weatherState} | ${weatherData.temperature}°C</p>
+                <p>sunrise ${weatherData.sunrise}</p>
+                <p>sunset ${weatherData.sunset}</p>
+            `;
+        }
+        // Update icon and text
+        if (elements.iconTextContainer) {
+            elements.iconTextContainer.innerHTML = ""; // Clear previous content
+            const message = catchyTextTemplate[weatherState].replace("{city}", weatherData.cityName);
+            const iconUrl = `Assets/${weatherState}.png`;
+            elements.iconTextContainer.innerHTML = `
+                <img src="${iconUrl}" alt="${weatherState}" class="weather-icon">
+                <h1>${message}</h1>
+            `;
+        }
+        // Update forecast
+        const forecastContainer = document.getElementById("forecast-container");
+        if (forecastContainer) {
+            forecastContainer.innerHTML = ""; // Clear previous content
+            forecastData.forEach((day) => {
+                const row = document.createElement("div");
+                row.classList.add("forecast-row");
+                const dayName = new Date(day.date).toLocaleDateString("en-GB", {
+                    weekday: "short"
+                });
+                row.innerHTML = `
+                    <span class="day">${dayName}</span>
+                    <span class="temp">${day.temperature}°C</span>
+                `;
+                forecastContainer.appendChild(row);
+            });
+        }
+    }
+    catch (error) {
+        console.error("Error fetching weather data:", error);
+        if (elements.todaysWeatherContainer) {
+            elements.todaysWeatherContainer.textContent = "Error loading weather data";
+        }
+    }
+};
+// Initialize the app
+document.addEventListener("DOMContentLoaded", () => {
+    if (!elements.searchForm) {
+        console.error("Search form not found");
+        return;
+    }
+    elements.searchForm.addEventListener("submit", runWeatherApp);
+    // Trigger initial search for default city
+    runWeatherApp(new Event("submit"));
+});

index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Set earth to the rain</title>
+  <link rel="stylesheet" href="./styles.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+</head>
+
+<body class="clear">
+  <div class="container">
+
+    <div id="todays-weather-container" class="todays-weather">
+    </div>
+
+    <section id="iconText-container"></section>
+
+    <section id="forecast-container" class="forecast">
+      <div class="forecast-row">
+      </div>
+    </section>
+
+    <div id="search">
+      <form id="search-form" class="search-form">
+        <input type="text" id="search-input" placeholder="Enter city name..." aria-label="Search for a city">
+        <button type="submit">Search</button>
+      </form>
+    </div>
+
+<footer>Made by: Casandra, Linda, Caspian & Cathrine  
+  <a href="https://github.com/casalm26/js-project-weather-app.git" alt="GitHubLogo">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96" id="github-icon" class="github-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg></a>
+</footer>
+
+
+  <script type="module" src="dist/script.js"></script>
+</body>
+
+</html>