London 10 Maksim Lukianenko JS-Core-3-Challenges weather-dom-app

challenge-weather-app/assets/styles.css

@@ -33,12 +33,11 @@
 ------------------------------------------------------------------------------*/
 .photo {
   display: grid;
-  justify-content: center;
+
   align-content: center;
 
   overflow: hidden;
   position: relative;
-  margin: 20px 0;
 }
 
 .photo::before {
@@ -86,8 +85,9 @@
 
   overflow-x: auto;
   overflow-y: hidden;
-  height: var(--thumbs-h);
-  padding: var(--thumbs-py) 0;
+  /* height: var(--thumbs-h);
+  padding: var(--thumbs-py) 0; */
+  height: 100px;
   background: rgba(0, 0, 0, 0.25);
 }
 
@@ -162,6 +162,14 @@
   background: rgba(255, 255, 255, 0.25);
 }
 
+.control__wrap {
+  text-align: center;
+}
+
+.control__wrap p {
+  color: red;
+}
+
 .search,
 .search__input,
 .btn {
@@ -229,7 +237,7 @@
 
   .controls {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
   }
 
   .search,

challenge-weather-app/index.html

@@ -35,14 +35,17 @@ <h1 class="title">
     <div class="thumbs" id="thumbs"></div>
 
     <div class="controls">
-      <form class="search" id="search">
-        <label class="search__label" for="search-tf">City</label>
-        <input class="search__input" id="search-tf" name="city" placeholder="Enter city name" autocomplete="city" />
-        <button class="btn search__btn">Go</button>
-      </form>
+      <div class="control__wrap">
+        <p class="error" style="display: none">Incorrect city name</p>
+        <form class="search" id="search">
+          <label class="search__label" for="search-tf">City</label>
+          <input class="search__input" id="search-tf" name="city" pattern="[a-zA-Z]+" required placeholder="Enter city name" autocomplete="on" />
+          <button class="btn search__btn">Go</button>
+        </form>
+      </div>
     </div>
   </main>
-
+<script src="main.js" ></script>
   <!-- JS goes here -->
 </body>
 

challenge-weather-app/main.js

@@ -0,0 +1,99 @@
+// Get DOM elements
+const searchInput = document.querySelector('#search-tf');
+const searchBtn = document.querySelector('.search__btn');
+const photoContainer = document.getElementById('photo');
+const thumbsContainer = document.getElementById('thumbs');
+const errorMsg = document.querySelector('.error');
+const conditionInfo = document.getElementById('conditions');
+
+// Assign global variables
+let city = '';
+let photoArr = [];
+
+const fetchCoordinates = async () => {
+    try {
+        console.log(city);
+        const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=f86cd0cfb3e6e12fef2e08f796a5d650`;
+        const response = await fetch(url);
+        if (response.ok) {
+            errorMsg.style.display = "none";
+            const report = await response.json();
+            getDescription(report);
+          } else {
+            errorMsg.style.display = "";
+            throw new Error('Incorrect city name');
+          }
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+const getDescription = (data) => {
+    const { weather: [{ description }] } = data;
+    conditionInfo.textContent = description;
+    retrievePhoto(description);
+}
+
+const retrievePhoto = async (query) => {
+    console.log(query);
+    try {
+        const link = `https://api.unsplash.com/search/photos?page=1&query=${query}&sorientation=landscape`;
+        const response = await fetch(link, {
+            headers: {
+                'Authorization': 'Client-ID Otb34uNCclg2M5AtjX8DlC-i-llRWaOsLJI45KOJtA8'
+            }
+        });
+        const data = await response.json();
+        const { results } = data;
+        photoArr = results;
+        displayPhotos();
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+const displayPhotos = () => {
+    console.log(photoArr);
+    const result = photoArr.reduce((acc, { id, urls: { thumb }}) => {
+        const photo = `
+        <img class="thumb" id="${id}" src="${thumb}" alt="">`;
+        return acc + photo;
+    }, '')
+    thumbsContainer.innerHTML = result;
+}
+
+const displaySelectedPhoto = (selectedPhoto) => {
+    console.log(selectedPhoto);
+    const photo = photoArr.find(({ id }) => id === selectedPhoto)
+    const { urls : { regular }} = photo;
+    photoContainer.innerHTML = ` <img src="${regular}" alt="">`
+}
+
+const renderActiveThumb = (activeId) => {
+    const array = document.querySelectorAll('.thumb');
+    array.forEach((elem) => {
+        if (elem.id !== activeId) {
+            elem.classList.remove('active');
+        }
+    })  
+}
+
+// List of event listeners
+searchBtn.addEventListener('click', (event) => {
+    event.preventDefault();
+    var regex = /^[a-zA-Z ]+$/;
+    if (searchInput.value !== '' 
+    && regex.test(searchInput.value)
+    && searchInput.value !== city) {
+        city = searchInput.value.trim();
+        fetchCoordinates();
+    }
+});
+
+thumbsContainer.addEventListener('click', (event) => {
+    if (event.target.tagName === 'IMG') {
+        event.target.classList.add('active')
+        renderActiveThumb(event.target.id);
+       displaySelectedPhoto(event.target.id);
+    }
+})