fixes

FredH2O · Aug 4, 2024 · 94c0f4a · 94c0f4a
1 parent 8e32a6e
commit 94c0f4a
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!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.css" />
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>Weather App</h1>
+      </header>
+      <main>
+        <section class="weather-info">
+          <h2 class="location">Location</h2>
+          <div class="weather-details">
+            <p class="temperature">
+              Temperature: <span id="temperature">--</span>°C
+            </p>
+            <p class="condition">Condition: <span id="condition">--</span></p>
+          </div>
+        </section>
+        <section class="search">
+          <input type="text" id="city" placeholder="Enter city" />
+          <button id="search" onclick="fetchWeatherData()">Search</button>
+        </section>
+      </main>
+      <footer>
+        <p>
+          Weather data provided by
+          <a href="https://weatherapi.com" target="_blank">WeatherAPI.com</a>
+        </p>
+      </footer>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,57 @@
+// weather app
+
+let city = document.getElementById("city").value;
+let temperature = document.getElementById("temperature");
+let condition = document.getElementById("condition");
+let locationHeading = document.querySelector(".location");
+
+console.log(city);
+
+async function fetchWeatherData() {
+  const url =
+    "https://weatherapi-com.p.rapidapi.com/current.json?q=53.1%2C-0.13";
+  const options = {
+    method: "GET",
+    headers: {
+      "x-rapidapi-key": "73736933c8msh0e36fc0e81a021cp1634e9jsn68c86f8cf32e",
+      "x-rapidapi-host": "weatherapi-com.p.rapidapi.com",
+    },
+  };
+
+  try {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error("Network response not okay.");
+    }
+    const result = await response.json(); // extract data using result
+    console.log(result);
+
+    updateLocation(result.location.name);
+    updateTemperature(result.current.temp_c, result.current.temp_f);
+    updateConditionAndIcon(
+      result.current.condition.text,
+      result.current.condition.icon
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function updateLocation(locationName) {
+  locationHeading.textContent = locationName;
+}
+function updateTemperature(temperatureC, temperatureF) {
+  temperature.textContent = `${temperatureC}°C / ${temperatureF}°F`;
+}
+function updateConditionAndIcon(text, icon) {
+  condition.innerHTML = "";
+  condition.textContent = text;
+
+  const ICON_IMG = document.createElement("img");
+  ICON_IMG.src = icon;
+  ICON_IMG.alt = icon;
+  condition.appendChild(ICON_IMG);
+}
+
+// Call the async function
+fetchWeatherData();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,93 @@
+/* styles.css */
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #303030;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  max-width: 800px;
+  margin: auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 2em;
+}
+
+.weather-info {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.location {
+  font-size: 1.5em;
+  margin-bottom: 10px;
+}
+
+.weather-details {
+  font-size: 1.2em;
+}
+
+.search {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+#city {
+  padding: 10px;
+  font-size: 1em;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-right: 10px;
+}
+
+#search {
+  padding: 10px 20px;
+  font-size: 1em;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+#search:hover {
+  background-color: #0056b3;
+}
+
+footer {
+  text-align: center;
+  font-size: 0.8em;
+  color: #555;
+}
+
+footer a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}