Technigo · gabster94 · Sep 26, 2024 · Sep 26, 2024 · Sep 29, 2024 · Sep 29, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # Weather App
 
-Replace this readme with your own information about your project.
+The assignment of week 7 was to create a weather app using an open API source. The challenge was to fetch() data from given API, calculate or/and find use the right formatting to make the data readible for the user.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The assignment also included following a design as closely as possible.
 
 ## 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?
+I have mainly worked with JavaScript. To be able to use data for my weather app I have been fetching the data from the API and worked wwith different methods to extract the format of the data i wished to use - which was the most time consuming part, trying to find and understand how the code works, and what it actually does. This has been a challenging project for me, mostly due to time restrictions. But if I were to be given more time my code would be cleaner, and the design would resemble the given design to follow. I would also spend more time on understanding how everything is build and do more innerHTML rather than having so much code in the index file.
+
+Chat GPT was once again a great companion.
 
 ## 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://aetherweather.netlify.app/
diff --git a/assets/design-1/Group16.png b/assets/design-1/Group16.png
diff --git a/assets/design-1/Group34.png b/assets/design-1/Group34.png
diff --git a/assets/design-1/Group36.png b/assets/design-1/Group36.png
diff --git a/assets/design-1/Group37.png b/assets/design-1/Group37.png
diff --git a/assets/design-1/Group38.png b/assets/design-1/Group38.png
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/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Aether</title>
+</head>
+<body>
+    <section id="currentWeatherContainer">
+        <div id="weather-icon"></div>
+        <h1 id="currentTemperature"></h1>
+        <h2 id="thisCity"></h2>
+        <h3 id="currentTime"></h3>
+        <h4 id="currentWeatherText"></h4>
+        <div class="sun-container" id="sunContainer">
+            <h4 id="viewSunrise"></h4>
+            <h4 id="viewSunset"></h4>
+        </div>
+    </section>
+
+    <section id="forecastContainer">
+        <div class="forecast-element"
+        id="forecastElement"></div>
+    </section>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,3 +1,3 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+
+https://aetherweather.netlify.app/
diff --git a/script.js b/script.js
@@ -0,0 +1,144 @@
+// API
+const API_KEY = "c0a43477116d9adc8d5acc553c3b7227"
+const BASE_URL_CURRENT_WEATHER = "https://api.openweathermap.org/data/2.5/weather"
+const BASE_URL_FORCAST = "https://api.openweathermap.org/data/2.5/forecast"
+const city = "Stockholm"
+const URL_WEATHER = `${BASE_URL_CURRENT_WEATHER}?q=${city}&units=metric&appid=${API_KEY}`
+const URL_FORCAST = `${BASE_URL_FORCAST}?q=${city}&units=metric&appid=${API_KEY}`
+// &units=metric
+console.log(URL_WEATHER)
+console.log(URL_FORCAST)
+
+
+// DOM selectors
+const currentWeatherIcon = document.getElementById("weather-icon")
+const currentTemperature = document.getElementById("currentTemperature")
+const forThisCity = document.getElementById("thisCity")
+const currentTime = document.getElementById("currentTime")
+const currentWeatherText = document.getElementById("currentWeatherText")
+const sunContainer = document.getElementById("sunContainer")
+const forecastContainer = document.getElementById("forecastContainer")
+
+forThisCity.innerHTML = city
+
+const updateHTMLForcast = (data) => {
+
+// Array to hold the daily forecasts
+const dailyForecasts = [];
+console.log(dailyForecasts)
+    // Loop through the forecast list and extract data for every 24 hours, at 00:00
+    for (let i = 0; i < data.list.length; i += 8) {  // 8 intervals per day (3-hour intervals). I'm using the 00:00 (first) weather data
+        const forecast = data.list[i];
+
+        const date = new Date(forecast.dt_txt)
+
+        // Extract the day of the week (e.g., Monday, Tuesday, etc.)
+        const dayOfWeek = date.toLocaleDateString('en', { weekday: 'short' })
+
+        // const date = forecast.dt_txt.split(" ")[0]; // Extract date
+        const temp = Math.round(forecast.main.temp); // Extract temperature
+        const wind = forecast.wind.speed; // Extract weather description
+        const icon = forecast.weather[0].icon // Extract weather icon
+
+        dailyForecasts.push({ 
+            dayOfWeek, 
+            temp, 
+            wind, 
+            icon: `http://openweathermap.org/img/wn/${icon}@2x.png` 
+        })
+    }
+
+    // Clear previous content in the container
+    forecastContainer.innerHTML = ""
+
+    // Loop through the daily forecasts and create HTML elements for each one
+    dailyForecasts.forEach(forecast => {
+        const forecastElement = document.createElement("div");  // Creates a new div element for each day's forecast
+        forecastElement.innerHTML = `
+            <div class="forecast-day">
+                <h3>${forecast.dayOfWeek}</h3>   <!-- Display the day -->
+                <img src="${forecast.icon}" alt="Weather icon">
+                <p>${forecast.temp}°C</p> 
+                <p>${forecast.wind}m/s</p>
+            </div>
+            `
+
+        forecastContainer.appendChild(forecastElement)
+    });
+}
+
+const getForcast = () => {
+    fetch(URL_FORCAST) 
+        .then(response => response.json())
+        .then(data => {
+            console.log(data)
+
+           updateHTMLForcast(data) 
+        })
+        .catch(error => {
+            console.error("Error fetching forecast:", error)
+            forecastContainer.innerHTML = "<p>Failed to load the weather data. Please try again later.</p>"
+        })
+}
+
+// Update HTML for Current Weather(container)
+const updateHTMLCurrent = (data) => {
+
+    // Get and extract the icon for current weather
+    const viewCurrentWeatherIcon = data.weather[0].icon
+
+
+    // Current temp in given city
+    const viewCurrentTemperature = Math.round(data.main.temp)
+    currentTemperature.innerHTML = `
+    <h1>${viewCurrentTemperature}</h1>
+    <p>°C</p>
+    `
+
+    // Current time in chosen city
+    const viewCurrentTime = new Date()
+
+    const currentTimeFormatted = viewCurrentTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    currentTime.innerHTML = `
+    Time: ${currentTimeFormatted}
+    `
+
+    // Current weather info
+    const viewWeatherInfoText = data.weather[0].description
+    // currentWeatherText.innerText = viewWeatherInfoText
+    currentWeatherText.innerHTML = `
+    <h4>${viewWeatherInfoText}</h4>
+    <img src="http://openweathermap.org/img/wn/${viewCurrentWeatherIcon}@2x.png" alt="current weather icon">
+    `
+
+    // sunContainer
+    // Calculate the time to normal-person-readeable
+    const sunriseTime = new Date(data.sys.sunrise * 1000)
+    const sunsetTime = new Date (data.sys.sunset * 1000)
+
+    // const timeNow = new Date()
+
+    // Format h and min time into a 2 digit nr = 00:00
+    const sunriseTimeFormatted = sunriseTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const sunsetTimeFormatted = sunsetTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+    sunContainer.innerHTML = `
+    <h4>Sunrise ${sunriseTimeFormatted}</h4>
+    <h4>Sunset ${sunsetTimeFormatted}</h4>
+    `
+
+    getForcast()
+}
+
+getCurrentWeather = () => {
+    fetch(URL_WEATHER) 
+        .then(response => response.json())
+        .then(data => {
+            console.log(data)
+
+
+            updateHTMLCurrent(data)
+        })
+}
+
+getCurrentWeather()
diff --git a/style.css b/style.css
@@ -0,0 +1,96 @@
+body {
+    margin: 0;
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    background-color: #e0e0e0;
+}
+
+#currentWeatherContainer {
+    background-color: rgb(194, 149, 237);
+    padding: 35px;
+    /* font-weight: lighter; */
+}
+
+#currentTemperature {
+    padding: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+#currentTemperature h1 {
+    font-size: 90px;
+    margin: 0;
+    font-weight: lighter;
+}
+
+#currentTemperature p {
+    font-size: 35px;
+    display: flex;
+    margin-bottom: 10;
+    margin-top: 0;
+}
+
+#currentWeatherText {
+    display: flex;
+    align-items: center;
+}
+
+#currentWeatherText h4 {
+    font-size: 20px;
+    padding: 0;
+    margin: 0;
+}
+
+#currentWeatherText img {
+    width: 50px;
+}
+
+
+.sun-container {
+    /* background-color: yellow; */
+    display: flex;
+    justify-content: space-evenly;
+}
+
+
+
+
+
+
+
+
+
+#forecastContainer {
+    /* font-size: 16px; */
+    /* background-color: blue; */
+    display: flex;
+    flex-direction: column;
+    margin: 45px 0px 45px 0px;
+    /* gap: 5px; */
+
+}
+
+.forecast-day {
+
+    padding-left: 15px;
+    padding-right: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+
+
+}
+
+.forecast-day h3 {
+    margin: 0;
+    font-size: 16px;
+}
+
+.forecast-day p {
+    margin: 0;
+}
+
+.forecast-day img {
+    width: 40px;
+}