Technigo · oskarnordin · Mar 17, 2025 · Mar 17, 2025 · Mar 17, 2025 · Mar 17, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,12 @@
-# js-project-weather-app
+# js-project-weather-app
+HeatherWeather is a sleek and responsive weather app built with TypeScript. This app fetches data from the OpenWeather API and features UI with animations that enhance the user experience. It adapts perfectly to different screen sizes for a seamless experience.
+
+Features:
+1. Real-time weather updates: Stay up-to-date with the latest conditions.
+2. 4-day forecast: Plan ahead with daily weather details.
+3. Responsive design: Enjoy a smooth experience across all devices.
+4. CSS animations: Subtle, engaging effects bring the weather to life.
+
+Live Demo
+Check it out here: 
+https://heatherweather.netlify.app/
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/clear.svg b/img/clear.svg
diff --git a/img/cloud.svg b/img/cloud.svg
diff --git a/img/rain.svg b/img/rain.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  >
+  <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>Team Fire 2 Weather App</title>
+  <link
+    rel="stylesheet"
+    href="./style.css"
+  >
+  <script
+    src="https://kit.fontawesome.com/beb1bc6f21.js"
+    crossorigin="anonymous"
+  ></script>
+</head>
+
+<body class="">
+  <header>
+    <h1>Heather Weather</h1>
+  </header>
+  <main>
+
+    <section
+      class=""
+      id="city-card"
+    >
+      <div
+        class="container"
+        id="todaysForecast"
+      >
+        <p><span id="weatherDesc"></span> | <span id="mainTemp"></span></p>
+        <p>sunrise <span id="sunrise"></span></p>
+        <p>sunset <span id="sunset"></span></p>
+      </div>
+      <div
+        class="container"
+        id="weatherIcon"
+      >
+
+      </div>
+      <div class="container">
+        <h2 id="weatherMain"><span id="cityName"></span></h2>
+      </div>
+      <div id="nextCity"><i class="fa-solid fa-chevron-right"></i></div>
+
+      <div class="container">
+        <ul id="weekForecast">
+        </ul>
+      </div>
+
+      <form
+        class="container"
+        id="searchBar"
+      >
+        <input
+          type="text"
+          placeholder="Type a city..."
+          id="searchInput"
+        >
+        <button
+          type="button"
+          id="inputBtn"
+        >Search</button>
+      </form>
+
+    </section>
+
+
+  </main>
+  <footer class="">
+    <p>Created by: Oskar, Sofia, Sofie & Varia</p>
+    <a href="https://github.com/oskarnordin/js-project-weather-app"><i class="fa-brands fa-github"></i></a>
+  </footer>
+
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,201 @@
+
+//API URL
+const defaultURL = "https://api.openweathermap.org/data/2.5/forecast?lat=59.334591&lon=18.063240&appid=15a1790288c26c9ab80c3b6f2209e071"; //Default Stockholm
+const parURL = "https://api.openweathermap.org/data/2.5/forecast?lat=48.85341&lon=2.3488&appid=15a1790288c26c9ab80c3b6f2209e071"; // Paris
+const barURL = "https://api.openweathermap.org/data/2.5/forecast?lat=41.38879&lon=2.15899&appid=15a1790288c26c9ab80c3b6f2209e071"; // Barcelona
+
+//DOM Elements
+const cityName = document.getElementById("cityName");
+const weatherDesc = document.getElementById("weatherDesc");
+const sunrise = document.getElementById("sunrise");
+const mainTemp = document.getElementById("mainTemp");
+const weatherIcon = document.getElementById("weatherIcon");
+const searchButton = document.getElementById("inputBtn");
+const weatherMain = document.getElementById("weatherMain");
+const nextCity = document.getElementById("nextCity");
+let fetchedData = [];
+
+//Fetch API data
+const fetchData = async (url) => {
+  try {
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error(`Status ${response.status}`);
+    }
+    const data = await response.json();
+    fetchedData = [data];  // Wrap the response in an array
+
+    updateCity();
+    fetchForecastData(url); // Fetch forecast data after fetching main weather data
+  }
+  catch (error) {
+    alert("There was an error, please try again later: " + error);
+    console.error("Error fetching data:", error);
+  }
+};
+
+//Fetch Forecast data
+const fetchForecastData = async (url) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`HTPP errror! Status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (!data.list || data.list.length === 0) {
+        throw new Error("Forecast data is empty or undefined");
+      }
+      //filterr out for clsoest to 12:00
+      fetchedData.forecast = data.list
+        .filter(item => {
+          const date = new Date(item.dt * 1000);
+          const hours = date.getUTCHours();
+          return hours === 12;
+        })
+        .slice(0, 4) //for 4 days only
+        .map(item => {
+          return {
+            date: new Date(item.dt * 1000).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+            temp: Math.round(item.main.temp - 273.15), //from Kelevin to Celsius
+            description: item.weather[0].description,
+            icon: item.weather[0].icon
+          };
+        });
+      updateForecast();
+    } catch (error) {
+      console.error("Errrror fetching forecast data:", error);
+      alert("There was an error, please try again later: " + error.message);
+    }
+  };
+  const updateForecast = () => {
+    const forecastContainer = document.getElementById("weekForecast");
+    forecastContainer.innerHTML = ``;
+    fetchedData.forecast.forEach((day) => {
+      const listItem = document.createElement("li");
+      const iconCode = day.icon;
+              const iconUrl = `https://openweathermap.org/img/wn/${iconCode}.png`;
+      listItem.innerHTML = `<span>${day.date}</span> <span>${day.temp}°C</span> <img src="${iconUrl}" alt="${day.description} icon"> <span>${day.description}</span>`;
+      forecastContainer.appendChild(listItem);
+    });
+  };
+
+//Time conversion
+const timeConversion = () => {
+  const timestamps = {
+    sunrise: fetchedData[0].city.sunrise,
+    sunset: fetchedData[0].city.sunset,    
+  };
+  const timezone = fetchedData[0].city.timezone;
+
+  Object.entries(timestamps).forEach(([key, value]) => { 
+    const date = new Date((value + timezone) * 1000);    
+    const hours = date.getUTCHours().toString().padStart(2, '0');
+    const minutes = date.getUTCMinutes().toString().padStart(2, '0');  
+
+    // Update the respective HTML elements
+    const element = document.getElementById(key);
+    if (element) {
+      element.innerHTML = `${hours}:${minutes}`;
+    }
+    else {
+      console.warn(`Element with id '${key}' not found in the DOM.`);
+      alert("There was an error, please try again later");
+    }   
+  });
+};
+
+//Update City
+const updateCity = () => {
+  if (fetchedData[0].city && fetchedData[0].city.name) {
+    cityName.innerHTML = fetchedData[0].city.name;
+    weatherDesc.innerHTML = fetchedData[0].list[0].weather[0].description;
+    updateWeather();
+    timeConversion();
+    updateMainTemp();
+  }
+  else {
+    console.error("City data is missing in fetchedData", fetchedData);
+  }
+};
+
+//Update Weather
+const updateWeather = () => {
+  document.body.className = '';
+  if (fetchedData[0].list[0].weather[0].main === "Clear") {
+    document.body.classList.add("clear");
+    weatherMain.innerHTML = `Get your sunnies on. ${fetchedData[0].city.name} is looking great today.`;
+    weatherIcon.innerHTML = `<img
+          src="./img/clear.svg"
+          alt="Sunglasses for clear weather"
+          class="weatherIcon weatherIconClear"
+        >`;
+  }
+  else if (fetchedData[0].list[0].weather[0].main === "Clouds") {
+    document.body.classList.add("cloud");
+    weatherMain.innerHTML = `It's sweater weather in ${fetchedData[0].city.name} today. Get cosy!`;
+    weatherIcon.innerHTML = `<i class="fa-solid fa-cloud weatherIcon weatherIconCloud"></i>`;
+  } else if (fetchedData[0].list[0].weather[0].main === "Snow") {
+    document.body.classList.add("snow")
+    weatherMain.innerHTML = `It's snowing in ${fetchedData[0].city.name} today. Grab your sled!`
+    weatherIcon.innerHTML = `<i class="fa-solid fa-snowflake weatherIcon weatherIconSnow"></i>`
+  } else if (fetchedData[0].list[0].weather[0].main === "Rain") {
+    document.body.classList.add("rain");
+    weatherMain.innerHTML = `Don't forget your umbrella. It's wet in ${fetchedData[0].city.name} today.`;
+    weatherIcon.innerHTML = `<img
+          src="./img/rain.svg"
+          alt="An umbrella for rainy weather"
+          class="weatherIcon weatherIconRain"
+        >`;
+  } else {
+    document.body.classList.add("");
+  }
+};
+
+//Update Main Temperature
+const updateMainTemp = () => {
+  if (fetchedData[0].list[0].main.temp) {
+    const tempInCelsius = fetchedData[0].list[0].main.temp - 273.15;
+    mainTemp.innerHTML = tempInCelsius.toFixed(0) + "°C";
+  }
+  else {
+    console.error("Main temperature is missing in fetchedData", fetchedData);
+  }
+};
+
+//Search City
+const searchCity = () => {
+  const inputElement = document.getElementById("searchInput");
+  if (!inputElement) {
+    alert("Search input element not found in the DOM");
+    return;
+  }
+  const input = inputElement.value;
+  if (input.trim() === "") {
+    alert("Please enter a city name");
+    return;
+  }
+  let searchURL = `https://api.openweathermap.org/data/2.5/forecast?q=${input}&appid=15a1790288c26c9ab80c3b6f2209e071`;
+  fetchData(searchURL);
+
+  // This clears the input field after the search
+  document.getElementById("searchInput").value = ""
+};
+
+//Event Listeners
+searchButton.addEventListener("click", searchCity);
+const nextCityClick = () => {
+  if (fetchedData[0].city.name === "Stockholm") {
+    fetchData(parURL);
+  }
+  else if (fetchedData[0].city.name === "Paris") {
+    fetchData(barURL);
+  }
+  else {
+    fetchData(defaultURL);
+  }
+};
+nextCity.addEventListener("click", nextCityClick);
+
+//Initial fetch
+fetchData(defaultURL);