From f4d7e1d08526dbaf2ec9a02b8710bd465b211d6a Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 10:53:59 +0100 Subject: [PATCH 01/15] thumb photos display in thumbsClass --- assets/main.js | 31 +++++++++++++++++++++++++++++++ index.html | 50 +------------------------------------------------- 2 files changed, 32 insertions(+), 49 deletions(-) create mode 100644 assets/main.js diff --git a/assets/main.js b/assets/main.js new file mode 100644 index 0000000..868e402 --- /dev/null +++ b/assets/main.js @@ -0,0 +1,31 @@ +let descriptionOfWeather = ''; +let searchItem = ""; +let thumbChildren = []; +const photoClass = document.querySelector('.photo'); +const thumbsClass = document.querySelector('.thumbs'); +fetch('http://api.openweathermap.org/data/2.5/weather?q=london&APPID=4357f1e42f31557280f32160d930b53b') +.then(function (response) { + return response.json(); +}) +.then(function (body) { + descriptionOfWeather = body.weather[0].description; + photoRetrieve(descriptionOfWeather); +}); + + + +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) + }) +} + +function photoCreate(results) { + thumbChildren = results.map(element => ``).join(''); + thumbsClass.innerHTML = thumbChildren; +} \ No newline at end of file diff --git a/index.html b/index.html index b1add34..7c1d75e 100644 --- a/index.html +++ b/index.html @@ -1,49 +1 @@ - - - - - - - - - Meteoropolis - - - - - - -
-
-

- Meteor - opolis -

-
- -
- -
-

-

- - on - Unsplash -

-
- -
- -
- -
-
- - - - - + Meteoropolis

Meteor opolis

on Unsplash

