Technigo · joheri1 · Sep 27, 2024 · Sep 27, 2024 · Sep 27, 2024 · Sep 27, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,25 @@
 # 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 assignment is to fetch data from an API using fetch() in JavaScript and create an  app should have a city name, current temperature, weather description, sunrise/sunset time, and a 4-day forecast. The data should be presented in a user-friendly format, and the app should be responsive to different devices. 
 
 ## 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?
+## Time
+This project was fun to work with and I wish I had more time. 
+
+I made a plan, and stuck to it, which was good. The plan was the following: 
+1. Create HTML File: Set up an HTML file with (the required) fields for city name, current temperature, weather description, sunrise and sunset times, and placeholders for the forecast.
+2. Add API URL and Endpoints: Create API URL and endpoints in the JavaScript file, and set up the DOM Selectors.
+3. Fetch today’s weather: Use async/await to fetch today's weather, convert the response to json format, populate the innerHTML, and add the error handling. When all fields for today's weather are fetched and displayed, start with the forecast.  
+4. Fetch and display Forecast: Retrieve and display the forecast dataFetch and display the Forecast data. 
+5. Format the data: Ensure the data is correctly formatted.
+6. Design and responsiveness: Work on the design and make the site responsive. 
+
+All went smoothly until I began working on the forecast. I had go back in the material (especially the Live sessions) multiple times just to get a hang of what I was expected to do next. On top of that there were so many JavaScript default behaviors that I needed to find solutions for, such as JavaScript weeks start on Sunday and the need to convert sunset times from seconds to milliseconds. These were fun challenges but I needed more time. As a result, the design part isn't fully completed. 
+
+## If I had more time
+I would improve my code by create a constant for updating the HTML to keep the functions clean, and find a way to combine the "calls" for today’s weather and the forecast into a single "call". Fetch and display lowest and highest temperature. Use images from the API, instead of using only the three that came along in the assets. And of course, pay more attention to the design.  
 
 ## 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.
