From 7bfb39e810f832e36a7181ebebf705a1d4c8415e Mon Sep 17 00:00:00 2001
From: Chris Phillips <chrisphillers@gmail.com>
Date: Tue, 18 Sep 2018 10:33:26 +0100
Subject: [PATCH 1/7] First commit, inital Fetch functionality created

---
 index.html |  2 +-
 script.js  | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 script.js

diff --git a/index.html b/index.html
index b1add34..e458674 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@ <h1 class="title">
     </div>
   </main>
 
-  <!-- JS goes here -->
+  <script src="script.js"></script>
 </body>
 
 </html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..78049ff
--- /dev/null
+++ b/script.js
@@ -0,0 +1,37 @@
+console.log("hello World");
+
+const generateApi = () => {
+    fetchContent(openWeatherApi);
+    
+};
+
+
+function displayContent(body) {
+    console.log(body.weather[0].description);
+    const weatherDescription = body.weather[0].description;
+    const weatherURL = `https://api.unsplash.com/search/photos?page=1&query=${weatherDescription}&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48`
+}
+
+
+
+const openWeatherApi = 'http://api.openweathermap.org/data/2.5/weather?q=london&APPID=a5f7c750d155ca20e98664c5fb5fe010';
+const unsplashApi = 'https://api.unsplash.com/search/photos?page=1&query=office&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48';
+
+
+
+function fetchContent(url){
+    // main news body fetch - button changeable
+    fetch(url) // by default fetch makes a GET request
+    .then(function(response) {
+        
+        return response.json();
+    })
+    .then(function(body){
+      //  parentNode.innerHTML = "";
+        displayContent(body);
+    });   
+}
+
+
+generateApi();
+console.log(generateApi);
\ No newline at end of file

From b255f4f91a9a3a12476ec3583b8fa5a3404cd555 Mon Sep 17 00:00:00 2001
From: Tony Batty <tonyeb87@gmail.com>
Date: Tue, 18 Sep 2018 11:36:27 +0100
Subject: [PATCH 2/7] displaying thumbnails

---
 index.html |  6 +++++-
 script.js  | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index e458674..f67e526 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,11 @@ <h1 class="title">
       </p>
     </div>
 
-    <div class="thumbs" id="thumbs"></div>
+    <div class="thumbs" id="thumbs">
+      
+      
+      
+    </div>
 
     <div class="controls">
       <form class="search" id="search">
diff --git a/script.js b/script.js
index 78049ff..f9eb554 100644
--- a/script.js
+++ b/script.js
@@ -1,15 +1,28 @@
 console.log("hello World");
 
 const generateApi = () => {
-    fetchContent(openWeatherApi);
+    fetchWeather(openWeatherApi);
     
 };
 
 
