CodeYourFuture · fowobi · May 14, 2023 · May 16, 2023 · Jun 24, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/challenge-weather-app/assets/styles.css b/challenge-weather-app/assets/styles.css
@@ -1,4 +1,4 @@
-.content {
+ .content {
   display: grid;
   grid-template-rows: auto 1fr auto auto auto;
 
@@ -123,12 +123,12 @@
   margin: 0 1px;
   opacity: 0;
   background: rgba(0, 0, 0, 0.5);
-}
+} 
 
 
 /* Credits
 ------------------------------------------------------------------------------*/
-.info {
+ .info {
   display: flex;
   justify-content: space-between;
 
@@ -153,11 +153,11 @@
   font-weight: 300;
   text-transform: uppercase;
   letter-spacing: 2px;
-}
+} 
 
 /* Controls
 ------------------------------------------------------------------------------*/
-.controls {
+ .controls {
   padding: 5px 10px;
   background: rgba(255, 255, 255, 0.25);
 }
@@ -213,12 +213,12 @@
   text-transform: uppercase;
   background: #666;
   color: #fff;
-}
+} 
 
 /*----------------------------------------------------------------------------*/
 /* Mediaquery overrides                                                       */
 /*----------------------------------------------------------------------------*/
-@media (min-width: 768px) {
+ @media (min-width: 768px) {
   .title {
     font-weight: 100;
   }
@@ -235,5 +235,5 @@
   .search,
   .controls__btn {
     font-size: inherit;
-  }
-}
+  } 
+} 
diff --git a/challenge-weather-app/index.html b/challenge-weather-app/index.html
@@ -9,6 +9,7 @@
   <title>Meteoropolis</title>
   <link rel="stylesheet" href="assets/globals.css">
   <link rel="stylesheet" href="assets/styles.css">
+  <!-- <link rel="stylesheet" href="style.css"> -->
 </head>
 
 <body>
@@ -43,7 +44,7 @@ <h1 class="title">
     </div>
   </main>
 
-  <!-- JS goes here -->
+  <script src="./script.js"></script>
 </body>
 
 </html>
diff --git a/challenge-weather-app/script.js b/challenge-weather-app/script.js
@@ -0,0 +1,100 @@
+//  API keys and base URLs-Code
+const weatherAPIKey =
+  "4049c016776275cd6c7ecfb5c50961fa";
+const unsplashAccessKey =
+  "https://api.unsplash.com/search/photos?query=snow&client_id=l9KNERJAbBOq_Uy7NjwLsd4sYA0c9ZBdWDIItQrpshY";
+const weatherBaseURL = "https://api.openweathermap.org/data/2.5/weather?q=";
+const unsplashBaseURL = "https://api.unsplash.com/search/photos";
+
+// Select DOM elements-Code
+const photoElement = document.getElementById("photo");
+const conditionsElement = document.getElementById("conditions");
+const creditUserElement = document.getElementById("credit-user");
+const creditPlatformElement = document.getElementById("credit-platform");
+const thumbsElement = document.getElementById("thumbs");
+const searchForm = document.getElementById("search");
+
+// Function to fetch weather data from OpenWeatherMap API-Code
+const fetchWeatherData = async (city) => {
+  try {
+    const url = `${weatherBaseURL}${city}&APPID=${weatherAPIKey}`;
+    const response = await fetch(url);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching weather data:", error);
+  }
+};
+
+// Function to fetch image data from Unsplash API-code
+const fetchImageData = async (query) => {
+  try {
+    const url = `${unsplashBaseURL}?query=${query}&client_id=${unsplashAccessKey}`;
+    const response = await fetch(url);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching image data:", error);
+  }
+};
+
+// Function to display main photo and thumbnails-code
+const displayPhotos = (mainPhoto, thumbnails) => {
+  photoElement.style.backgroundImage = `url(${mainPhoto})`;
+  thumbsElement.innerHTML = thumbnails
+    .map(
+      (thumbnail) => `<img class="thumb" src="${thumbnail}" alt="Thumbnail" />`
+    )
+    .join(" ");
+};
+
+// Function to update UI with weather data and images-code
+
+const updateUI = async (city) => {
+  try {
+    const weatherData = await fetchWeatherData(city);
+
+    if (weatherData && weatherData.weather && weatherData.weather.length > 0) {
+      const weatherDescription = weatherData.weather[0].description;
+      const imageData = await fetchImageData(weatherDescription);
+
+      // Display weather conditions-code
+      conditionsElement.textContent = weatherDescription;
+
+      // Display image data-code
+      if (imageData && imageData.results && imageData.results.length > 0) {
+        const mainPhoto = imageData.results[0].urls.regular;
+        const thumbnails = imageData.results.map((result) => result.urls.thumb);
+        const creditUser = imageData.results[0].user.name;
+        const creditLink = imageData.results[0].user.links.html;
+        creditUserElement.textContent = creditUser;
+        creditUserElement.href = creditLink;
+        creditPlatformElement.href = "https://unsplash.com";
+
+        // Display-photos-code
+        displayPhotos(mainPhoto, thumbnails);
+      } else {
+        console.error("Error: No image data found");
+      }
+    } else {
+      console.error("Error: No weather data found");
+    }
+  } catch (error) {
+    console.error("Error updating UI:", error);
+  }
+};
+
+// Event listener for form submission code
+searchForm.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const city = e.target.elements.city.value;
+  if (city) {
+    updateUI(city);
+  } else {
+    console.error("Error: Please enter a city name");
+  }
+  // Clear the input field after submission
+  e.target.elements.city.value = " ";
+});
+
+updateUI("London");