\ No newline at end of file From ae0d98ba3c352dd24aeaaf0ab9690277b320568c Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 11:38:10 +0100 Subject: [PATCH 02/15] after clicked to thumb, that photo will appear in photoClass --- assets/main.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/assets/main.js b/assets/main.js index 868e402..d4e4a9e 100644 --- a/assets/main.js +++ b/assets/main.js @@ -26,6 +26,11 @@ function photoRetrieve(descriptionOfWeather) { } function photoCreate(results) { - thumbChildren = results.map(element => ``).join(''); + // console.log(results); + thumbChildren = results.map(element => ``).join(''); thumbsClass.innerHTML = thumbChildren; -} \ No newline at end of file +} + +thumbsClass.addEventListener('click', element => { + photoClass.innerHTML = ``; +}) \ No newline at end of file From 63ae348cb0bc2e942a61a836b74e7da77054461a Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 12:07:15 +0100 Subject: [PATCH 03/15] White border around active thumbnail --- assets/main.js | 11 +++++++---- assets/styles.css | 1 + 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/assets/main.js b/assets/main.js index d4e4a9e..69ec199 100644 --- a/assets/main.js +++ b/assets/main.js @@ -26,11 +26,14 @@ function photoRetrieve(descriptionOfWeather) { } function photoCreate(results) { - // console.log(results); - thumbChildren = results.map(element => ``).join(''); + console.log(results); + thumbChildren = results.map(element => ``).join(''); thumbsClass.innerHTML = thumbChildren; + thumbsClass.children[0].className += ' active'; + photoClass.innerHTML = ``; } -thumbsClass.addEventListener('click', element => { +thumbsClass.addEventListener('click', () => { + thumbsClass.children[0].classList.remove('active'); photoClass.innerHTML = ``; -}) \ No newline at end of file +}); \ No newline at end of file diff --git a/assets/styles.css b/assets/styles.css index 9046ba1..e1bcb34 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; From 7cdb78c761d7db8c56f3a6d6da8585aebbff2bf5 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 12:22:59 +0100 Subject: [PATCH 04/15] Use input field to see weather in other cities --- assets/main.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/assets/main.js b/assets/main.js index 69ec199..b7ef17e 100644 --- a/assets/main.js +++ b/assets/main.js @@ -1,17 +1,32 @@ let descriptionOfWeather = ''; let searchItem = ""; let thumbChildren = []; +let cityName = 'london'; const photoClass = document.querySelector('.photo'); const thumbsClass = document.querySelector('.thumbs'); -fetch('http://api.openweathermap.org/data/2.5/weather?q=london&APPID=4357f1e42f31557280f32160d930b53b') -.then(function (response) { - return response.json(); -}) -.then(function (body) { - descriptionOfWeather = body.weather[0].description; - photoRetrieve(descriptionOfWeather); +const searchClass = document.querySelector('.search'); +const searchInputClass = document.querySelector('.search__input'); + + +searchClass.addEventListener('submit', (e) => { + e.preventDefault(); + cityName = searchInputClass.value; + runFetch(cityName); + searchInputClass.value = ""; }); +function runFetch (cityName) { + fetch(`http://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); + }); +} + +runFetch(cityName); function photoRetrieve(descriptionOfWeather) { From 9e10607730759d6b5bb5d46bcb7da60a8f3cb9b4 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 12:44:26 +0100 Subject: [PATCH 05/15] Display photographer credits in bottom right hand corner with link to their portfolio on Unsplash --- assets/main.js | 8 +++++++- index.html | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/assets/main.js b/assets/main.js index b7ef17e..90cc5f7 100644 --- a/assets/main.js +++ b/assets/main.js @@ -6,6 +6,7 @@ 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'); searchClass.addEventListener('submit', (e) => { @@ -42,13 +43,18 @@ function photoRetrieve(descriptionOfWeather) { function photoCreate(results) { console.log(results); - thumbChildren = results.map(element => ``).join(''); + thumbChildren = results.map(element => ``).join(''); thumbsClass.innerHTML = thumbChildren; thumbsClass.children[0].className += ' active'; photoClass.innerHTML = ``; + creditUserClass.textContent = results[0].user.name; + creditUserClass.setAttribute('href', results[0].user.portfolio_url); } thumbsClass.addEventListener('click', () => { thumbsClass.children[0].classList.remove('active'); photoClass.innerHTML = ``; + console.log(event.target); + creditUserClass.textContent = event.target.dataset.name; + creditUserClass.setAttribute('href', event.target.dataset.portfolio); }); \ No newline at end of file diff --git a/index.html b/index.html index 7c1d75e..41c8d19 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ - Meteoropolis

Meteor opolis

on Unsplash

\ No newline at end of file + Meteoropolis

Meteor opolis

on Unsplash

\ No newline at end of file From d0311730c4487d2c97d11dbb17d80b1405240729 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 12:55:38 +0100 Subject: [PATCH 06/15] Display weather conditions in #conditions --- assets/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/main.js b/assets/main.js index 90cc5f7..ff712a3 100644 --- a/assets/main.js +++ b/assets/main.js @@ -7,6 +7,7 @@ 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'); searchClass.addEventListener('submit', (e) => { @@ -42,19 +43,18 @@ function photoRetrieve(descriptionOfWeather) { } function photoCreate(results) { - console.log(results); thumbChildren = results.map(element => ``).join(''); thumbsClass.innerHTML = thumbChildren; thumbsClass.children[0].className += ' active'; photoClass.innerHTML = ``; creditUserClass.textContent = results[0].user.name; creditUserClass.setAttribute('href', results[0].user.portfolio_url); + conditionsId.textContent = descriptionOfWeather; } thumbsClass.addEventListener('click', () => { thumbsClass.children[0].classList.remove('active'); photoClass.innerHTML = ``; - console.log(event.target); creditUserClass.textContent = event.target.dataset.name; creditUserClass.setAttribute('href', event.target.dataset.portfolio); }); \ No newline at end of file From cda1787f2f4fb101e7ea09903346c6f58ede4979 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 14:05:08 +0100 Subject: [PATCH 07/15] Prevent to not open links in author if there is no url --- assets/main.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/assets/main.js b/assets/main.js index ff712a3..b717c12 100644 --- a/assets/main.js +++ b/assets/main.js @@ -48,7 +48,9 @@ function photoCreate(results) { thumbsClass.children[0].className += ' active'; photoClass.innerHTML = ``; creditUserClass.textContent = results[0].user.name; - creditUserClass.setAttribute('href', results[0].user.portfolio_url); + if (results[0].user.portfolio_url !== 'null') { + creditUserClass.setAttribute('href', results[0].user.portfolio_url); + } conditionsId.textContent = descriptionOfWeather; } @@ -56,5 +58,9 @@ thumbsClass.addEventListener('click', () => { thumbsClass.children[0].classList.remove('active'); photoClass.innerHTML = ``; creditUserClass.textContent = event.target.dataset.name; - creditUserClass.setAttribute('href', event.target.dataset.portfolio); + if (event.target.dataset.portfolio !== "null") { + creditUserClass.setAttribute('href', event.target.dataset.portfolio); + } else { + creditUserClass.setAttribute('href', '#'); + } }); \ No newline at end of file From 9be2fe056ce0f33a1d7331602db73f73e7951217 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 14:25:51 +0100 Subject: [PATCH 08/15] Added current temperature --- assets/main.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/assets/main.js b/assets/main.js index b717c12..9851ba1 100644 --- a/assets/main.js +++ b/assets/main.js @@ -2,6 +2,7 @@ let descriptionOfWeather = ''; let searchItem = ""; let thumbChildren = []; let cityName = 'london'; +let currentTemperature; const photoClass = document.querySelector('.photo'); const thumbsClass = document.querySelector('.thumbs'); const searchClass = document.querySelector('.search'); @@ -25,6 +26,7 @@ function runFetch (cityName) { .then(function (body) { descriptionOfWeather = body.weather[0].description; photoRetrieve(descriptionOfWeather); + currentTemperature = (body.main.temp - 273.15).toFixed(0); }); } @@ -50,8 +52,9 @@ function photoCreate(results) { creditUserClass.textContent = results[0].user.name; if (results[0].user.portfolio_url !== 'null') { creditUserClass.setAttribute('href', results[0].user.portfolio_url); + creditUserClass.setAttribute('target', "_blank"); } - conditionsId.textContent = descriptionOfWeather; + conditionsId.textContent = `${descriptionOfWeather} ${currentTemperature}˚C`; } thumbsClass.addEventListener('click', () => { @@ -60,6 +63,7 @@ thumbsClass.addEventListener('click', () => { 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', '#'); } From 36511ffbfc8ca37abca1d7ce36b3599cf55cabc2 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 14:37:14 +0100 Subject: [PATCH 09/15] white border on thumb saying current selected photo --- assets/main.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/main.js b/assets/main.js index 9851ba1..e465094 100644 --- a/assets/main.js +++ b/assets/main.js @@ -27,6 +27,7 @@ function runFetch (cityName) { descriptionOfWeather = body.weather[0].description; photoRetrieve(descriptionOfWeather); currentTemperature = (body.main.temp - 273.15).toFixed(0); + console.log(body); }); } @@ -54,11 +55,12 @@ function photoCreate(results) { creditUserClass.setAttribute('href', results[0].user.portfolio_url); creditUserClass.setAttribute('target', "_blank"); } - conditionsId.textContent = `${descriptionOfWeather} ${currentTemperature}˚C`; + conditionsId.textContent = `${descriptionOfWeather} ${currentTemperature}˚C in ${cityName}`; } thumbsClass.addEventListener('click', () => { thumbsClass.children[0].classList.remove('active'); + event.target.classList.toggle('.active'); photoClass.innerHTML = ``; creditUserClass.textContent = event.target.dataset.name; if (event.target.dataset.portfolio !== "null") { From 809b11eb4ca92dc20f9cafe55151ef058ce4ed26 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 15:17:04 +0100 Subject: [PATCH 10/15] icon of current weather --- assets/main.js | 6 ++++-- assets/styles.css | 25 +++++++++++++++++++++++-- index.html | 2 +- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/assets/main.js b/assets/main.js index e465094..7b47985 100644 --- a/assets/main.js +++ b/assets/main.js @@ -3,13 +3,14 @@ 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(); @@ -27,7 +28,7 @@ function runFetch (cityName) { descriptionOfWeather = body.weather[0].description; photoRetrieve(descriptionOfWeather); currentTemperature = (body.main.temp - 273.15).toFixed(0); - console.log(body); + weatherIcon = `http://openweathermap.org/img/w/${body.weather[0].icon}.png`; }); } @@ -55,6 +56,7 @@ function photoCreate(results) { creditUserClass.setAttribute('href', results[0].user.portfolio_url); creditUserClass.setAttribute('target', "_blank"); } + weatherIconClass.innerHTML = ``; conditionsId.textContent = `${descriptionOfWeather} ${currentTemperature}˚C in ${cityName}`; } diff --git a/assets/styles.css b/assets/styles.css index e1bcb34..7b18ebb 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -130,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); @@ -142,6 +145,24 @@ margin: 0; } +.info__item__icon { + grid-area: icon; + height: 27px; +} + +.info__item__icon img { + height: 27px; + /*margin-right: 0.5em;*/ +} + +.info__item--conditions { + grid-area: conditions; +} + +.info__item--credits { + grid-area: credits; +} + .info__item > span { color: #aaa; } diff --git a/index.html b/index.html index 41c8d19..29de7d4 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ - Meteoropolis

Meteor opolis

on Unsplash

\ No newline at end of file + Meteoropolis

Meteor opolis

on Unsplash

\ No newline at end of file From 8dd92d4c86fe8fb2bf673236fabdac2f595242d5 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 15:39:18 +0100 Subject: [PATCH 11/15] correction in portfolio link: now links to unsplash website of current author --- assets/main.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/assets/main.js b/assets/main.js index 7b47985..fc9069d 100644 --- a/assets/main.js +++ b/assets/main.js @@ -47,13 +47,14 @@ function photoRetrieve(descriptionOfWeather) { } function photoCreate(results) { - thumbChildren = results.map(element => ``).join(''); + thumbChildren = results.map(element => ``).join(''); thumbsClass.innerHTML = thumbChildren; thumbsClass.children[0].className += ' active'; photoClass.innerHTML = ``; creditUserClass.textContent = results[0].user.name; - if (results[0].user.portfolio_url !== 'null') { - creditUserClass.setAttribute('href', results[0].user.portfolio_url); + console.log(results); + if (results[0].user.links.html !== 'null') { + creditUserClass.setAttribute('href', results[0].user.links.html); creditUserClass.setAttribute('target', "_blank"); } weatherIconClass.innerHTML = ``; From 4cc120bd9993c8f65eb77363a0babc7d20d2292d Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 15:48:51 +0100 Subject: [PATCH 12/15] changes in currentTemerature(the other way ho we round) --- assets/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/main.js b/assets/main.js index fc9069d..38b6020 100644 --- a/assets/main.js +++ b/assets/main.js @@ -27,7 +27,7 @@ function runFetch (cityName) { .then(function (body) { descriptionOfWeather = body.weather[0].description; photoRetrieve(descriptionOfWeather); - currentTemperature = (body.main.temp - 273.15).toFixed(0); + currentTemperature = Math.round(body.main.temp - 273.15); weatherIcon = `http://openweathermap.org/img/w/${body.weather[0].icon}.png`; }); } @@ -52,7 +52,6 @@ function photoCreate(results) { thumbsClass.children[0].className += ' active'; photoClass.innerHTML = ``; creditUserClass.textContent = results[0].user.name; - console.log(results); if (results[0].user.links.html !== 'null') { creditUserClass.setAttribute('href', results[0].user.links.html); creditUserClass.setAttribute('target', "_blank"); From 192b2f3d35e480a13f44145822a6b2da1330b2ac Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 16:22:41 +0100 Subject: [PATCH 13/15] in tablet view, white border staying like in mobile view --- assets/styles.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/styles.css b/assets/styles.css index 7b18ebb..bb7e8be 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -250,8 +250,7 @@ } .controls { - display: flex; - justify-content: space-between; + } .search, From c0e566ee57c8c87db75f8b6733d9315592c002ad Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 16:55:14 +0100 Subject: [PATCH 14/15] fixed white border on desktop view and search bar in desktop view is not anymore stretch --- assets/main.js | 8 +++++--- assets/styles.css | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/assets/main.js b/assets/main.js index 38b6020..1851d3b 100644 --- a/assets/main.js +++ b/assets/main.js @@ -45,11 +45,12 @@ function photoRetrieve(descriptionOfWeather) { 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') { @@ -61,8 +62,8 @@ function photoCreate(results) { } thumbsClass.addEventListener('click', () => { - thumbsClass.children[0].classList.remove('active'); - event.target.classList.toggle('.active'); + previousEventTarget.classList.toggle('active'); + event.target.classList.toggle('active'); photoClass.innerHTML = ``; creditUserClass.textContent = event.target.dataset.name; if (event.target.dataset.portfolio !== "null") { @@ -71,4 +72,5 @@ thumbsClass.addEventListener('click', () => { } else { creditUserClass.setAttribute('href', '#'); } + previousEventTarget = event.target; }); \ No newline at end of file diff --git a/assets/styles.css b/assets/styles.css index bb7e8be..d799d8f 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -152,7 +152,6 @@ .info__item__icon img { height: 27px; - /*margin-right: 0.5em;*/ } .info__item--conditions { @@ -250,7 +249,8 @@ } .controls { - + display: grid; + justify-content: space-around; } .search, From e3d969a3f01b5ff3f8d9f57dadea78071ff25b3d Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Tue, 18 Sep 2018 17:00:11 +0100 Subject: [PATCH 15/15] changed from http to https --- assets/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/main.js b/assets/main.js index 1851d3b..7c402cd 100644 --- a/assets/main.js +++ b/assets/main.js @@ -20,7 +20,7 @@ searchClass.addEventListener('submit', (e) => { }); function runFetch (cityName) { - fetch(`http://api.openweathermap.org/data/2.5/weather?q=${cityName}&APPID=4357f1e42f31557280f32160d930b53b`) + fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&APPID=4357f1e42f31557280f32160d930b53b`) .then(function (response) { return response.json(); })