-function displayContent(body) {
+function getDescription(body) {
     console.log(body.weather[0].description);
     const weatherDescription = body.weather[0].description;
     const weatherURL = `https://api.unsplash.com/search/photos?page=1&query=${weatherDescription}&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48`
+    
+    fetchPhotos(weatherURL);
+    // console.log(body);
+}
+
+function displayPhotos(body) {
+    console.log(body);
+    const images = body.results;
+    const thumbParent = document.querySelector(".thumbs");
+    images.forEach((image, index) => {
+        console.log(image.urls.full);
+        thumbParent.innerHTML += `<img class="thumb" id="${index}" src="${image.urls.thumb}">`
+    })
 }
 
 
@@ -19,7 +32,20 @@ const unsplashApi = 'https://api.unsplash.com/search/photos?page=1&query=office&
 
 
 
-function fetchContent(url){
+function fetchWeather(url){
+    // main news body fetch - button changeable
+    fetch(url) // by default fetch makes a GET request
+    .then(function(response) {
+        
+        return response.json();
+    })
+    .then(function(body){
+      //  parentNode.innerHTML = "";
+        getDescription(body);
+    });   
+}
+
+function fetchPhotos(url){
     // main news body fetch - button changeable
     fetch(url) // by default fetch makes a GET request
     .then(function(response) {
@@ -28,7 +54,7 @@ function fetchContent(url){
     })
     .then(function(body){
       //  parentNode.innerHTML = "";
-        displayContent(body);
+        displayPhotos(body);
     });   
 }
 

From 69843016793c12cfc6324a2385e5873dd0a3f84f Mon Sep 17 00:00:00 2001
From: Chris Phillips <chrisphillers@gmail.com>
Date: Tue, 18 Sep 2018 12:03:29 +0100
Subject: [PATCH 3/7] Full size image functionality done

---
 script.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index f9eb554..d489029 100644
--- a/script.js
+++ b/script.js
@@ -15,17 +15,30 @@ function getDescription(body) {
     // console.log(body);
 }
 
+const thumbParent = document.querySelector(".thumbs");
+const photoParent = document.querySelector(".photo");
+const fullSize = [];
+
 function displayPhotos(body) {
     console.log(body);
     const images = body.results;
-    const thumbParent = document.querySelector(".thumbs");
+    
     images.forEach((image, index) => {
         console.log(image.urls.full);
         thumbParent.innerHTML += `<img class="thumb" id="${index}" src="${image.urls.thumb}">`
+        fullSize[index]=image.urls.regular;
     })
+        photoParent.innerHTML = `<img class="img" src="${fullSize[0]}">`
 }
 
 
+thumbParent.addEventListener('click', event => {
+    console.log(event.target.id)
+    photoParent.innerHTML = `<img class="img" src="${fullSize[event.target.id]}">`
+});
+
+
+
 
 const openWeatherApi = 'http://api.openweathermap.org/data/2.5/weather?q=london&APPID=a5f7c750d155ca20e98664c5fb5fe010';
 const unsplashApi = 'https://api.unsplash.com/search/photos?page=1&query=office&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48';

From ed46db222a7b3b1c884d4cedfa7370e29c0f947c Mon Sep 17 00:00:00 2001
From: Tony Batty <tonyeb87@gmail.com>
Date: Tue, 18 Sep 2018 12:38:05 +0100
Subject: [PATCH 4/7] added location search functionality

---
 script.js | 83 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/script.js b/script.js
index d489029..7e09de3 100644
--- a/script.js
+++ b/script.js
@@ -1,34 +1,38 @@
-console.log("hello World");
 
-const generateApi = () => {
+const unsplashApi = 'https://api.unsplash.com/search/photos?page=1&query=office&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48';
+const thumbParent = document.querySelector(".thumbs");
+const photoParent = document.querySelector(".photo");
+const fullSize = [];
+const formParent = document.querySelector(".search");
+
+// generates the api url with location 
+const generateApi = (location) => {
+    if (location == undefined) {
+        location = "london";
+    }
+    const openWeatherApi = `http://api.openweathermap.org/data/2.5/weather?q=${location}&APPID=a5f7c750d155ca20e98664c5fb5fe010`;
     fetchWeather(openWeatherApi);
     
 };
 
-
+// 
 function getDescription(body) {
-    console.log(body.weather[0].description);
     const weatherDescription = body.weather[0].description;
-    const weatherURL = `https://api.unsplash.com/search/photos?page=1&query=${weatherDescription}&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48`
-    
+    const weatherDescriptionNoSpace = weatherDescription.replace(" ", "-");
+    console.log(weatherDescriptionNoSpace);
+    const weatherURL = `https://api.unsplash.com/search/photos?page=1&query=${weatherDescriptionNoSpace}&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48`
     fetchPhotos(weatherURL);
-    // console.log(body);
 }
 
-const thumbParent = document.querySelector(".thumbs");
-const photoParent = document.querySelector(".photo");
-const fullSize = [];
-
 function displayPhotos(body) {
-    console.log(body);
     const images = body.results;
-    
+    thumbParent.innerHTML = "";
     images.forEach((image, index) => {
         console.log(image.urls.full);
         thumbParent.innerHTML += `<img class="thumb" id="${index}" src="${image.urls.thumb}">`
-        fullSize[index]=image.urls.regular;
+        fullSize[index] = image.urls.regular;
     })
-        photoParent.innerHTML = `<img class="img" src="${fullSize[0]}">`
+    photoParent.innerHTML = `<img class="img" src="${fullSize[0]}">`
 }
 
 
@@ -37,40 +41,39 @@ thumbParent.addEventListener('click', event => {
     photoParent.innerHTML = `<img class="img" src="${fullSize[event.target.id]}">`
 });
 
+formParent.addEventListener('submit', event => {
+    event.preventDefault();
+    const location = event.target['0'].value;
+    generateApi(location);
+})
 
 
 
-const openWeatherApi = 'http://api.openweathermap.org/data/2.5/weather?q=london&APPID=a5f7c750d155ca20e98664c5fb5fe010';
-const unsplashApi = 'https://api.unsplash.com/search/photos?page=1&query=office&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48';
-
-
 
-function fetchWeather(url){
+function fetchWeather(url) {
     // main news body fetch - button changeable
     fetch(url) // by default fetch makes a GET request
-    .then(function(response) {
-        
-        return response.json();
-    })
-    .then(function(body){
-      //  parentNode.innerHTML = "";
-        getDescription(body);
-    });   
+        .then(function (response) {
+
+            return response.json();
+        })
+        .then(function (body) {
+            //  parentNode.innerHTML = "";
+            getDescription(body);
+        });
 }
 
-function fetchPhotos(url){
+function fetchPhotos(url) {
     // main news body fetch - button changeable
     fetch(url) // by default fetch makes a GET request
-    .then(function(response) {
-        
-        return response.json();
-    })
-    .then(function(body){
-      //  parentNode.innerHTML = "";
-        displayPhotos(body);
-    });   
+        .then(function (response) {
+
+            return response.json();
+        })
+        .then(function (body) {
+            //  parentNode.innerHTML = "";
+            displayPhotos(body);
+        });
 }
 
-
-generateApi();
-console.log(generateApi);
\ No newline at end of file
+generateApi();
\ No newline at end of file

From c29f4cb7da70b92f318f93e42a49c38eea2b44fd Mon Sep 17 00:00:00 2001
From: Chris Phillips <chrisphillers@gmail.com>
Date: Tue, 18 Sep 2018 14:51:05 +0100
Subject: [PATCH 5/7] Thumbnail highlight on select function done

---
 script.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index 7e09de3..b9f4298 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,3 @@
-
 const unsplashApi = 'https://api.unsplash.com/search/photos?page=1&query=office&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48';
 const thumbParent = document.querySelector(".thumbs");
 const photoParent = document.querySelector(".photo");
@@ -39,6 +38,13 @@ function displayPhotos(body) {
 thumbParent.addEventListener('click', event => {
     console.log(event.target.id)
     photoParent.innerHTML = `<img class="img" src="${fullSize[event.target.id]}">`
+    const thumbList = document.querySelectorAll(".thumb");
+    thumbList.forEach(thumb => {
+        thumb.classList.remove("active");
+        console.log(thumb);
+    })
+    event.target.classList.toggle("active");
+    console.log(event.target.className);
 });
 
 formParent.addEventListener('submit', event => {

From 222f0b5baef182f4cdaa607dbb0e292440575135 Mon Sep 17 00:00:00 2001
From: Tony Batty <tonyeb87@gmail.com>
Date: Tue, 18 Sep 2018 15:20:40 +0100
Subject: [PATCH 6/7] displaying photographers name of each photo

---
 script.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/script.js b/script.js
index b9f4298..5886456 100644
--- a/script.js
+++ b/script.js
@@ -2,7 +2,9 @@ const unsplashApi = 'https://api.unsplash.com/search/photos?page=1&query=office&
 const thumbParent = document.querySelector(".thumbs");
 const photoParent = document.querySelector(".photo");
 const fullSize = [];
+const photographerArr = [];
 const formParent = document.querySelector(".search");
+const credits = document.querySelector("#credit-user");
 
 // generates the api url with location 
 const generateApi = (location) => {
@@ -30,11 +32,13 @@ function displayPhotos(body) {
         console.log(image.urls.full);
         thumbParent.innerHTML += `<img class="thumb" id="${index}" src="${image.urls.thumb}">`
         fullSize[index] = image.urls.regular;
+        photographerArr[index] = image.user.name;
+        console.log(photographerArr);
     })
     photoParent.innerHTML = `<img class="img" src="${fullSize[0]}">`
+    credits.textContent = photographerArr[0];
 }
 
-
 thumbParent.addEventListener('click', event => {
     console.log(event.target.id)
     photoParent.innerHTML = `<img class="img" src="${fullSize[event.target.id]}">`
@@ -45,6 +49,8 @@ thumbParent.addEventListener('click', event => {
     })
     event.target.classList.toggle("active");
     console.log(event.target.className);
+    credits.textContent = photographerArr[event.target.id];
+
 });
 
 formParent.addEventListener('submit', event => {
@@ -53,9 +59,6 @@ formParent.addEventListener('submit', event => {
     generateApi(location);
 })
 
-
-
-
 function fetchWeather(url) {
     // main news body fetch - button changeable
     fetch(url) // by default fetch makes a GET request

From f694fafe749a3ea93da0ce4cb6977f11f3e0a380 Mon Sep 17 00:00:00 2001
From: Tony Batty <tonyeb87@gmail.com>
Date: Tue, 18 Sep 2018 15:37:38 +0100
Subject: [PATCH 7/7] added link to photographers profile page

---
 script.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index 5886456..b5695c5 100644
--- a/script.js
+++ b/script.js
@@ -3,6 +3,7 @@ const thumbParent = document.querySelector(".thumbs");
 const photoParent = document.querySelector(".photo");
 const fullSize = [];
 const photographerArr = [];
+const photographerProfileUrl = [];
 const formParent = document.querySelector(".search");
 const credits = document.querySelector("#credit-user");
 
@@ -33,7 +34,8 @@ function displayPhotos(body) {
         thumbParent.innerHTML += `<img class="thumb" id="${index}" src="${image.urls.thumb}">`
         fullSize[index] = image.urls.regular;
         photographerArr[index] = image.user.name;
-        console.log(photographerArr);
+        photographerProfileUrl[index] = image.user.portfolio_url;
+        console.log(image.user.portfolio_url);
     })
     photoParent.innerHTML = `<img class="img" src="${fullSize[0]}">`
     credits.textContent = photographerArr[0];
@@ -50,6 +52,7 @@ thumbParent.addEventListener('click', event => {
     event.target.classList.toggle("active");
     console.log(event.target.className);
     credits.textContent = photographerArr[event.target.id];
+    credits.setAttribute('href', photographerProfileUrl[event.target.id]);
 
 });