Technigo · ElinaEH · Sep 25, 2024 · Sep 25, 2024 · Sep 25, 2024 · Sep 26, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,8 @@
 # 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.
+This weeks assignment was to create a weather app using external data from an API. We could chose between two different designs and I chose the second design option. I based my weather app on data of the current weather in Stockholm and a 4-day forecast. During this project we used the fetch functions to implement the data from the API.
 
 ## 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?
+This week was better than the two previous ones for me. I tried to be extra attentive during the live sessions this week and took notes. I used different helpful tools such as google, chatgbt and the inspector. If I had more time I would look into how I could show the 4-day forecast data with the degrees on the right side and the days on the left. I tried this out but I didn't manage to make it work. When I tried it out something else in the code changed and I ended up having the days and the degrees next to each other instead. 
 
 ## 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://elinasweatherapp2.netlify.app/
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!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 to css file -->
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div id="error"></div>
+
+  <div id="weather-container"></div>
+  <!-- Current weather information displayed here -->
+  <div class="current-weather">
+    <p id="temperature"></p>
+    <p id="weather"></p>
+    <p>Sunrise <span id="sunrise"></span></p>
+    <p>Sunset <span id="sunset"></span></p>
+  </div>
+
+  <!-- Sunglasses image  -->
+  <img class="image" src="assets/design-2/noun_Sunglasses_2055147.svg" alt="sunglasses">
+  </div>
+
+  <h1>Get your sunnies on.
+    <br>
+    It's a beautiful day in<span id="location"></span> today.
+  </h1>
+
+  <!-- 4-day forecast weather -->
+  <div id="forecast-list" class="forecast-container"></div>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,3 +1,2 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+https://elinasweatherapp2.netlify.app/
diff --git a/script.js b/script.js
@@ -0,0 +1,84 @@
+// True constants
+const API_KEY = "959cb256f265cbbe5b4051e4a40be3af";
+const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";
+const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast";
+
+const city = "Stockholm";
+
+// Create URL for current weather
+const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`;
+
+const errorDiv = document.getElementById("error");
+
+//Fetch current weather data
+fetch(URL)
+  .then(response => response.json())
+  .then(data => {
+
+    const cityName = data.name;
+    const temp = data.main.temp.toFixed(1);
+    const typeOfWeather = data.weather[0].description;
+    //Convert first letter of weather description to uppercase
+    const capitalizedWeather = typeOfWeather.charAt(0).toUpperCase() + typeOfWeather.slice(1);
+
+    const sunriseTime = new Date(data.sys.sunrise * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    const sunsetTime = new Date(data.sys.sunset * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+
+    // Display weather data on page
+    document.getElementById("location").innerText = `${cityName}`;
+    document.getElementById("temperature").innerText = `${temp}°`;
+    document.getElementById("weather").innerText = `${capitalizedWeather}`; // Use capitalized description
+    document.getElementById("sunrise").innerText = `${sunriseTime}`;
+    document.getElementById("sunset").innerText = `${sunsetTime}`;
+  })
+
+  // Error message
+  .catch(error => {
+    errorDiv.innerText = "Something went wrong.";
+  });
+
+// Fetch 4-day forecast data
+const forecastURL = `${FORECAST_BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`;
+
+fetch(forecastURL)
+  .then(response => response.json())
+  .then(data => {
+    const forecastList = document.getElementById("forecast-list");
+
+    //Group forecast date by days and calculate average temperature
+    const dailyTemps = {};
+
+    data.list.forEach(forecast => {
+      const dateObj = new Date(forecast.dt_txt);  // Create Date object
+      const dayOfWeek = dateObj.toLocaleDateString('en-US', { weekday: 'long' }); // Get long, full name of the day
+      const temp = forecast.main.temp;
+
+      if (!dailyTemps[dayOfWeek]) {
+        dailyTemps[dayOfWeek] = {
+          totalTemp: temp,
+          count: 1
+        };
+      } else {
+        dailyTemps[dayOfWeek].totalTemp += temp;
+        dailyTemps[dayOfWeek].count += 1;
+      }
+    });
+
+    // Clear any existing forecast data
+    forecastList.innerText = "";
+
+    // Display 4-day forecast
+    Object.keys(dailyTemps).slice(1, 5).forEach(dayOfWeek => {
+      const averageTemp = (dailyTemps[dayOfWeek].totalTemp / dailyTemps[dayOfWeek].count).toFixed(1);
+
+      const forecastItem = document.createElement("p");
+      forecastItem.innerHTML = `${dayOfWeek} ${averageTemp}°`;
+
+      forecastList.appendChild(forecastItem);
+    });
+  })
+
+  // Error message
+  .catch(error => {
+    errorDiv.innerText = "Something went wrong."
+  });
diff --git a/style.css b/style.css
@@ -0,0 +1,74 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-family: 'Arial', sans-serif;
+    background-color: #F7E9B9;
+    color: #2A5510;
+    margin: 0;
+    padding: 40px;
+}
+
+.current-weather {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    font-size: 21px;
+    padding-bottom: 40px;
+}
+
+p {
+    font-size: 21px;
+    margin: 4px 0;
+}
+
+#image {
+    display: block;
+    margin: 30px auto;
+}
+
+h1 {
+    margin-top: 20px;
+    text-align: left;
+    font-size: 37px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    color: #2A5510;
+}
+
+#location {
+    margin-top: 20px;
+    text-align: left;
+    font-size: 37px;
+    color: #2A5510;
+    padding-left: 5px;
+
+}
+
+.forecast-container p {
+    display: flex;
+    font-size: 21px;
+    padding: 10px;
+    border-bottom: 1px dotted #2e523a;
+    /* Dotted line bottom */
+    color: #2A5510;
+    line-height: 36px;
+}
+
+/* Media queries */
+/* Tablet */
+@media only screen and (min-width: 768px) and (max-width: 1023px) {
+    body {
+        padding: 50px;
+    }
+}
+
+/* Desktop */
+@media only screen and (min-width: 1024px) and (max-width: 1600px) {
+    body {
+        /* margin: 0 auto; */
+        padding: 60px;
+    }
+}