diff --git a/assets/main.js b/assets/main.js
new file mode 100644
index 0000000..7c402cd
--- /dev/null
+++ b/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 => `
`).join('');
+ thumbsClass.innerHTML = thumbChildren;
+ thumbsClass.children[0].className += ' active';
+ previousEventTarget = thumbsClass.children[0];
+ photoClass.innerHTML = `
`;
+ 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 = `
`;
+ conditionsId.textContent = `${descriptionOfWeather} ${currentTemperature}˚C in ${cityName}`;
+}
+
+thumbsClass.addEventListener('click', () => {
+ previousEventTarget.classList.toggle('active');
+ event.target.classList.toggle('active');
+ photoClass.innerHTML = `
`;
+ 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;
+});
\ No newline at end of file
diff --git a/assets/styles.css b/assets/styles.css
index 9046ba1..d799d8f 100644
--- a/assets/styles.css
+++ b/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,
diff --git a/index.html b/index.html
index b1add34..29de7d4 100644
--- a/index.html
+++ b/index.html
@@ -1,49 +1 @@
-
-
-
-
-
-
-
-
- Meteoropolis
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Meteoropolis
\ No newline at end of file