Technigo · nella-x · Sep 24, 2024 · Sep 24, 2024 · Sep 26, 2024 · Sep 26, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+My first API project. It shows the weather in Malmö, sunrise+sunset and a 4 day forecast.
 
 ## 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'm using two different API:s, one for the weather and one for the forecast. I'm filtering the data and using innerHTML to display the information. I would like to add a search bar so that you could get the weather for other cities as well. But I spent my time making it look cute and colorful instead! :D
 
 ## 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://grayslay.netlify.app/ - my colorful weather app!
diff --git a/code/index.html b/code/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">
+
+  <link rel="stylesheet" href="style.css">
+
+  <title>Gray slay</title>
+  <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=Sedgwick+Ave+Display&display=swap" rel="stylesheet">
+
+
+  <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=Slackside+One&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+  <!-- Your task is to present some data on your web app. Start with:
+- the city name
+- the temperature (rounded to 1 decimal place)
+- and what type of weather it is (the "description" in the JSON) -->
+
+
+
+  <section class="the-weather">
+    <div class="hero-image">
+      <div class="city-weather" id="cityWeather">
+      </div>
+
+      <div class="sun-rise-set" id="sunRiseSet">
+      </div>
+
+      <div class="future-weather" id="futureWeather">
+      </div>
+    </div>
+  </section>
+
+
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,104 @@
+console.log('Vamos a la playa')
+
+// https://api.openweathermap.org/data/2.5/weather?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447
+
+// https://api.openweathermap.org/data/2.5/forecast?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447
+
+const myCity = document.getElementById('cityWeather')
+const theSun = document.getElementById('sunRiseSet')
+const futureWeatherContainer = document.getElementById('futureWeather');
+
+const weatherIcons = {
+  '01d': 'https://openweathermap.org/img/wn/[email protected]', // clear sky, day
+  '01n': 'https://openweathermap.org/img/wn/[email protected]', // clear sky, night
+  '02d': 'https://openweathermap.org/img/wn/[email protected]', // few clouds, day
+  '02n': 'https://openweathermap.org/img/wn/[email protected]', // few clouds, night
+  '03d': 'https://openweathermap.org/img/wn/[email protected]', // scattered clouds, day
+  '03n': 'https://openweathermap.org/img/wn/[email protected]', // scattered clouds, night
+  '04d': 'https://openweathermap.org/img/wn/[email protected]', // broken clouds, day
+  '04n': 'https://openweathermap.org/img/wn/[email protected]', // broken clouds, night
+  '09d': 'https://openweathermap.org/img/wn/[email protected]', // shower rain, day
+  '09n': 'https://openweathermap.org/img/wn/[email protected]', // shower rain, night
+  '10d': 'https://openweathermap.org/img/wn/[email protected]', // rain, day
+  '10n': 'https://openweathermap.org/img/wn/[email protected]', // rain, night
+  '11d': 'https://openweathermap.org/img/wn/[email protected]', // thunderstorm, day
+  '11n': 'https://openweathermap.org/img/wn/[email protected]', // thunderstorm, night
+  '13d': 'https://openweathermap.org/img/wn/[email protected]', // snow, day
+  '13n': 'https://openweathermap.org/img/wn/[email protected]', // snow, night
+  '50d': 'https://openweathermap.org/img/wn/[email protected]', // mist, day
+  '50n': 'https://openweathermap.org/img/wn/[email protected]', // mist, night
+};
+
+fetch('https://api.openweathermap.org/data/2.5/weather?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447')
+  .then((response) => {
+    return response.json()
+  })
+  .then((json) => {
+    const temperature = json.main.temp; // Get the actual temperature
+    const cityName = json.name;
+    const weatherDescription = json.weather[0].description;
+    const sunriseTimestamp = json.sys.sunrise;
+    const sunsetTimestamp = json.sys.sunset;
+
+    console.log(json)
+
+    // Convert timestamps to date objects and format
+    const sunriseDate = new Date(sunriseTimestamp * 1000);
+    const sunsetDate = new Date(sunsetTimestamp * 1000);
+    const sunriseTime = sunriseDate.toLocaleTimeString('en-US',
+      { timeStyle: 'short', hour12: false });
+    const sunsetTime = sunsetDate.toLocaleTimeString('en-US', { timeStyle: 'short', hour12: false });
+
+
+
+    const weatherIconCode = json.weather[0].icon;
+    const iconUrl = weatherIcons[weatherIconCode] || 'https://openweathermap.org/img/wn/unknown.png'; // Default icon for unknown code
+
+    cityWeather.innerHTML = `<h1>The temperature in ${cityName}, Sweden is ${temperature.toFixed(1)}°C.️</h1> <img class="l-icon" src="${iconUrl}" alt="${weatherDescription}"> <p>The weather is giving: ${weatherDescription}.</p>`;
+
+    // Update the sunrise/sunset element
+    theSun.innerHTML = `<p>Sunrise: ${sunriseTime}</p> <p>Sunset: ${sunsetTime}</p>`;
+  })
+
+fetch('https://api.openweathermap.org/data/2.5/forecast?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447')
+  .then((response) => {
+    return response.json();
+
+  })
+  .then((data) => {
+    const today = new Date();
+
+    // Find the closest noon forecast after the current time
+    const noonForecasts = data.list.filter(forecast => {
+      const forecastTime = new Date(forecast.dt_txt);
+      return forecastTime.getHours() === 12 && forecastTime.getMinutes() === 0 && forecastTime > today;
+    });
+
+    if (noonForecasts.length > 0) {
+      const futureWeatherDiv = document.getElementById('futureWeather');
+      let htmlContent = '';
+
+      // Show the next 4 noon forecasts
+      for (let i = 0; i < Math.min(noonForecasts.length, 4); i++) {
+        const forecast = noonForecasts[i];
+        const forecastDate = new Date(forecast.dt_txt);
+        const formattedDate = forecastDate.toLocaleDateString('en-US', { weekday: 'short' });
+
+        // Get weather icon code
+        const weatherIconCode = forecast.weather[0].icon;
+
+        // Get icon URL based on code or default
+        const iconUrl = weatherIcons[weatherIconCode] || 'https://openweathermap.org/img/wn/unknown.png';
+
+        htmlContent += `<ul>${formattedDate} <img class="s-icon" src="${iconUrl}" alt="${forecast.weather[0].description}">
+          ${forecast.main.temp.toFixed(1)}°C</ul>`;
+      }
+
+      futureWeatherDiv.innerHTML = htmlContent;
+    } else {
+      console.log('No noon forecasts found for the next days');
+    }
+  })
+  .catch((error) => {
+    console.error('Error fetching weather data:', error);
+  });
diff --git a/code/style.css b/code/style.css
@@ -0,0 +1,137 @@
+body {
+  font-family: "Slackside One", cursive;
+  line-height: 1.15;
+  /* 1.5 times the font size */
+  margin: 0;
+  color: rgb(5, 72, 75);
+  background: linear-gradient(to right, #8582b8, #de9f8d);
+}
+
+.hero-image {
+  background-image: url(https://images.unsplash.com/photo-1637150899351-0ce1779710c7?q=80&w=1842&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+  border-radius: 30px;
+}
+
+.the-weather {
+  width: 100%;
+}
+
+.city-weather {
+  width: 80%;
+  padding: 20px 40px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.sun-rise-set {
+  background: rgba(245, 178, 84, 0.329);
+  border-radius: 30px 0 30px 0;
+  max-width: 100%;
+  margin-top: 20px;
+  padding: 10px 38px;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.5;
+  align-items: center;
+}
+
+.future-weather {
+  margin: 0 auto;
+  width: 60%;
+  padding: 20px 40px;
+}
+
+h1 {
+  font-size: 30px;
+  margin: 0 auto;
+  padding-bottom: 8px;
+}
+
+p {
+  font-size: 20px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+ul {
+  font-size: 28px;
+  padding: 0px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.s-icon {
+  max-width: 25%;
+  max-height: 25%;
+}
+
+.l-icon {
+  max-width: 40%;
+  max-height: 40%;
+  margin: 0 auto;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  background: #8582b84d;
+  border-radius: 40px;
+}
+
+@media (min-width: 768px) and (max-width: 1200px) {
+  h1 {
+    font-size: 42px;
+    width: 70%;
+  }
+
+  p {
+    font-size: 30px;
+  }
+
+  ul {
+    font-size: 36px;
+  }
+
+  .s-icon {
+    max-width: 35%;
+    max-height: 35%;
+  }
+
+  .sun-rise-set {
+    width: 55%;
+    margin-top: 20px;
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 50px;
+    width: 70%;
+  }
+
+  p {
+    font-size: 38px;
+  }
+
+  ul {
+    font-size: 44px;
+  }
+
+  .sun-rise-set {
+    width: 45%;
+    margin-top: 20px;
+    flex-direction: row;
+  }
+
+  .s-icon {
+    max-width: 35%;
+    max-height: 35%;
+  }
+}