wearther app

tonymathuthu · Sep 10, 2024 · 1371e38 · 1371e38
commit 1371e38
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,23 @@
+body {
+    font-family: sans-serif;
+}
+.weatherApp {
+    margin: auto;
+    width: 100%;
+    height: auto;
+    text-align: center;
+
+}
+#location-input {
+    padding: .6rem;
+    outline: none;
+    border: 1px solid black;
+    margin-bottom: 10px;
+    border-radius: .4rem;
+}
+#weather-data {
+    margin: 0 auto;
+    padding: 25px;
+    width: 350px;
+    border-radius: .6rem;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="js/script.js" defer></script>
+</head>
+<body>
+
+<div class="weatherApp">
+    <h1>WeatherApp</h1>
+    <input id="location-input" type="text" placeholder="Enter location">
+    <div id="weather-data"></div>
+</div>
+
+</body>
+</html>
+
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,64 @@
+// event listener:  location
+
+document.getElementById("location-input").addEventListener("change", async () => {
+    // User entered location
+    const location = document.getElementById("location-input").value;
+
+    // Fetch the weather data
+    const weatherData = await getWeatherData(location);
+
+    // Display the weather data on the page
+    displayWeatherData(weatherData);
+});
+
+const getWeatherData = async (location) => {
+    if (!location) {
+        return {};
+    }
+
+    const apiKey = 'bc3de54c06e019890c6cd1aea064835b';
+    // Corrected the API URL parameter from 'apiid' to 'appid'
+    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`);
+    const data = await response.json();
+    return data;
+}
+
+function getBackgroundColor(temperature) {
+    if (temperature < 0) {
+        return 'lightblue';
+    } else if (temperature < 10) {
+        return 'lightgreen';
+    } else if (temperature < 20) {
+        return 'lightyellow';
+    } else if (temperature < 30) {
+        return 'lightsalmon';
+    } else {
+        return 'lightcoral';
+    }
+}
+
+const displayWeatherData = (data) => {
+    const weatherDataElement = document.getElementById("weather-data");
+
+    if (Object.keys(data).length === 0) {
+        weatherDataElement.innerHTML = "Please enter a location to see the weather.";
+    } else {
+        // Corrected variable name from 'getBackgroungColor' to 'backgroundColor'
+        const backgroundColor = getBackgroundColor(Math.floor(data.main.temp - 273.15));
+        weatherDataElement.style.backgroundColor = backgroundColor;
+
+        weatherDataElement.innerHTML = `
+            <h3>${data.name}</h3>
+            <p>Temperature: ${Math.floor(data.main.temp - 273.15)}°C</p>
+            <p>Humidity: ${data.main.humidity}%</p>
+            <p>Wind Speed: ${data.wind.speed} m/s</p>
+           
+        `;
+    }
+}
+
+window.onload = async () => {
+    const weatherData = await getWeatherData();
+    displayWeatherData(weatherData);
+}
+