From 82dfb2cb92607aa88f6b19836b13a438e295fb2e Mon Sep 17 00:00:00 2001 From: Ralph Date: Wed, 13 Jun 2018 10:51:18 +0100 Subject: [PATCH 01/10] Retrieve weather for a single day --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 664d55a..f03496a 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,8 @@

-
+
+

@@ -44,6 +45,7 @@

+ \ No newline at end of file From 8400161a941809d95031bb42180effa2d4d78610 Mon Sep 17 00:00:00 2001 From: Ralph Date: Wed, 13 Jun 2018 10:51:18 +0100 Subject: [PATCH 02/10] Retrieve weather for a single day --- assets/index.js | 31 +++++++++++++++++++++++++++++++ index.html | 4 +++- 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 assets/index.js diff --git a/assets/index.js b/assets/index.js new file mode 100644 index 0000000..ae89396 --- /dev/null +++ b/assets/index.js @@ -0,0 +1,31 @@ +const weatherAPIKey = "4afe87cd7eddc53b1473c2bc0ddb2e37"; +const unsplashAPIKey = + "17de354439973eb34b4aae66cb3c27ceea000efc05a8c6c94da17edac9cd3a7b"; +const form = document.querySelector("#search"); + +function createRequest(service, request) { + return service === "weather" + ? `http://api.openweathermap.org/data/2.5/weather?q=${request}&APPID=${weatherAPIKey}` + : `https://api.unsplash.com/search/photos?query=${request}&client_id=${unsplashAPIKey}`; +} + +// api.openweathermap.org/data/2.5/weather?q=$london&APPID=4afe87cd7eddc53b1473c2bc0ddb2e37 + +http: function submitForm(e) { + const input = form.querySelector("#search-tf"); + const conditions = document.querySelector("#conditions"); + + e.preventDefault(); + fetch(createRequest("weather", input.value)) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + conditions.textContent = data.weather[0].description; + }) + .catch(function(error) { + console.log(error); + }); +} + +form.addEventListener("submit", submitForm); diff --git a/index.html b/index.html index 664d55a..f03496a 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,8 @@

-
+
+

@@ -44,6 +45,7 @@

