From bf8e54e5e4dbcec98a5560d565cc5e10755cb57b Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 13 Jun 2018 16:19:28 +0100 Subject: [PATCH 1/2] First commit with all main Objectives achived --- app.js | 67 ++++++++++++++++++++++++++++++++++++++++ index.html | 89 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 113 insertions(+), 43 deletions(-) create mode 100644 app.js diff --git a/app.js b/app.js new file mode 100644 index 0000000..c812fa7 --- /dev/null +++ b/app.js @@ -0,0 +1,67 @@ +//const weatherReqkey= 'http://api.openweathermap.org/data/2.5/weather?q=london&APPID=b7aecc81c3f01e1eadcb367a666606c4'; +//const imagesReqKey='https://api.unsplash.com/search/photos?query=snow&client_id=217d39354a152114b5bb4e0f77e4ca3c7ecdbe155bb9d43580e11138def7915a'; + + +const goButton = document.querySelector('.btn'); +const search = document.querySelector('#search'); +const foreCast = document.querySelector('#conditions'); +const smallPictures = document.querySelector('.thumbs'); +const largeImage = document.querySelector('.photo'); + +//////get weather info////////////////////////////////// +function getWeather(city){ + fetch(`http://api.openweathermap.org/data/2.5/weather?q=london&APPID=b7aecc81c3f01e1eadcb367a666606c4`) + .then(function(response){ + return response.json(); + }) + .then(function(data){ + //console.log(data); + const weatherDesc = data.weather[0].description; + const temperature = data.main.temp; + foreCast.textContent= `${weatherDesc} ${temperature} `; + getImage(weatherDesc); + + }) + .catch(function(error){ + console.log(error); + }); + }; + +////////second function get images//////////////////////// + function getImage(weatherCondition){ + + fetch(`https://api.unsplash.com/search/photos?query=${weatherCondition}&client_id=217d39354a152114b5bb4e0f77e4ca3c7ecdbe155bb9d43580e11138def7915a`) + .then(function(response){ + return response.json(); + }) + .then(function(data){ + //console.log(data); + const ourImagesData = data.results; + //console.log(ourImagesData); + smallPictures.innerHTML= ourImagesData.map(function(element){ + return `` + + }) + + }) + .catch(function(error){ + console.log(error); + }); + + }; +////event listener///////////////////////////////// +search.addEventListener('submit', function(event) { + event.preventDefault(); + getWeather(); +}); + + +smallPictures.addEventListener('click',function(event){ +if(event.target.className !== 'thumbs__link')return +const test=event.target.getAttribute('href'); +event.preventDefault(); +//console.log(event.target.className); + +largeImage.innerHTML=`` + +}) diff --git a/index.html b/index.html index 664d55a..19002e9 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,52 @@ - - - - - - Meteoropolis - - - - - - -
-
-

+ + + + + + Meteoropolis + + + + + + +
+
+

Meteor opolis

-
- -
- -
-

-

- - on - Unsplash -

-
- -
- -
- -
-
- - - - - \ No newline at end of file +

+ +
+ +
+

+

+ + on + Unsplash +

+
+ +
+ +
+ +
+
+ + + + + + + + From 05862c93b1a18a412497a99a0f9a80ba2b848733 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 13 Jun 2018 17:04:28 +0100 Subject: [PATCH 2/2] updated for any city --- app.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index c812fa7..ae0c6e7 100644 --- a/app.js +++ b/app.js @@ -2,7 +2,7 @@ //const imagesReqKey='https://api.unsplash.com/search/photos?query=snow&client_id=217d39354a152114b5bb4e0f77e4ca3c7ecdbe155bb9d43580e11138def7915a'; -const goButton = document.querySelector('.btn'); +//const goButton = document.querySelector('.btn'); const search = document.querySelector('#search'); const foreCast = document.querySelector('#conditions'); const smallPictures = document.querySelector('.thumbs'); @@ -10,7 +10,7 @@ const largeImage = document.querySelector('.photo'); //////get weather info////////////////////////////////// function getWeather(city){ - fetch(`http://api.openweathermap.org/data/2.5/weather?q=london&APPID=b7aecc81c3f01e1eadcb367a666606c4`) + fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=b7aecc81c3f01e1eadcb367a666606c4`) .then(function(response){ return response.json(); }) @@ -52,16 +52,17 @@ function getWeather(city){ ////event listener///////////////////////////////// search.addEventListener('submit', function(event) { event.preventDefault(); - getWeather(); + //console.log(event.target.city.value); + getWeather(event.target.city.value); }); - +//////event get the picture from thumb and add to photo section ///////// smallPictures.addEventListener('click',function(event){ -if(event.target.className !== 'thumbs__link')return -const test=event.target.getAttribute('href'); -event.preventDefault(); -//console.log(event.target.className); - -largeImage.innerHTML=`` + if(event.target.className !== 'thumbs__link') //prevent to click on different area +return + const test=event.target.getAttribute('href'); + event.preventDefault(); + //console.log(event.target.className); + largeImage.innerHTML=`` })