Merge pull request #4 from FredH2O/fredWeather2

features
FredH2O · Aug 6, 2024 · 0f8a760 · 0f8a760
2 parents 6a4ef08 + 7aac896
commit 0f8a760
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 12 deletions.
diff --git a/images/backgroundImg.jpg b/images/backgroundImg.jpg
diff --git a/images/clear.jpg b/images/clear.jpg
diff --git a/images/cloudy.jpg b/images/cloudy.jpg
diff --git a/images/rainy.jpg b/images/rainy.jpg
diff --git a/images/snow.jpg b/images/snow.jpg
diff --git a/images/sunny.jpg b/images/sunny.jpg
diff --git a/index.html b/index.html
@@ -9,16 +9,17 @@
   <body>
     <div class="container">
       <header>
-        <h1>Weather App</h1>
+        <h1>Weather Check</h1>
       </header>
       <main>
         <section class="weather-info">
           <h2 class="location"></h2>
           <div class="weather-details">
             <p class="temperature">
-              Temperature: <span id="temperature"></span>
+              <span id="temperature"></span>
             </p>
             <div class="condition-div"></div>
+            <div class="time-zone"></div>
           </div>
         </section>
         <section class="search">
@@ -29,7 +30,9 @@ <h2 class="location"></h2>
       <footer>
         <p>
           Weather data provided by
-          <a href="https://weatherapi.com" target="_blank">WeatherAPI.com</a>
+          <a href="https://www.weatherapi.com/" target="_blank"
+            >WeatherAPI.com</a
+          >
         </p>
       </footer>
     </div>

diff --git a/script.js b/script.js
@@ -5,17 +5,29 @@ let searchBtn = document.getElementById("search");
 let temperature = document.getElementById("temperature");
 let conditionDiv = document.querySelector(".condition-div");
 let locationHeading = document.querySelector(".location");
+let body = document.querySelector("body");
+let timeZone = document.querySelector(".time-zone");
 
 searchBtn.addEventListener("click", function () {
-  const cityPicked = cityInput.value;
-  fetchWeatherData(cityPicked);
+  const CITY_PICKED = cityInput.value;
+  fetchWeatherData(CITY_PICKED);
+  cityInput.value = "";
+});
+
+cityInput.addEventListener("keydown", function (e) {
+  if (e.key === "Enter") {
+    const CITY_PICKED = cityInput.value;
+    fetchWeatherData(CITY_PICKED);
+    cityInput.value = "";
+  }
 });
 
 async function fetchWeatherData(city) {
-  if (!city) {
-    locationHeading.textContent = "Enter a city or country.";
+  /*if (!city) {
+    alert("Enter a city or country.");
     return;
-  }
+  }*/
+
   const url = `https://weatherapi-com.p.rapidapi.com/current.json?q=${encodeURIComponent(
     city
   )}`;
@@ -44,11 +56,24 @@ async function fetchWeatherData(city) {
       result.current.condition.text,
       result.current.condition.icon
     );
+    timeZoneArea(result.location.tz_id);
   } catch (error) {
     console.error(error);
   }
 }
 
+function timeZoneArea(timeLocale) {
+  const optionsTime = {
+    timeZone: timeLocale,
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true,
+  };
+  const formattedTime = new Intl.DateTimeFormat([], optionsTime);
+  timeZone.textContent = `${formattedTime.format(new Date())}`;
+}
+
 function updateLocation(locationName, countryName) {
   locationHeading.textContent = `${countryName}, ${locationName}`;
 }
@@ -72,11 +97,31 @@ function updateConditionAndIcon(text, icon) {
   ICON_IMG.src = icon;
   ICON_IMG.alt = icon;
 
-  TEXT_CONDITION.textContent = text;
+  TEXT_CONDITION.textContent = `${text}`;
 
   conditionDiv.appendChild(TEXT_CONDITION);
   conditionDiv.appendChild(ICON_IMG);
-}
 
-// Call the async function
-fetchWeatherData();
+  const WEATHER = text.toLowerCase();
+
+  switch (true) {
+    case WEATHER.includes("rain"):
+      body.style.backgroundImage = "url('images/rainy.jpg')";
+      break;
+    case WEATHER.includes("sunny"):
+      body.style.backgroundImage = "url('images/sunny.jpg')";
+      break;
+    case WEATHER.includes("clear"):
+      body.style.backgroundImage = "url('images/clear.jpg')";
+      break;
+    case WEATHER.includes("snow"):
+      body.style.backgroundImage = "url('images/snow.jpg')";
+      break;
+    case WEATHER.includes("cloud") || WEATHER.includes("overcast"):
+      body.style.backgroundImage = "url('images/cloudy.jpg')";
+      break;
+    default:
+      body.style.backgroundImage = "url('images/backgroundImg.jpg')";
+      break;
+  }
+}
diff --git a/styles.css b/styles.css
@@ -14,6 +14,10 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
+  background-image: url("images/backgroundImg.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  transition: 1s ease;
 }
 
 .container {