+ \ No newline at end of file From a0ce2f214d18f6f1b2becfc41e574a8143ae1716 Mon Sep 17 00:00:00 2001 From: Ralph Date: Wed, 13 Jun 2018 11:18:00 +0100 Subject: [PATCH 03/10] second api call made to unsplash but no images showing --- assets/index.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/assets/index.js b/assets/index.js index ae89396..7f58dc5 100644 --- a/assets/index.js +++ b/assets/index.js @@ -17,11 +17,18 @@ http: function submitForm(e) { e.preventDefault(); fetch(createRequest("weather", input.value)) - .then(function(response) { - return response.json(); + .then(function(weatherResponse) { + return weatherResponse.json(); }) - .then(function(data) { - conditions.textContent = data.weather[0].description; + .then(function(weatherData) { + conditions.textContent = weatherData.weather[0].description; + return fetch(createRequest("unsplash", conditions.textContent)); + }) + .then(function(imageResponse) { + return imageResponse.json(); + }) + .then(function(imageData) { + console.log(imageData); }) .catch(function(error) { console.log(error); From 58c804ca8f39a3a3b6ace14de8f050da8932a4f3 Mon Sep 17 00:00:00 2001 From: Ralph Date: Wed, 13 Jun 2018 14:18:38 +0100 Subject: [PATCH 04/10] Added thumbs list --- assets/globals.css | 2 +- assets/index.js | 39 ++++++++++++++++++++++++++++++++++----- assets/styles.css | 21 +++++++++++++++++---- 3 files changed, 52 insertions(+), 10 deletions(-) diff --git a/assets/globals.css b/assets/globals.css index c9742ea..778c77e 100644 --- a/assets/globals.css +++ b/assets/globals.css @@ -43,4 +43,4 @@ body { a { color: inherit; text-decoration: none; -} \ No newline at end of file +} diff --git a/assets/index.js b/assets/index.js index 7f58dc5..352bcee 100644 --- a/assets/index.js +++ b/assets/index.js @@ -2,6 +2,10 @@ const weatherAPIKey = "4afe87cd7eddc53b1473c2bc0ddb2e37"; const unsplashAPIKey = "17de354439973eb34b4aae66cb3c27ceea000efc05a8c6c94da17edac9cd3a7b"; const form = document.querySelector("#search"); +const mainImage = document.querySelector("#photo"); +const thumbnails = document.querySelector("#thumbs"); +const input = form.querySelector("#search-tf"); +const conditions = document.querySelector("#conditions"); function createRequest(service, request) { return service === "weather" @@ -10,11 +14,35 @@ function createRequest(service, request) { } // api.openweathermap.org/data/2.5/weather?q=$london&APPID=4afe87cd7eddc53b1473c2bc0ddb2e37 +function displayImage(imageData, size, numToShow) { + const imageArr = imageData.results; + let html = ""; + if (numToShow) { + for (let i = 0; i < numToShow; i += 1) { + html += ` + + `; + } + } else { + let markup = imageArr + .map((item, index) => { + return ` +
  • + + + +
    • + `; + }) + .join(""); + html = `
      ${markup}
    `; + } + return html; +} -http: function submitForm(e) { - const input = form.querySelector("#search-tf"); - const conditions = document.querySelector("#conditions"); - +function submitForm(e) { e.preventDefault(); fetch(createRequest("weather", input.value)) .then(function(weatherResponse) { @@ -28,7 +56,8 @@ http: function submitForm(e) { return imageResponse.json(); }) .then(function(imageData) { - console.log(imageData); + mainImage.innerHTML = displayImage(imageData, "full", 1); + thumbnails.innerHTML = displayImage(imageData, "thumb"); }) .catch(function(error) { console.log(error); diff --git a/assets/styles.css b/assets/styles.css index a2bc26b..24941c2 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -78,9 +78,9 @@ /* Thumbs ------------------------------------------------------------------------------*/ -.thumbs { +.thumbs ul { display: flex; - + list-style-type: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; @@ -91,9 +91,17 @@ background: rgba(0, 0, 0, 0.25); } +.thumbs ul li { + overflow: hidden; +} + +.thumbs ul li:hover { + cursor: pointer; +} + .thumbs__link { flex: 0 0 auto; - + display: block; animation: 0.25s forwards fade-in; width: var(--thumb-w); @@ -103,6 +111,11 @@ background: rgba(0, 0, 0, 0.5); } +.thumbs__link img { + width: 100%; + max-width: 100%; +} + .thumbs__link.active, .thumbs__link:hover, .thumbs__link:focus { @@ -218,7 +231,7 @@ font-weight: 100; } - .thumbs { + .thumbs ul { justify-content: center; } From c3545d4e3f7c2ab5e0c8d2e17d2581b84b533b5f Mon Sep 17 00:00:00 2001 From: Ralph Date: Wed, 13 Jun 2018 15:11:55 +0100 Subject: [PATCH 05/10] Added clickable thumbnails to show main image --- assets/index.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/assets/index.js b/assets/index.js index 352bcee..9db5d00 100644 --- a/assets/index.js +++ b/assets/index.js @@ -28,10 +28,12 @@ function displayImage(imageData, size, numToShow) { .map((item, index) => { return `
  • - - +
    • `; @@ -64,4 +66,14 @@ function submitForm(e) { }); } +function thumbToMain(e) { + e.preventDefault(); + console.log(e.target); + if (e.target.className === "thumbs__image") { + const fullImg = mainImage.querySelector("img"); + return (fullImg.src = e.target.parentNode.getAttribute("href")); + } +} + form.addEventListener("submit", submitForm); +thumbnails.addEventListener("click", thumbToMain); From cf05da14c2ecfbcb2f4cf3a535dd5d07f82a1c78 Mon Sep 17 00:00:00 2001 From: HTLuff Date: Wed, 13 Jun 2018 15:54:14 +0100 Subject: [PATCH 06/10] thumbs now appearing with user credit --- assets/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/assets/index.js b/assets/index.js index 9db5d00..1d8b1ca 100644 --- a/assets/index.js +++ b/assets/index.js @@ -6,6 +6,8 @@ const mainImage = document.querySelector("#photo"); const thumbnails = document.querySelector("#thumbs"); const input = form.querySelector("#search-tf"); const conditions = document.querySelector("#conditions"); +const creditUser = document.querySelector('#credit-user'); +let imagesCollection = {}; function createRequest(service, request) { return service === "weather" @@ -58,7 +60,9 @@ function submitForm(e) { return imageResponse.json(); }) .then(function(imageData) { + imagesCollection = imageData; mainImage.innerHTML = displayImage(imageData, "full", 1); + creditUser.textContent = imageData.results[0].user.name; thumbnails.innerHTML = displayImage(imageData, "thumb"); }) .catch(function(error) { @@ -68,9 +72,13 @@ function submitForm(e) { function thumbToMain(e) { e.preventDefault(); - console.log(e.target); if (e.target.className === "thumbs__image") { const fullImg = mainImage.querySelector("img"); + imagesCollection.results.forEach(function(image){ + if(image.id === e.target.parentNode.id) { + creditUser.textContent = image.user.name; + } + }) return (fullImg.src = e.target.parentNode.getAttribute("href")); } } From d930c844c40b0de7375d49a10d5675115458babe Mon Sep 17 00:00:00 2001 From: HTLuff Date: Wed, 13 Jun 2018 16:07:11 +0100 Subject: [PATCH 07/10] credit user now a link to unsplash profile --- assets/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/index.js b/assets/index.js index 1d8b1ca..cba32e6 100644 --- a/assets/index.js +++ b/assets/index.js @@ -77,6 +77,7 @@ function thumbToMain(e) { imagesCollection.results.forEach(function(image){ if(image.id === e.target.parentNode.id) { creditUser.textContent = image.user.name; + creditUser.setAttribute('href', image.user.links.html) } }) return (fullImg.src = e.target.parentNode.getAttribute("href")); From 2056e700c3dd41e35e82ef748d7de7c16f724c8f Mon Sep 17 00:00:00 2001 From: Ralph Date: Wed, 13 Jun 2018 16:32:56 +0100 Subject: [PATCH 08/10] Added weather details --- assets/index.js | 36 ++++++++++++++++++++++++++++++------ assets/styles.css | 10 ++++++++++ index.html | 8 ++++++++ 3 files changed, 48 insertions(+), 6 deletions(-) diff --git a/assets/index.js b/assets/index.js index cba32e6..8240716 100644 --- a/assets/index.js +++ b/assets/index.js @@ -6,7 +6,7 @@ const mainImage = document.querySelector("#photo"); const thumbnails = document.querySelector("#thumbs"); const input = form.querySelector("#search-tf"); const conditions = document.querySelector("#conditions"); -const creditUser = document.querySelector('#credit-user'); +const creditUser = document.querySelector("#credit-user"); let imagesCollection = {}; function createRequest(service, request) { @@ -54,7 +54,30 @@ function submitForm(e) { }) .then(function(weatherData) { conditions.textContent = weatherData.weather[0].description; - return fetch(createRequest("unsplash", conditions.textContent)); + document.querySelector( + "#weather__data-temp" + ).innerHTML = `Temperature: ${( + weatherData.main.temp - 273.15 + ).toFixed(1)} Celsius`; + document.querySelector( + "#weather__data-wind-direction" + ).innerHTML = `Wind direction: ${ + weatherData.wind.deg + } deg`; + document.querySelector( + "#weather__data-wind-speed" + ).innerHTML = `Wind speed: ${ + weatherData.wind.speed + } mph`; + document.querySelector( + "#weather__data-pressure" + ).innerHTML = `Pressure: ${ + weatherData.main.pressure + } bar`; + document.querySelector( + "#weather__data-humidity" + ).innerHTML = `Humidity: ${weatherData.main.humidity}%`; + return fetch(createRequest("unsplash", conditions.innerHTML)); }) .then(function(imageResponse) { return imageResponse.json(); @@ -74,12 +97,13 @@ function thumbToMain(e) { e.preventDefault(); if (e.target.className === "thumbs__image") { const fullImg = mainImage.querySelector("img"); - imagesCollection.results.forEach(function(image){ - if(image.id === e.target.parentNode.id) { + imagesCollection.results.forEach(function(image) { + if (image.id === e.target.parentNode.id) { creditUser.textContent = image.user.name; - creditUser.setAttribute('href', image.user.links.html) + creditUser.setAttribute("href", image.user.links.html); + creditUser.setAttribute("target", "_blank"); } - }) + }); return (fullImg.src = e.target.parentNode.getAttribute("href")); } } diff --git a/assets/styles.css b/assets/styles.css index 24941c2..7101300 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -223,6 +223,16 @@ color: #fff; } +/* Weather data */ +.weather__data { + width: 240px; + background-color: #f1f1f1; + padding: 20px; + position: absolute; + right: 20px; + top: 54px; +} + /*----------------------------------------------------------------------------*/ /* Mediaquery overrides */ /*----------------------------------------------------------------------------*/ diff --git a/index.html b/index.html index f03496a..80d6f55 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,14 @@

    +
    +
    +
    +
    +
    +
    +
    +
    From d77765cab021699d6a2bbf652dca127d71c21ff2 Mon Sep 17 00:00:00 2001 From: HTLuff Date: Wed, 13 Jun 2018 16:59:00 +0100 Subject: [PATCH 09/10] new sick features: search params with city and image with city and heading tags --- assets/index.js | 3 ++- assets/styles.css | 13 +++++++++++-- index.html | 3 ++- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/assets/index.js b/assets/index.js index 8240716..de5e3e0 100644 --- a/assets/index.js +++ b/assets/index.js @@ -54,6 +54,7 @@ function submitForm(e) { }) .then(function(weatherData) { conditions.textContent = weatherData.weather[0].description; + document.querySelector('#weather__data-heading').innerHTML = `

    ${weatherData.name}

    `; document.querySelector( "#weather__data-temp" ).innerHTML = `Temperature: ${( @@ -77,7 +78,7 @@ function submitForm(e) { document.querySelector( "#weather__data-humidity" ).innerHTML = `Humidity: ${weatherData.main.humidity}%`; - return fetch(createRequest("unsplash", conditions.innerHTML)); + return fetch(createRequest("unsplash", conditions.innerHTML + " " + weatherData.name)); }) .then(function(imageResponse) { return imageResponse.json(); diff --git a/assets/styles.css b/assets/styles.css index 7101300..d94547b 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -38,7 +38,7 @@ overflow: hidden; position: relative; - margin: 20px 0; + margin: 20px 0 0; } .photo::before { @@ -231,8 +231,17 @@ position: absolute; right: 20px; top: 54px; + z-index: 999; +} +.location-name { + text-align: center; + font-size: 2em; + margin-top: 1px; + padding-top: 0px; +} +.location-name h1 { + margin: 0; } - /*----------------------------------------------------------------------------*/ /* Mediaquery overrides */ /*----------------------------------------------------------------------------*/ diff --git a/index.html b/index.html index 80d6f55..78b3ab9 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@

    +
    @@ -31,7 +32,7 @@

    - +

    From 24b9e58867c234c676624a617213a75c929cd6f1 Mon Sep 17 00:00:00 2001 From: HTLuff Date: Wed, 13 Jun 2018 17:11:31 +0100 Subject: [PATCH 10/10] new weather data dynamic bg color --- assets/index.js | 7 +++++++ assets/styles.css | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/assets/index.js b/assets/index.js index de5e3e0..d7dd795 100644 --- a/assets/index.js +++ b/assets/index.js @@ -24,6 +24,8 @@ function displayImage(imageData, size, numToShow) { html += ` `; + + setBgColor(imageArr[i].color); } } else { let markup = imageArr @@ -46,6 +48,10 @@ function displayImage(imageData, size, numToShow) { return html; } +function setBgColor(color) { + document.querySelector('#weather__data').style.backgroundColor = color; +} + function submitForm(e) { e.preventDefault(); fetch(createRequest("weather", input.value)) @@ -103,6 +109,7 @@ function thumbToMain(e) { creditUser.textContent = image.user.name; creditUser.setAttribute("href", image.user.links.html); creditUser.setAttribute("target", "_blank"); + setBgColor(image.color); } }); return (fullImg.src = e.target.parentNode.getAttribute("href")); diff --git a/assets/styles.css b/assets/styles.css index d94547b..35d417c 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -239,7 +239,7 @@ margin-top: 1px; padding-top: 0px; } -.location-name h1 { +.weather__data-heading h1 { margin: 0; } /*----------------------------------------------------------------------------*/