Technigo · Anna2024WebDev · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 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,15 @@
 # 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 week the project was to create a weather app by using APIs and using different methods to retrieve and convert the data, such as fetch and convert unix time. 
 
 ## 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 started with adding the HTML and CSS code. Then I moved on to JS where I added the API and console.logged it. Then I moved on to adding the DOM selectors and created the first function to fetch the current weather data and sunset/sunrise time. After this was achived I moved on to converting the sunset/sunrise time. I needed help from chatGPT to achieve this and also how to get the forecast data which was not as straight forward as the current weather data. 
+
+Then I also managed to change the background color, color (fonts) and images depending on weather description, for this I used if/if else statements. 
+
+If I had more time I would also look into the geolocation 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://checkthe-weather.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 → assets/design-2/noun_Cloud.svg b/assets/design-2/noun_Cloud_1188486.svg → assets/design-2/noun_Cloud.svg
diff --git a/assets/design-2/noun_Sunglasses_2055147.svg → assets/design-2/noun_Sunglasses.svg b/assets/design-2/noun_Sunglasses_2055147.svg → assets/design-2/noun_Sunglasses.svg
diff --git a/assets/design-2/noun_Umbrella_2030530.svg → assets/design-2/noun_Umbrella.svg b/assets/design-2/noun_Umbrella_2030530.svg → assets/design-2/noun_Umbrella.svg
diff --git a/assets/design-2/sad-face-3.svg b/assets/design-2/sad-face-3.svg
diff --git a/assets/design-2/scattered.svg b/assets/design-2/scattered.svg
diff --git a/assets/design-2/snow.png b/assets/design-2/snow.png
diff --git a/assets/design-2/sunset.png b/assets/design-2/sunset.png
diff --git a/assets/design-2/sunset.svg b/assets/design-2/sunset.svg
diff --git a/assets/design-2/thunderstorm.png b/assets/design-2/thunderstorm.png
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather or Not</title>
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <title>Check the Weather</title>
+</head>
+<body>
+<main><!-- Temperature and Condition Info -->
+<section class="weather-container" id="weatherContainer">
+    <div class="temperature-info">
+      <p id="condition"></p>
+      <p>|</p>
+      <p id="temperature"></p>
+    </div>
+    <!-- Sunset and Sunrise Info -->
+    <div class="sun-times">
+      <p>sunrise <span id="sunriseTime"></span></p>
+      <p>sunset <span id="sunsetTime"></span></p>
+    </div>
+    <img id="weatherImage" class="weather-img" src="" alt="Weather Image">
+    <p id="weatherMessage" class="weather-message"></p> <!-- Placeholder for dynamic weather message -->
+<section class="forecast-wrapper" id="forecastWrapper">
+  <ul id="forecastList"></ul> <!-- List items will be dynamically added here -->
+  <div id="searchContainer">
+    <!-- <label for="cityInput">City:</label> -->
+    <input type="text" id="cityInput" placeholder="Type a city..">
+    <button id="searchButton">Search</button>
+  </div>
+</section>
+</main>
+<script src="./script.js"></script>
+<body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/instructions.md b/instructions.md
@@ -1,5 +1,5 @@
 # Instructions
