From 0c73c2033e18b7249c1b0c344fdd9daaa89548e2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 22 May 2025 19:13:32 +0000
Subject: [PATCH] feat: Create basic weather app for Cologne

This commit introduces a simple web application that displays the current
weather conditions for Cologne, Germany.

It includes:
- `index.html`: The main HTML page with structure and basic styling.
- `script.js`: JavaScript to fetch current temperature, humidity, and
wind speed from the Open-Meteo API and display it on the page.

The application fetches data from `api.open-meteo.com`. If the API
call fails, a user-friendly error message is displayed.
---
 index.html | 35 +++++++++++++++++++++++++++++++++++
 script.js  | 31 +++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 index.html
 create mode 100644 script.js
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4057ddb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather in Cologne</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 50px;
+            background-color: #f0f0f0;
+        }
+        #weather-info {
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            background-color: #fff;
+            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>Weather in Cologne</h1>
+    <div id="weather-info">
+        <p>Loading weather data...</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d1ae0a5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const weatherInfoDiv = document.getElementById('weather-info');
+    const apiUrl = 'https://api.open-meteo.com/v1/forecast?latitude=50.93333&longitude=6.95&current=temperature_2m,relative_humidity_2m,wind_speed_10m';
+
+    fetch(apiUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data && data.current) {
+                const temperature = data.current.temperature_2m;
+                const humidity = data.current.relative_humidity_2m;
+                const windSpeed = data.current.wind_speed_10m;
+
+                weatherInfoDiv.innerHTML = `
+                    <p>Temperature: ${temperature}°C</p>
+                    <p>Humidity: ${humidity}%</p>
+                    <p>Wind Speed: ${windSpeed} km/h</p>
+                `;
+            } else {
+                throw new Error('Invalid weather data format');
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching weather data:', error);
+            weatherInfoDiv.innerHTML = '<p>Could not fetch weather data. Please try again later.</p>';
+        });
+});
