Technigo · EmmyLJ · Apr 18, 2024 · Apr 24, 2024 · Apr 26, 2024 · Apr 26, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Weather App
+# Weather Appp
 
 Replace this readme with your own information about your project.
 

diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="./style.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat"
+      rel="stylesheet"
+    />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weather app</title>
+  </head>
+  <body>
+    <div id="background-container">
+      <div class="virestadWeather" id="virestadWeather"></div>
+      <div class="sunriseSunset" id="sunriseSunset"></div>
+      <div class="day" id="day"></div>
+      <div class="night" id="night"></div>
+    </div>
+    <div class="forecastContainer" , id="forecastContainer"></div>
+    <script src="./script-new.js"></script>
+  </body>
+</html>
diff --git a/pictures/Group16.png b/pictures/Group16.png
diff --git a/pictures/d.jpg b/pictures/d.jpg
diff --git a/pictures/day.jpg b/pictures/day.jpg
diff --git a/pictures/night.jpg b/pictures/night.jpg
diff --git a/script-new.js b/script-new.js
@@ -0,0 +1,166 @@
+const weatherContainer = document.getElementById("virestadWeather");
+const weatherForecast = document.getElementById("forecast");
+const forecastElement = document.getElementById("forecast");
+const sunriseSunset = document.getElementById("sunriseSunset");
+const dailyWeather = document.getElementById("dailyWeather");
+
+// Where to find the weather data
+const appID = "d1af2f27692b758fb8f71728de60753b";
+const units = "metric";
+const baseURL = "https://api.openweathermap.org/data/2.5/";
+const searchString = (searchTerm, searchCity) => {
+  return `${baseURL}${searchTerm}?q=${searchCity}&units=${units}&APPID=${appID}`;
+};
+
+fetch(searchString("weather", "Virestad, Sweden"))
+  .then((response) => response.json())
+  .then((json) => {
+    let weatherIcon = json.weather[0].icon;
+    let temperature = json.main.temp;
+    let cityName = json.name;
+    let weatherCondition = json.weather[0].description;
+    let sunriseTimestamp = json.sys.sunrise * 1000;
+    let sunsetTimestamp = json.sys.sunset * 1000; // Convert Unix timestamp to milliseconds
+    let feelsLike = json.main.feels_like;
+
+    const sunrise = new Date(sunriseTimestamp);
+    const sunset = new Date(sunsetTimestamp);
+
+    // Determine if it's currently day or night
+    const currentTime = new Date();
+    const isDaytime = currentTime >= sunrise && currentTime <= sunset;
+
+    // Change background based on day or night
+    if (isDaytime) {
+      document.getElementById("background-container").style.backgroundImage =
+        "url('pictures/day.jpg')"; // Daytime background
+    } else {
+      document.getElementById("background-container").style.backgroundImage =
+        "url('pictures/night.jpg')"; // Nighttime background
+    }
+
+    console.log(`city` + cityName);
+    console.log(weatherIcon);
+    console.log(weatherCondition);
+    console.log(`temp` + temperature);
+    console.log(`feels like` + feelsLike);
+    console.log(currentTime);
+
+    weatherContainer.innerHTML = `
+      <h1>${temperature} °C</h1>
+      <p class="city">${cityName}</p>
+      <p>${weatherCondition}</p>
+      <p>Feels like: ${feelsLike} °C</p>
+    `;
+
+    sunriseSunset.innerHTML = `
+      <p>Sunrise ${sunrise.toLocaleTimeString([], {
+        timeStyle: "short",
+      })}</p>
+      <p>Sunset ${sunset.toLocaleTimeString([], { timeStyle: "short" })}</p>
+    `;
+  });
+
+const apiKey = "d1af2f27692b758fb8f71728de60753b";
+const apiUrlFiveDays = `https://api.openweathermap.org/data/2.5/forecast?q=Virestad&units=metric&appid=${apiKey}`;
+
+//Getting the weather forecast for the next five days
+// Calculate the date for the day after today
+const tomorrow = new Date();
+tomorrow.setDate(tomorrow.getDate() + 1);
+
+//Select the container for forecast elements
+const forecastContainer = document.getElementById("forecastContainer");
+
+// Fetching the five-day forecast data
+fetch(searchString("forecast", "Virestad, Sweden"))
+  .then((response) => response.json())
+  .then((json) => {
+    const dailyWeather = json.list;
+    // Create a Set to keep track of unique days
+    const uniqueDays = new Set();
+    // Loop through the daily weather data to create forecast elements
+    dailyWeather.forEach((item) => {
+      const itemDate = new Date(item.dt_txt);
+      // Check if the item date is after tomorrow and forecast count is less than 5
+      if (itemDate > tomorrow && !uniqueDays.has(itemDate.toDateString())) {
+        let dayOfWeek = itemDate.toLocaleDateString("en-US", {
+          weekday: "short",
+        });
+        let dailyTemperature = item.main.temp;
+        let dailyWeatherIcon = item.weather[0].icon;
+
+        // Create and append forecast element
+        createForecastElement(dayOfWeek, dailyTemperature, dailyWeatherIcon);
+
+        // Add the day to the Set of unique days
+        uniqueDays.add(itemDate.toDateString());
+      }
+    });
+  });
+
+//Inside the fetch for weather forecast
+if (Array.isArray(dailyWeather)) {
+  dailyWeather.forEach((item) => {
+    let day = new Date(item.dt_txt);
+    let dayOfWeek = day.toLocaleDateString("en-US", { weekday: "short" });
+    let dailyTemperature = item.main.temp;
+    let dailyWeatherIcon = item.weather[0].icon;
+
+    if (day.toDateString() !== new Date().toDateString()) {
+      //Create and append forecast element
+      createForecastElement(dayOfWeek, dailyTemperature, dailyWeatherIcon);
+    }
+  });
+}
+
+function createForecastElement(dayOfWeek, dailyTemperature, dailyWeatherIcon) {
+  const forecastElement = document.createElement("div");
+  forecastElement.className = "forecast";
+  forecastElement.innerHTML = `
+    <p>${dayOfWeek}</p>
+    <img src="https://openweathermap.org/img/wn/${dailyWeatherIcon}.png" alt="Weather Icon">
+    <p>${dailyTemperature}°C</p>
+  `;
+
+  //Append weather icon to forecast element
+  createIcon(dailyWeatherIcon, forecastElement);
+
+  //Append forecastElement to forecastContainer
+  forecastContainer.appendChild(forecastElement);
+}
+
+// Function to create and append weather icon
+function createIcon(weatherIcon, parentElement) {
+  let base_URL = `https://openweathermap.org/img/wn/`;
+  let iconURL = base_URL + weatherIcon + "@2x.png";
+
+  const iconElement = document.createElement("img");
+  iconElement.src = iconURL;
+  iconElement.alt = "Weather Icon";
+
+  // Append iconElement to specified parentElement
+  parentElement.appendChild(iconElement);
+}
+
+const forecast = (iter, day, dailyTemperature) => {
+  const forecastInfo = document.getElementById(`forecast${iter}`);
+
+  const weekDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  let today = weekDays[date.getDay()];
+  console.log(`today it is `, today);
+};
+//Creating the icon
+//Example of using createIcon function to set src attribute of an img element
+function createIcon(weatherIcon) {
+  let base_URL = `https://openweathermap.org/img/wn/`;
+  let iconURL = base_URL + weatherIcon + "@2x.png";
+
+  const iconElement = document.createElement("img");
+  iconElement.src = iconURL;
+  iconElement.alt = "Weather Icon";
+
+  //Append iconElement wherever needed in the DOM
+  //For example:
+  weatherContainer.appendChild(iconElement);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,145 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  /* border: red solid 1px; */
+}
+
+body {
+  font-family: "Courier New", Courier, monospace;
+  overflow: hidden;
+  height: 100vh;
+  background-color: rgb(133, 150, 129);
+}
+
+#background-container {
+  background-size: cover;
+  background-position: top;
+  overflow: hidden;
+  border-radius: 0% 0% 50% 50%;
+}
+
+.virestadWeather {
+  position: relative;
+  padding-top: 30%;
+  width: 60%;
+  padding-left: 8%;
+  padding-bottom: 5%;
+  color: white;
+}
+
+h1 {
+  font-size: 45px;
+}
+
+.city {
+  font-size: 30px;
+  font-weight: bold;
+}
+p {
+  padding: 1.5%;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+#virestadWeather img {
+  position: absolute;
+  top: 5px;
+  margin-left: 80%;
+  height: 60%;
+  width: 60%;
+  z-index: 3;
+}
+
+.sunriseSunset {
+  padding-left: 15%;
+  display: flex;
+  justify-content: space-between;
+  margin-right: 15%;
+  padding-bottom: 20%;
+  color: white;
+}
+
+.forecastContainer {
+  display: flex;
+  flex-direction: column;
+  padding-top: 5%;
+}
+
+.forecast {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 15%;
+  margin-right: 15%;
+  color: rgb(5, 65, 32);
+}
+
+.forecast p {
+  font-size: 20px;
+}
+
+.forecast img {
+  width: 50px;
+  height: 50px;
+}
+
+@media screen and (min-width: 900px) {
+  #background-container {
+    height: 53%;
+    overflow: hidden;
+    border-radius: 0% 0% 25% 25%;
+  }
+
+  .virestadWeather {
+    position: relative;
+    padding-top: 5%;
+    width: 60%;
+    padding-left: 8%;
+    color: white;
+  }
+
+  #virestadWeather img {
+    position: absolute;
+    top: 15px;
+    margin-left: 80%;
+    height: 60%;
+    width: 60%;
+    z-index: 3;
+  }
+
+  .sunriseSunset {
+    padding-left: 15%;
+    display: flex;
+    justify-content: space-between;
+    margin-right: 15%;
+    padding-bottom: 5%;
+    color: white;
+  }
+
+  p {
+    padding: 1.5%;
+    font-size: 30px;
+    font-weight: bold;
+  }
+
+  .forecast {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 15%;
+    margin-right: 15%;
+    color: rgb(5, 65, 32);
+  }
+
+  .forecast p {
+    font-size: 30px;
+  }
+
+  .forecast img {
+    width: 50px;
+    height: 50px;
+  }
+}