+LINK: https://project-weather-app-by-joe.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/design-1/Group16.png b/code/assets/design-1/Group16.png
diff --git a/code/assets/design-1/Group34.png b/code/assets/design-1/Group34.png
diff --git a/code/assets/design-1/Group36.png b/code/assets/design-1/Group36.png
diff --git a/code/assets/design-1/Group37.png b/code/assets/design-1/Group37.png
diff --git a/code/assets/design-1/Group38.png b/code/assets/design-1/Group38.png
diff --git a/code/assets/design-2/noun_Cloud_1188486.svg b/code/assets/design-2/noun_Cloud_1188486.svg
diff --git a/code/assets/design-2/noun_Sunglasses_2055147.svg b/code/assets/design-2/noun_Sunglasses_2055147.svg
diff --git a/code/assets/design-2/noun_Umbrella_2030530.svg b/code/assets/design-2/noun_Umbrella_2030530.svg
diff --git a/code/index.html b/code/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project Weather App</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <div class="current-container">
+            <img id="weather-icon" src="" alt="Current Weather Icon"/>
+            <h1 id="temperature">Temperature</h1> 
+            <h2 id="city">City</h2>
+            <h3 id="description">Weather description</h3>
+            <p id="sunrise" class="sunrise_sunset">Sunrise: </p>
+            <p id="sunset" class="sunrise_sunset">Sunset: </p>
+        </div>
+        <div class="forecast-container">
+            <div id="four-day-forecast"></div>
+            <div class="day-container">
+            </div>
+        </div>
+        <div>
+            <footer>2024-09-29 Johanna Eriksson</footer>
+        </div>
+    </div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,100 @@
+//API URL and Endpoints
+const BASE_URL = "https://api.openweathermap.org/data/2.5/"
+const api_key = "xxx"
+
+// DOM Selectors
+const cityName = document.getElementById("city")
+const description = document.getElementById("description")
+const temperature = document.getElementById("temperature")
+const sunriseTime = document.getElementById("sunrise")
+const sunsetTime = document.getElementById("sunset")
+const fourDayForecast = document.getElementById('four-day-forecast')
+
+//Array with weekdays 
+const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+// Get today's date for comparison in forecast
+const today = new Date().getDate() 
+
+const weatherIcons = {
+    "scattered clouds": "./assets/design-1/Group16.png", // Cloudy
+    "few clouds": "./assets/design-1/Group34.png", // Few clouds
+    "clear sky": "./assets/design-1/Group37.png", // Sunny
+}
+
+//Fetch todays weather
+const fetchTodaysWeatherAsync = async (city) => {
+    const todayURL = `${BASE_URL}weather?q=${city}&units=metric&APPID=${api_key}`
+    // units=metric to get temperatures in Celcius
+    try {
+        const response = await fetch(`${todayURL}`)
+        if (!response.ok) {
+            throw new Error("Failed to fetch today's weather data")
+        }
+        //convert response to JSON
+        const data = await response.json()
+
+        //Update DOM with today's weather data
+        cityName.innerHTML = data.name
+        temperature.innerHTML = `${Math.round(data.main.temp)} °C`
+        description.innerHTML = data.weather[0].description
+
+        const weatherDescription = data.weather[0].description
+
+        //Weather icon
+        const weatherIconURL = weatherIcons[weatherDescription] || "./assets/design-1/Group16.png"; // Default icon
+        console.log("Weather icon path:", weatherIconURL)
+        document.getElementById("weather-icon").src = weatherIconURL
+
+
+        //Sunset/Sunrise 
+
+        //Convert Time zone and Sunset / Sunrise from seconds to milliseconds by multiplying by 1000, which the date object requires 
+        const localTimezone = data.timezone * 1000 
+        const sunrise = new Date((data.sys.sunrise * 1000) + localTimezone).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        const sunset = new Date((data.sys.sunset * 1000) + localTimezone).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+
+        sunriseTime.innerHTML = `Sunrise: ${sunrise}`
+        sunsetTime.innerHTML = `Sunset: ${sunset}`
+
+    } catch (error) {
+     //Handle any errors 
+    console.error("Error when fetching Today's weather", error)
+     }
+}
+fetchTodaysWeatherAsync("Las Vegas")
+
+//Fetch forecast weather
+const fetchForecastWeatherAsync = async (city) => {
+    const forecastURL = `${BASE_URL}forecast?q=${city}&units=metric&cnt=40&appid=${api_key}`
+     // units=metric to get temperatures in Celcius and cnt=40 for a 5 day forecast, then we remove todays forecast
+    try {
+        const response = await fetch(`${forecastURL}`)
+        if (!response.ok) {
+            throw new Error("Failed to fetch forecast weather data")
+      }
+      //convert response to JSON
+      const data = await response.json()
+
+      //Filter forecast on 12:00
+      const filteredForecast = data.list.filter(forecast => {
+        const forecastDate = new Date(forecast.dt_txt)
+        return forecastDate.getHours() === 12 && forecastDate.getDate() !== today
+      })
+      filteredForecast.forEach(forecast => {
+        let forecastDate = new Date(forecast.dt_txt)//Convert date to Date const
+        let dayName = weekdays[forecastDate.getDay()] // Get weekday
+        // Get weather icon
+        const weatherDescription = forecast.weather[0].description
+
+        //Update HTML with weekday, temperture and icon
+        const forecastIconURL = weatherIcons[weatherDescription] || "./assets/design-1/Group16.png"; // Default icon
+        fourDayForecast.innerHTML += `<p>${dayName}: <img src="${forecastIconURL}" alt="weather icon"> ${Math.round(forecast.main.temp)} °C</p>`
+
+        })
+    } catch (error) {
+     //Handle any errors 
+    console.error("Error when fetching the forecast", error)
+     }
+}
+fetchForecastWeatherAsync("Las Vegas")
diff --git a/code/styles.css b/code/styles.css
@@ -0,0 +1,139 @@
+/*Ensure images adapts well to all devices*/
+img {
+    display: block;
+    max-width: 100%;
+}
+
+/*Mobile*/
+@media screen and (max-width: 600px) {
+    .container {
+        padding: 10px;
+        margin-top: 10px;
+        max-width: 100%;
+        max-height: 100%;
+    }
+    footer {
+        width: 300px;
+    }
+}
+/* Tablet */ 
+
+@media screen and (min-width: 501px) and (max-width: 1024px) {
+    body {
+        padding: 10px;
+        margin: 40px;
+    }
+    .container {
+      width: 800px;
+      margin-top: 40px;
+      padding: 50px;
+    }
+    .temperature h1 {
+      font-size: 60px;
+    }
+
+    .forecast p {
+      font-size: 16px;
+    }
+}
+/* Desktop */ 
+@media screen and (min-width: 1025px) {
+    body {
+        padding: 10px;
+        margin: 40px;
+    }
+    .container {
+        width: 100%;
+    }
+    .temperature h1 {
+        font-size: 72px;
+    }
+    .forecast p {
+        font-size: 18px;
+    }
+}
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #d1c4e9;
+  }
+
+  .container {
+    background: linear-gradient(to bottom, #d1c4e9, #fff);
+    border-radius: 20px;
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+    margin-top: 40px;
+    padding: 50px;
+    width: 320px;
+    height: 100%;
+    text-align: center;
+    overflow-y: auto
+  }
+
+  #weather-icon {
+    display: block;
+    margin: 0 auto;  
+    width: 100px;  
+}
+  .temperature h1 {
+    font-size: 72px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .sunrise_sunset {
+    font-size: 14px;
+    color: grey;
+    opacity: 0.6;
+  }
+
+  .forecast {
+    margin-top: 20px;
+  }
+
+  #four-day-forecast {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+  .forecast #four-day-forecast {
+    text-align: center;
+    margin: 5px;
+}
+
+  .forecast #four-day-forecast p {
+    font-size: 14px;
+    color: #333;
+    margin: 5px 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .forecast-day {
+    display: flex;
+    align-items: center; 
+    justify-content: center;  
+    padding: 10px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.forecast-day img {
+    margin-right: 10px; 
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    color: #fff;
+    background-color: #d1c4e9;
+    border-radius: 20px;
+    border-style: dotted;
+    padding: 10px;
+    margin-top: 20px;
+}
+
diff --git a/instructions.md b/instructions.md
@@ -8,7 +8,7 @@ Start out with signing up for a [free Open Weather Map](https://home.openweather
 For example, to get the current weather in Stockholm, you can use the URL below. Remember to replace YOUR_API_KEY with the API key you copied from your dashboard.
 
 ```
-https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=YOUR_API_KEY
+https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=xxxxx
 ```
 
 The response should look something like this (this has been run through jsonlint.com to add newlines and indentation):