-Start out with signing up for a [free Open Weather Map](https://home.openweathermap.org/users/sign_up "free Open Weather Map") account, as it can take up to a few hours for the API key to be activated.
+Start out with signing up for a [free Open Weather Map]( 	  "free Open Weather Map") account, as it can take up to a few hours for the API key to be activated.
 
 ## Step by step instructions
 ### Step 1 - Get started with the weather API

diff --git a/script.js b/script.js
@@ -0,0 +1,209 @@
+// Current weather API
+// ea9a90c62aeaaa3811505087d195520e
+// Base URL + API key
+//https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e
+//https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e
+
+// True constants (SNAKECASE)
+const API_KEY = "ea9a90c62aeaaa3811505087d195520e";
+const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q=";
+const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast?q=";
+
+let CITY = "Stockholm"; // Dynamic city variable
+
+// DOM Selectors
+const temperatureDisplay = document.getElementById("temperature");
+const conditionDisplay = document.getElementById("condition");
+const sunriseDisplay = document.getElementById("sunriseTime");
+const sunsetDisplay = document.getElementById("sunsetTime");
+const weatherImg = document.getElementById("weatherImage");
+const weatherMsg = document.getElementById("weatherMessage");
+const forecastList = document.getElementById("forecastList");
+const searchButton = document.getElementById("searchButton");
+const cityInput = document.getElementById("cityInput");
+
+// Function to fetch weather data
+function fetchWeatherData() {
+    const URL = `${BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`;
+    const FORECAST_URL = `${FORECAST_BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`;
+
+    // Fetch current weather data
+    fetch(URL)
+        .then(response => response.json())
+        .then(data => {
+            if (!data || data.cod !== 200) {
+                throw new Error('City not found')
+            }
+            const stockholmTemp = data.main.temp;
+            const weatherCondition = data.weather[0].description; 
+            const roundedTemp = Math.round(stockholmTemp);
+            const sunrise = data.sys.sunrise;
+            const sunset = data.sys.sunset;
+            const timezoneOffset = data.timezone; // Timezone offset in seconds
+
+            temperatureDisplay.innerText = `${roundedTemp}°C`;
+            conditionDisplay.innerText = `${weatherCondition}`;
+
+    // Function to convert UNIX timestamp to readable time format (24-hour clock)
+            const convertUnixToTime = (unixTimestamp, timezoneOffset) => {
+                const date = new Date((unixTimestamp + timezoneOffset)* 1000);
+                const hours = date.getUTCHours();
+                const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+                return `${hours}:${minutes}`;
+            }
+    // Convert and display sunrise and sunset times with timezone offset (so it is local time showing for the selected city)
+            const sunriseTime = convertUnixToTime(sunrise, timezoneOffset);
+            const sunsetTime = convertUnixToTime(sunset, timezoneOffset);
+            sunriseDisplay.innerText = `${sunriseTime}`;
+            sunsetDisplay.innerText = `${sunsetTime}`;
+
+            updateUI(roundedTemp, weatherCondition);
+        })
+        .catch(error => console.error('Error fetching weather data:', error));
+
+        fetch(FORECAST_URL)
+        .then(response => response.json())
+        .then(forecastData => {
+            forecastList.innerHTML = '';
+
+            const today = new Date();
+
+            // Loop through the next 5 days
+            for (let i = 1; i <= 5; i++) {
+                const forecastDate = new Date(today);
+                forecastDate.setDate(today.getDate() + i);
+                const forecastDateString = forecastDate.toISOString().split('T')[0];
+
+                // Filter forecasts for this specific date
+                const dailyForecasts = forecastData.list.filter(item => {
+                    const itemDate = new Date(item.dt * 1000).toISOString().split('T')[0];
+                    return itemDate === forecastDateString;
+                });
+
+                if (dailyForecasts.length > 0) {
+                    // Initialize min and max temperature variables
+                    let minTemp = Infinity;
+                    let maxTemp = -Infinity;
+
+                    // Calculate min and max temperatures for the day
+                    dailyForecasts.forEach(item => {
+                        const temp = Math.round(item.main.temp);
+
+                        if (temp < minTemp) {
+                            minTemp = temp;
+                        }
+                        if (temp > maxTemp) {
+                            maxTemp = temp;
+                        }
+                    });
+
+                    const weekDay = forecastDate.toLocaleDateString('en-US', { weekday: 'long' });
+
+                    const listItem = document.createElement('li');
+                    listItem.innerHTML = `${weekDay}: <span class="min-temp">${minTemp} / <span class="max-temp">${maxTemp}°C</span>`;
+                    forecastList.appendChild(listItem);
+                }
+            }
+        })
+
+        .catch(error => console.error('Error fetching forecast data:', error));
+}
+
+// Initial fetch for the default city
+fetchWeatherData();
+
+// Event listener for the search button
+searchButton.addEventListener("click", () => {
+    CITY = cityInput.value.trim(); // Update city variable with input value
+    if (CITY) {
+        fetchWeatherData(); // Fetch new weather data for the entered city
+    }
+});
+
+// Event listener for the Enter key in the input field
+cityInput.addEventListener("keypress", (event) => {
+    if (event.key === "Enter") { // Check if the pressed key is Enter
+        searchButton.click(); // Trigger the click event of the search button
+    }
+});
+
+function updateUI(temperature, weatherDescription) {
+    const weatherContainer = document.getElementById("weatherContainer");
+    const searchButton = document.getElementById ("searchButton")
+    const currentTime = new Date(); // Get the current time
+    const sunset = new Date(sunsetTime * 1000); // Convert sunset time (already fetched) to Date object
+    let weatherMessage; // Use let since the variable weatherMessage will change depending on weather
+
+    // Update background and text color based on weather condition
+    if (weatherDescription.toLowerCase().includes("rain") || 
+        weatherDescription.toLowerCase().includes("drizzle") || 
+        weatherDescription.toLowerCase().includes("mist")) {
+        weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for rain
+        weatherContainer.style.color = "#164A68"; // Rainy font color
+        searchButton.style.backgroundColor ="#164A68"
+        weatherImg.src = "assets/design-2/noun_Umbrella.svg";
+        weatherMessage = `Don’t forget your umbrella.<br>It’s wet in ${CITY} today.`;
+
+    } else if (weatherDescription.toLowerCase().includes("few clouds")) {
+        weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky
+        weatherContainer.style.color = "#2A5510"; // Green font color
+        searchButton.style.backgroundColor ="#2A5510"
+        weatherImg.src = "assets/design-2/noun_Sunglasses.svg";
+        weatherMessage = `Get your sunnies on. There are a few clouds, but it's still a lovely day in ${CITY}.`;
+
+    } else if (weatherDescription.toLowerCase().includes("scattered clouds")) {
+        weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky
+        weatherContainer.style.color = "#2A5510"; // Green font color
+        searchButton.style.backgroundColor ="#2A5510"
+        weatherImg.src = "assets/design-2/noun_cloud.svg";
+        weatherMessage = `There are some scattered clouds, but it's still a lovely day in ${CITY}.`;
+
+    } else if (weatherDescription.toLowerCase().includes("clear")) {
+        // Daytime clear sky
+        weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky
+        weatherContainer.style.color = "#2A5510"; // Green font color
+        searchButton.style.backgroundColor ="#2A5510"
+        weatherImg.src = "assets/design-2/noun_Sunglasses.svg";
+        weatherMessage = `Get your sunnies on.<br>${CITY} is looking rather great today.`;
+
+        // Check if it's after sunset for clear skies
+        if (currentTime > sunset) {
+            // Sunset condition
+            weatherContainer.style.backgroundColor = "#F7E9B9"; // Keep the yellow for sunset
+            weatherContainer.style.color = "#F47775"; // Orange font color
+            searchButton.style.backgroundColor ="#F47775"
+            weatherImg.src = "assets/design-2/sunset.png"; // Change to sunset image
+            weatherMessage = `The sun has set.<br>Enjoy the evening and night in ${CITY}!`;
+        }
+    } else if (weatherDescription.toLowerCase().includes("clouds") || 
+               weatherDescription.toLowerCase().includes("fog") ||
+               weatherDescription.toLowerCase().includes("haze")) {
+        weatherContainer.style.backgroundColor = "#FFFFFF"; // White background
+        weatherContainer.style.color = "#F47775"; // Orange font color
+        searchButton.style.backgroundColor ="#F47775"
+        weatherImg.src = "assets/design-2/noun_Cloud.svg";
+        weatherMessage = `Light a fire and get cosy.<br>${CITY} is looking grey today.`;
+
+    } else if (weatherDescription.toLowerCase().includes("snow")) {
+        weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for cold weather
+        weatherContainer.style.color = "#164A68"; // Blue font color
+        searchButton.style.backgroundColor ="#164A68" //Blue font color
+        weatherImg.src = "assets/design-2/snow.png";
+        weatherMessage = `It is snowing today in ${CITY}.<br> Put on your winter clothes and get ready to play in the snow!`;
+
+    } else if (weatherDescription.toLowerCase().includes("thunderstorm")) {
+        weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for storm
+        weatherContainer.style.color = "#164A68"; // Blue font color
+        searchButton.style.backgroundColor ="#164A68" //Blue font color
+        weatherImg.src = "assets/design-2/thunderstorm.png";
+        weatherMessage = `Stormy weather ahead in ${CITY} today!<br> Seek shelter and avoid outdoor activities.`;
+    } else {
+        weatherContainer.style.backgroundColor = "white"; // Fallback background
+        weatherContainer.style.color = "black"; // Fallback font color
+        searchButton.style.backgroundColor ="black" //Blue font color
+        weatherImg.src = "assets/design-2/sad-face-3.svg";
+        weatherMessage = `The weather description cannot be picked up at the moment.`;
+    }
+
+    weatherMsg.innerHTML = weatherMessage; // Update the weather message display
+}