From 2530084bb5a31c2256032added1411df6a765dbd Mon Sep 17 00:00:00 2001
From: Ollie Crook <olliejcrook@gmail.com>
Date: Wed, 13 Jun 2018 10:42:09 +0100
Subject: [PATCH 1/2] initial commit add main image to figure

---
 assets/src/index.js | 33 +++++++++++++++++++++++++++++++++
 index.html          |  6 ++++--
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 assets/src/index.js

diff --git a/assets/src/index.js b/assets/src/index.js
new file mode 100644
index 0000000..c6dd7e7
--- /dev/null
+++ b/assets/src/index.js
@@ -0,0 +1,33 @@
+function submitHandler(event){
+  event.preventDefault();
+
+  const searchBar = document.querySelector("#search-tf");
+  const city = searchBar.value;
+
+  fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=98c20025c94e54346cce38d0c653d966`)
+  .then(function(response){
+    return response.json();
+  }).then(function(jsonData){
+    const weatherDescription = jsonData.weather[0].description;
+
+    fetch(`https://api.unsplash.com/search/photos?query=${weatherDescription}&client_id=f3dc3b6bb3462a90c7969a62d83c8e3dd552b928cc31041850388e8616e977a6`)
+    .then(function(response){
+      return response.json();
+    }).then(function(data){
+      const firstImage = `<img src="${data.results[0].links.download}"></img>`;
+      figure.innerHTML = firstImage;
+      console.log(data);
+    }).catch(function(error){
+      alert('I don\'t work');
+    });
+
+  }).catch(function(error){
+    alert('I don\'t work');
+  });
+}
+
+const getSearch = document.querySelector("#search");
+
+const figure = document.querySelector('#photo');
+
+getSearch.addEventListener("submit", submitHandler);
diff --git a/index.html b/index.html
index 664d55a..c0e7bf8 100644
--- a/index.html
+++ b/index.html
@@ -38,12 +38,14 @@ <h1 class="title">
       <form class="search" id="search">
         <label class="search__label" for="search-tf">City</label>
         <input class="search__input" id="search-tf" name="city" placeholder="Enter city name" autocomplete="city" />
-        <button class="btn search__btn">Go</button>
+        <button class="btn search__btn" type="submit">Go</button>
       </form>
     </div>
   </main>
 
   <!-- JS goes here -->
+  <script src="assets/src/index.js">
+  </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From 4af17dc23304a57c043ccd3559770b5b157bb4d9 Mon Sep 17 00:00:00 2001
From: Ollie Crook <olliejcrook@gmail.com>
Date: Wed, 13 Jun 2018 11:13:40 +0100
Subject: [PATCH 2/2] add image from thumbs to figure

---
 assets/src/index.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/assets/src/index.js b/assets/src/index.js
index c6dd7e7..43421f7 100644
--- a/assets/src/index.js
+++ b/assets/src/index.js
@@ -10,16 +10,17 @@ function submitHandler(event){
   }).then(function(jsonData){
     const weatherDescription = jsonData.weather[0].description;
 
-    fetch(`https://api.unsplash.com/search/photos?query=${weatherDescription}&client_id=f3dc3b6bb3462a90c7969a62d83c8e3dd552b928cc31041850388e8616e977a6`)
-    .then(function(response){
-      return response.json();
-    }).then(function(data){
-      const firstImage = `<img src="${data.results[0].links.download}"></img>`;
-      figure.innerHTML = firstImage;
-      console.log(data);
-    }).catch(function(error){
-      alert('I don\'t work');
-    });
+    return fetch(`https://api.unsplash.com/search/photos?query=${weatherDescription}&client_id=f3dc3b6bb3462a90c7969a62d83c8e3dd552b928cc31041850388e8616e977a6`)
+
+
+  }).then(function(response){
+    return response.json();
+  }).then(function(data){
+    images = data.results.map(image =>
+      `<img src="${image.links.download}" id="${image.id}" class="thumbs__link"></img>`
+    )
+    thumbs.innerHTML = images;
+    console.log(data);
 
   }).catch(function(error){
     alert('I don\'t work');
@@ -30,4 +31,13 @@ const getSearch = document.querySelector("#search");
 
 const figure = document.querySelector('#photo');
 
+const thumbs = document.querySelector('#thumbs');
+
+let images;
 getSearch.addEventListener("submit", submitHandler);
+
+function clickHandler(event){
+  figure.innerHTML= `<img src="${event.target.src}" class="photo"></img>`;
+}
+
+thumbs.addEventListener("click", clickHandler);