Technigo · mikaeber · Sep 29, 2024 · Sep 29, 2024 · Sep 29, 2024 · Sep 29, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,7 @@
 # Weather App
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## The problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+A weather app that allows you to view the weather for multiple cities next coming 4 days, made with the Open Weather Map API.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://mikasweather.netlify.app/
diff --git a/assets/design-2/noun_Cloud_1188486.svg b/assets/design-2/noun_Cloud_1188486.svg
diff --git a/assets/design-2/noun_Sunglasses_2055147.svg b/assets/design-2/noun_Sunglasses_2055147.svg
diff --git a/assets/design-2/noun_Umbrella_2030530.svg b/assets/design-2/noun_Umbrella_2030530.svg
diff --git a/assets/design-1/Group16.png → code/assets/design-1/Group16.png b/assets/design-1/Group16.png → code/assets/design-1/Group16.png
diff --git a/assets/design-1/Group34.png → code/assets/design-1/Group34.png b/assets/design-1/Group34.png → code/assets/design-1/Group34.png
diff --git a/assets/design-1/Group36.png → code/assets/design-1/Group36.png b/assets/design-1/Group36.png → code/assets/design-1/Group36.png
diff --git a/assets/design-1/Group37.png → code/assets/design-1/Group37.png b/assets/design-1/Group37.png → code/assets/design-1/Group37.png
diff --git a/assets/design-1/Group38.png → code/assets/design-1/Group38.png b/assets/design-1/Group38.png → code/assets/design-1/Group38.png
diff --git a/code/assets/design-1/button.svg b/code/assets/design-1/button.svg
diff --git a/code/assets/design-1/iPhone XR/Group 1.svg b/code/assets/design-1/iPhone XR/Group 1.svg
diff --git a/code/assets/design-1/menu-icon.svg b/code/assets/design-1/menu-icon.svg
diff --git a/code/assets/design-1/sun.svg b/code/assets/design-1/sun.svg
diff --git a/code/index.html b/code/index.html
@@ -0,0 +1,46 @@
+<!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" />
+    <!-- Add this line to import Roboto font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="container" class="container">
+      <!-- svg's put in assets folder -->
+      <img src="assets/design-1/sun.svg" alt="logo" class="logo" />
+      <img
+        src="assets/design-1/menu-icon.svg"
+        alt="menu-icon"
+        class="menu-icon"
+      />
+      <img
+        src="assets/design-1/button.svg"
+        alt="button"
+        class="button"
+        id="changeCity"
+      />
+
+      <div class="current-weather">
+        <div class="weather-image"></div>
+        <div id="temperature"></div>
+        <span id="city"></span>
+        <span id="weather-condition"></span>
+        <div class="sun-info">
+          <span id="sunrise"></span>
+          <span id="sunset"></span>
+        </div>
+      </div>
+      <div class="forecast">
+        <ul id="list"></ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,87 @@
+const container = document.getElementById("container");
+const temperature = document.getElementById("temperature");
+const city = document.getElementById("city");
+const weatherCondition = document.getElementById("weather-condition");
+const sunrise = document.getElementById("sunrise");
+const sunset = document.getElementById("sunset");
+const list = document.getElementById("list");
+const time = document.getElementById("time");
+const changeCityButton = document.getElementById("changeCity");
+
+// Array of cities with their lat and lon
+const cities = [
+  { name: "Paris", lat: 48.86, lon: 2.35 },
+  { name: "New York", lat: 40.71, lon: -74.01 },
+  { name: "Tokyo", lat: 35.69, lon: 139.69 },
+  { name: "Sydney", lat: -33.87, lon: 151.21 },
+  { name: "Cape Town", lat: -33.93, lon: 18.42 },
+];
+
+let currentCityIndex = 0;
+
+// Update the formatTime function
+function formatTime(timestamp, timezoneOffset) {
+  const date = new Date((timestamp + timezoneOffset) * 1000);
+  return date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+}
+
+function getWeatherIconUrl(iconCode) {
+  return `https://openweathermap.org/img/wn/${iconCode}@2x.png`;
+}
+
+// Update the fetchWeatherData function
+function fetchWeatherData(lat, lon) {
+  fetch(
+    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=f2241eeae1b16c2b8bc74e61d2517ef6`
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      temperature.innerHTML = `${Math.round(data.main.temp)}<sup>°C</sup>`;
+      city.innerHTML = `${data.name}`;
+      weatherCondition.innerHTML = `${data.weather[0].main}`;
+      sunrise.innerHTML = `sunrise ${formatTime(data.sys.sunrise, data.timezone)}`;
+      sunset.innerHTML = `sunset ${formatTime(data.sys.sunset, data.timezone)}`;
+
+      document.querySelector(".weather-image").innerHTML =
+        `<img src="${getWeatherIconUrl(data.weather[0].icon)}" alt="${data.weather[0].description}">`; // Update time every minute
+    });
+
+  fetch(
+    `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&units=metric&appid=f2241eeae1b16c2b8bc74e61d2517ef6`
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      const forecastAtNoon = data.list
+        .filter((item) => item.dt_txt.endsWith("12:00:00"))
+        .slice(0, 4);
+      const forecastHTML = forecastAtNoon
+        .map((forecast) => {
+          const forecastDate = new Date(forecast.dt * 1000);
+          const dayName = forecastDate.toLocaleDateString("en-US", {
+            weekday: "short",
+          });
+          return `
+                  <li>
+                      <span>${dayName}</span>
+                      <img src="${getWeatherIconUrl(forecast.weather[0].icon)}" alt="${forecast.weather[0].description}">
+                      <span>${Math.round(forecast.main.temp)}<sup>°C</sup></span>
+                      <span>${forecast.wind.speed.toFixed(2)}m/s</span>
+                  </li>`;
+        })
+        .join("");
+      list.innerHTML = forecastHTML;
+    });
+}
+
+// Initial weather fetch
+fetchWeatherData(cities[currentCityIndex].lat, cities[currentCityIndex].lon);
+
+// Event listeners on button
+changeCityButton.addEventListener("click", () => {
+  currentCityIndex = (currentCityIndex + 1) % cities.length;
+  fetchWeatherData(cities[currentCityIndex].lat, cities[currentCityIndex].lon);
+});