Technigo · Jonash189 · Sep 22, 2024 · Sep 25, 2024 · Sep 26, 2024 · Sep 29, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # 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 task involves building a weather app that fetches data from an API and presents it in a user-friendly format. The app should display the city name, current temperature (rounded to one decimal place), and a weather description. Additional features include showing the sunrise and sunset times in a readable format, and a four-day weather forecast, using data from the API filtered to display the same time each day (e.g., 12:00). The app must be styled to match a provided design and be responsive for different screen sizes
 
 ## 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?
+Initially, I found it quite challenging to understand how to properly code for retrieving data from the API. Eventually, things started to click, especially when it came to fetching specific data, such as the current temperature. However, when the data was displayed in formats like milliseconds, I encountered a new issue. I had to solve that by writing additional code to convert the milliseconds into the correct time, date, temperature, etc. It was tricky, but after a lot of Googling, I managed to format the data correctly.
+
+Another challenge was styling the app, as it had been a while since I last worked on CSS. It took some time to get back into it. Getting the forecast for the next four days was also difficult, but I managed to resolve that issue as well, thanks to Google and ChatGPT.
 
 ## 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://jonas-weather-app.netlify.app/
diff --git a/img/Path 7.png b/img/Path 7.png
diff --git a/img/clody.png b/img/clody.png
diff --git a/img/clouds.png b/img/clouds.png
diff --git a/img/deafult.png b/img/deafult.png
diff --git a/img/foggy.png b/img/foggy.png
diff --git a/img/night.png b/img/night.png
diff --git a/img/rain.png b/img/rain.png
diff --git a/img/snow.png b/img/snow.png
diff --git a/img/sun.png b/img/sun.png
diff --git a/img/thunderstorm.png b/img/thunderstorm.png
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!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">
+    <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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        rel="stylesheet">
+    <title>Weather forecast</title>
+
+</head>
+
+<body>
+
+    <!-- MAIN WEATHER DISPLAY -->
+    <Section class="background">
+        <div class="weather-right-now" id="weather-right-now">
+        </div>
+
+        <div class="sunset-sunrise" id="sunset-sunrise">
+        </div>
+    </Section>
+
+    <!-- 4-DAY WEATHER FORECAST -->
+
+    <div class="forecast" id="forecast">
+    </div>
+
+    <script src="./script.js"></script>
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,60 @@
+const weatherRightNow = document.getElementById('weather-right-now');
+const sunsetSunrise = document.getElementById('sunset-sunrise');
+const forecast = document.getElementById('forecast');
+document.body.style.fontFamily = 'MyCustomFont, sans-serif';
+
+// Fetch current weather data for Stockholm
+fetch('https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=3492ebb354e19f61676ca7b4ced6d196')
+  .then((response) => response.json())
+  .then((json) => {
+    const temperature = json.main.temp.toFixed(0);
+    const description = json.weather[0].description;
+    const icon = json.weather[0].icon;
+    const sunrise = new Date(json.sys.sunrise * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const sunset = new Date(json.sys.sunset * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const timestamp = new Date(json.dt * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+    weatherRightNow.innerHTML = `<h1>${temperature}<span class='degree'>°C</span></h1>`;
+    weatherRightNow.innerHTML += `<h2>${json.name}</h2>`;
+    weatherRightNow.innerHTML += `<p>Time: ${timestamp}</p>`;
+    weatherRightNow.innerHTML += `<p>${description} <img src="http://openweathermap.org/img/wn/${icon}@2x.png" alt="Weather icon"></p>`;
+
+    sunsetSunrise.innerHTML += `<p>Sunrise: ${sunrise} | Sunset: ${sunset}</p>`;
+  })
+  .catch((error) => {
+    console.error('Error fetching weather data:', error);
+  });
+
+// Fetch forecast for Stockholm
+fetch('https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=3492ebb354e19f61676ca7b4ced6d196')
+  .then(response => response.json())
+  .then(data => {
+    forecast.innerHTML = '';  // Clear previous content
+
+    const today = new Date().getDate();  // Today's date
+    const dailyForecasts = [];
+
+    data.list.forEach(item => {
+      const itemDate = new Date(item.dt_txt).getDate();  // Date for each forecast
+
+      // Only get one forecast per day, ensuring it's a new day
+      if (!dailyForecasts.some(f => new Date(f.dt_txt).getDate() === itemDate)) {
+        dailyForecasts.push(item);
+      }
+    });
+
+    // Limit to today + four days ahead
+    const forecastDays = dailyForecasts.slice(1, 5);
+
+    // Iterate over forecast days and create HTML content
+    forecastDays.forEach(item => {
+      forecast.innerHTML += `
+                <div class="forecast-day">
+                    <p>${new Date(item.dt_txt).toLocaleDateString('ENG', { weekday: 'short' })}</p>
+                    <p><img src="http://openweathermap.org/img/wn/${item.weather[0].icon}@2x.png" alt="Weather icon"></p>
+                    <p>${item.main.temp.toFixed(0)}°C</p>
+                    <p>${item.wind.speed} m/s</p>
+                </div>`;
+    });
+  })
+  .catch(error => console.log('Error fetching data:', error));
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+body {
+    margin: 0 auto;
+}
+
+.background {
+    background-color: #15199e;
+    padding-bottom: 20px;
+    overflow-x: hidden;
+    clip-path: ellipse(110% 100% at 50% 0%);
+}
+
+.weather-right-now {
+    overflow-x: hidden;
+    margin: 10px 0px 0px 0px;
+    text-align: center;
+    color: white;
+}
+
+.degree {
+    font-size: 0.5em;
+    vertical-align: super;
+}
+
+.sunset-sunrise {
+    font-size: 10px;
+    text-align: center;
+    color: white;
+}
+
+.forecast {
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 100%;
+    align-items: center;
+    font-size: 22px;
+}
+
+.forecast-day {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2rem;
+    text-align: center;
+    margin: 3px;
+    align-items: center;
+}
+
+h1 {
+    font-family: "Roboto", sans-serif;
+    font-size: 100px;
+    font-weight: 300;
+    margin: 0;
+    color: white;
+}
+
+h2 {
+    font-family: "Roboto", sans-serif;
+    font-size: 45px;
+    font-weight: 320;
+    margin: 0;
+    color: white;
+}
+
+p {
+    font-family: "Roboto", sans-serif;
+    font-size: 22px;
+    font-weight: 300;
+}
+
+img {
+    width: 70px;
+    height: 70px;
+    vertical-align: middle;
+    filter: none;
+}