metropolis weather mini-app - done by Mariusz Sygnowski and Yel Christensen

assets/main.js

@@ -0,0 +1,76 @@
+let descriptionOfWeather = '';
+let searchItem = "";
+let thumbChildren = [];
+let cityName = 'london';
+let currentTemperature;
+let weatherIcon;
+const photoClass = document.querySelector('.photo');
+const thumbsClass = document.querySelector('.thumbs');
+const searchClass = document.querySelector('.search');
+const searchInputClass = document.querySelector('.search__input');
+const creditUserClass = document.querySelector('#credit-user');
+const conditionsId = document.querySelector('#conditions');
+const weatherIconClass = document.querySelector('.info__item__icon');
+
+searchClass.addEventListener('submit', (e) => {
+    e.preventDefault();
+    cityName = searchInputClass.value;
+    runFetch(cityName);
+    searchInputClass.value = "";
+});
+
+function runFetch (cityName) {
+    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&APPID=4357f1e42f31557280f32160d930b53b`)
+        .then(function (response) {
+            return response.json();
+        })
+        .then(function (body) {
+            descriptionOfWeather = body.weather[0].description;
+            photoRetrieve(descriptionOfWeather);
+            currentTemperature = Math.round(body.main.temp - 273.15);
+            weatherIcon = `http://openweathermap.org/img/w/${body.weather[0].icon}.png`;
+        });
+}
+
+runFetch(cityName);
+
+
+function photoRetrieve(descriptionOfWeather) {
+    searchItem = descriptionOfWeather;
+    fetch(`https://api.unsplash.com/search/photos?query=${searchItem}&client_id=6a4f4e5b8174d85cf0999bc9ae0e6fbd6e377e0e8d97cf30b63de811b03a4c89`)
+        .then(function (response) {
+            return response.json();
+        })
+        .then(function (body) {
+            photoCreate(body.results)
+        })
+}
+let previousEventTarget;
+function photoCreate(results) {
+    thumbChildren  = results.map(element => `<img class="thumbs__link thumb" data-name="${element.user.name}" data-portfolio="${element.user.links.html}" data-fullPhoto="${element.urls.full}" src=${element.urls.thumb}/>`).join('');
+    thumbsClass.innerHTML = thumbChildren;
+    thumbsClass.children[0].className += ' active';
+    previousEventTarget = thumbsClass.children[0];
+    photoClass.innerHTML = `<img src=${results[0].urls.full}/>`;
+    creditUserClass.textContent = results[0].user.name;
+    if (results[0].user.links.html !==  'null') {
+        creditUserClass.setAttribute('href', results[0].user.links.html);
+        creditUserClass.setAttribute('target', "_blank");
+    }
+    weatherIconClass.innerHTML = `<img src='${weatherIcon}'/>`;
+    conditionsId.textContent = `${descriptionOfWeather} ${currentTemperature}˚C in ${cityName}`;
+}
+
+thumbsClass.addEventListener('click', () => {
+    previousEventTarget.classList.toggle('active');
+    event.target.classList.toggle('active');
+    photoClass.innerHTML = `<img src=${event.target.dataset.fullphoto}/>`;
+    creditUserClass.textContent = event.target.dataset.name;
+    if (event.target.dataset.portfolio !== "null") {
+        creditUserClass.setAttribute('href', event.target.dataset.portfolio);
+        creditUserClass.setAttribute('target', "_blank");
+    } else {
+        creditUserClass.setAttribute('href', '#');
+    }
+    previousEventTarget = event.target;
+});

assets/styles.css

@@ -91,6 +91,7 @@
   background: rgba(0, 0, 0, 0.25);
 }
 
+
 .thumbs__link {
   flex: 0 0 auto;
 
@@ -129,8 +130,11 @@
 /* Credits
 ------------------------------------------------------------------------------*/
 .info {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas: 'icon conditions credits';
+  grid-template-columns: min-content 1fr max-content;
+  align-items: center;
+  grid-gap: 0.5em;
 
   padding: 5px 10px;
   background: rgba(0, 0, 0, 0.5);
@@ -141,6 +145,23 @@
   margin: 0;
 }
 
+.info__item__icon {
+  grid-area: icon;
+  height: 27px;
+}
+
+.info__item__icon img {
+  height: 27px;
+}
+
+.info__item--conditions {
+  grid-area: conditions;
+}
+
+.info__item--credits {
+  grid-area: credits;
+}
+
 .info__item > span {
   color: #aaa;
 }
@@ -228,8 +249,8 @@
   }
 
   .controls {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    justify-content: space-around;
   }
 
   .search,

index.html

@@ -1,49 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-  <title>Meteoropolis</title>
-  <link rel="stylesheet" href="assets/globals.css">
-  <link rel="stylesheet" href="assets/styles.css">
-</head>
-
-<body>
-  <!-- Structure -->
-  <main class="content">
-    <header class="header">
-      <h1 class="title">
-        <i>Meteor</i>
-        <i>opolis</i>
-      </h1>
-    </header>
-
-    <figure class="photo" id="photo"></figure>
-
-    <div class="info">
-      <p class="info__item info__item--conditions" id="conditions"></p>
-      <p class="info__item info__item--credits">
-        <a href="#" id="credit-user"></a>
-        <span>on</span>
-        <a href="#" id="credit-platform">Unsplash</a>
-      </p>
-    </div>
-
-    <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>
-  </main>
-
-  <!-- JS goes here -->
-</body>
-
-</html>
+<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Meteoropolis</title>    <link rel="stylesheet" href="assets/globals.css">    <link rel="stylesheet" href="assets/styles.css"></head><body><!-- Structure --><main class="content">    <header class="header">        <h1 class="title">            <i>Meteor</i>            <i>opolis</i>        </h1>    </header>    <figure class="photo" id="photo"></figure>    <div class="info">        <p class="info__item info__item__icon"></p>        <p class="info__item info__item--conditions" id="conditions"></p>        <p class="info__item info__item--credits">            <a href="#" id="credit-user"></a>            <span>on</span>            <a href="https://unsplash.com" id="credit-platform">Unsplash</a>        </p>    </div>    <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></main><script src="assets/main.js"></script></body></html>