From 09d99a89bc7607c5ca21f815ca22e7a73c24e207 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Wed, 8 Aug 2018 19:26:42 +0100
Subject: [PATCH 01/37] Added some map features

---
 client/build/bundle.js  | 13 ++++++++++++-
 client/build/index.html |  8 ++++++++
 client/src/app.js       |  9 ++++++++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 93fb4ba..f6a7918 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n  debugger;\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [-50.6067956, 165.968396];\n  const zoom = 14;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -128,6 +128,17 @@ eval("var BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketLis
 
 eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryListView.prototype.showListOfCountries = function(countries){\n  console.log(countries);\n\n  let selectTag = document.getElementById('countriesDropDown');\n\n  countries.forEach(function(country, index){\n    let option = document.createElement('option');\n    option.value = index;\n    option.innerText = country.name;\n    selectTag.appendChild(option);\n  });\n};\n\n\n//Copy to app.js\n// countryListView.prototype.handleSelected = function(countries){\n//   let selectTag = document.getElementById('countriesDropDown');\n//   selectTag.addEventListener('change', function(){\n//     const country = countries[this.value];\n//     console.log(country);\n//     bucketLists.render(country);\n//\n//     const coords = [country.latlng[0], country.latlng[1]];\n//     map.addMarker(coords);\n//   });\n// };\n\nmodule.exports = countryListView;\n\n\n//# sourceURL=webpack:///./client/src/views/countryListView.js?");
 
+/***/ }),
+
+/***/ "./client/src/views/mapWrapper.js":
+/*!****************************************!*\
+  !*** ./client/src/views/mapWrapper.js ***!
+  \****************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\");\n  this.map = L.map(containerID).setView(coords, zoom).addLayer(osmLayer);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+
 /***/ })
 
 /******/ });
\ No newline at end of file
diff --git a/client/build/index.html b/client/build/index.html
index 7100858..0ff3041 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -3,6 +3,14 @@
 <head>
   <meta charset="utf-8">
   <title>Countries Project</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
+ integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+ crossorigin=""/>
+
+ <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
+ integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
+ crossorigin=""></script>
+ 
   <link rel="stylesheet" href="styles.css">
   <script src="bundle.js"></script>
 </head>
diff --git a/client/src/app.js b/client/src/app.js
index 1130d3f..46fc405 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -1,6 +1,7 @@
 const BucketListView = require('./views/bucketListView.js');
 const CountryListView = require('./views/countryListView.js');
 const Request = require('./services/request.js');
+const MapWrapper = require('./views/mapWrapper.js');
 
 const bucketListView = new BucketListView();
 const countryListView = new CountryListView();
@@ -19,7 +20,13 @@ const appStart = function(){
   console.log('Hello world!')
   // request.get(getAllBucketListCountries);
   // request.get(countryRequest);
-  debugger;
+
+
+  const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
+  const containerID = "mapContainer";
+  const coords = [-50.6067956, 165.968396];
+  const zoom = 14;
+  mainMap = new MapWrapper(containerID, coords, zoom);
 }
 
 document.addEventListener('DOMContentLoaded', appStart);

From c69db25a245cdff6d68cbae9a25696e108f364f9 Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Wed, 8 Aug 2018 19:49:31 +0100
Subject: [PATCH 02/37] Map rendering

---
 client/build/bundle.js         | 4 ++--
 client/src/app.js              | 2 +-
 client/src/views/mapWrapper.js | 4 +++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index f6a7918..dec2626 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [-50.6067956, 165.968396];\n  const zoom = 14;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [-50.6067956, 165.968396];\n  const zoom = 14;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -137,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\");\n  this.map = L.map(containerID).setView(coords, zoom).addLayer(osmLayer);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\");\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/src/app.js b/client/src/app.js
index 46fc405..e0efa2d 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -26,7 +26,7 @@ const appStart = function(){
   const containerID = "mapContainer";
   const coords = [-50.6067956, 165.968396];
   const zoom = 14;
-  mainMap = new MapWrapper(containerID, coords, zoom);
+  const mainMap = new MapWrapper(containerID, coords, zoom);
 }
 
 document.addEventListener('DOMContentLoaded', appStart);
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index f1aacf5..32255e4 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -1,6 +1,6 @@
 const MapWrapper = function(containerID, coords, zoom) {
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
-  this.map = L.map(containerID).setView(coords, zoom).addLayer(osmLayer);
+  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);
 }
 
 MapWrapper.prototype.currentLocation = function (coords) {
@@ -14,3 +14,5 @@ MapWrapper.prototype.moveMap = function (coords) {
 MapWrapper.prototype.addMarker = function(coords){
   L.marker(coords).addTo(this.map);
 }
+
+module.exports = MapWrapper;

From efb680a856bb51d861be46f13f00f4fb31e357b7 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Wed, 8 Aug 2018 19:56:21 +0100
Subject: [PATCH 03/37] Changed coords and zoom to 1

---
 client/build/bundle.js | 2 +-
 client/src/app.js      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index dec2626..aef44f2 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [-50.6067956, 165.968396];\n  const zoom = 14;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 1;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index e0efa2d..26eeb3e 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -24,8 +24,8 @@ const appStart = function(){
 
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
-  const coords = [-50.6067956, 165.968396];
-  const zoom = 14;
+  const coords = [55.857236, -3.166804];
+  const zoom = 1;
   const mainMap = new MapWrapper(containerID, coords, zoom);
 }
 

From cddf6cd87cd19c597c6f6217e80a8281005fc4b7 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Wed, 8 Aug 2018 19:57:35 +0100
Subject: [PATCH 04/37] Changed some html

---
 client/build/index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/build/index.html b/client/build/index.html
index 0ff3041..b152861 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -10,7 +10,7 @@
  <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
  crossorigin=""></script>
- 
+
   <link rel="stylesheet" href="styles.css">
   <script src="bundle.js"></script>
 </head>
@@ -25,6 +25,10 @@ <h1>Bucketlist</h1>
     <button id='addCountry' type="submit">Add Country</button>
   </div>
 
+  <div id="mapContainer">
+
+  </div>
+
   <div id="bucketListContainer">
     <p>
       Countries you wish to visit:
@@ -39,8 +43,5 @@ <h1>Bucketlist</h1>
       delete button
     </ul>
   </div>
-  <div id="mapContainer">
-
-  </div>
 </body>
 </html>

From bd36fe92cbb8fa16b6923fea26a7ac4f61786064 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Wed, 8 Aug 2018 20:01:18 +0100
Subject: [PATCH 05/37] Added some map styling

---
 client/build/styles.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/build/styles.css b/client/build/styles.css
index 717a79a..1eeb41b 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -1,5 +1,12 @@
 #mapContainer {
   height: 400px;
-  width: auto;
+  width: 80%;
   margin-bottom: 2.5%;
+  margin-left: 10%;
+border: solid 1px black;
+box-shadow: 5px 10px #888888;
+}
+
+h1{
+  text-align: center;
 }

From 5075be55e8b5ba40dd90ddd70dfd65213e2873f6 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Wed, 8 Aug 2018 20:02:11 +0100
Subject: [PATCH 06/37] Added a margin

---
 client/build/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/build/styles.css b/client/build/styles.css
index 1eeb41b..8c607ff 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -2,6 +2,7 @@
   height: 400px;
   width: 80%;
   margin-bottom: 2.5%;
+  margin-top: 2.5%;
   margin-left: 10%;
 border: solid 1px black;
 box-shadow: 5px 10px #888888;

From 8c38acd53fba08b9b75a36aef0cd66cf903a9ad9 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Wed, 8 Aug 2018 20:03:54 +0100
Subject: [PATCH 07/37] Background colour and zoom

---
 client/build/bundle.js  | 2 +-
 client/build/styles.css | 8 ++++++--
 client/src/app.js       | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index aef44f2..7e4e40d 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 1;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/build/styles.css b/client/build/styles.css
index 8c607ff..fe01754 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -4,10 +4,14 @@
   margin-bottom: 2.5%;
   margin-top: 2.5%;
   margin-left: 10%;
-border: solid 1px black;
-box-shadow: 5px 10px #888888;
+  border: solid 1px black;
+  box-shadow: 5px 10px #888888;
 }
 
 h1{
   text-align: center;
 }
+
+*{
+  background-color: #CDD5D1;
+}
diff --git a/client/src/app.js b/client/src/app.js
index 26eeb3e..5d9c0b6 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -25,7 +25,7 @@ const appStart = function(){
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
   const coords = [55.857236, -3.166804];
-  const zoom = 1;
+  const zoom = 2;
   const mainMap = new MapWrapper(containerID, coords, zoom);
 }
 

From 77f99ec33e77f6f5bbd5ba43accc25a1222c761b Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Wed, 8 Aug 2018 20:15:09 +0100
Subject: [PATCH 08/37] Added delete button

---
 client/build/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/build/index.html b/client/build/index.html
index b152861..f976c4d 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -42,6 +42,7 @@ <h1>Bucketlist</h1>
       <br />
       delete button
     </ul>
+    <button id="deleteButton" type="submit">Delete List</button>
   </div>
 </body>
 </html>

From b98591c104bc511748300fe0c142c7851243b2eb Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Wed, 8 Aug 2018 20:23:58 +0100
Subject: [PATCH 09/37] Country names pulled from api

---
 client/build/bundle.js         |  4 ++--
 client/src/app.js              | 14 ++++++++++----
 client/src/services/request.js |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index dec2626..4e22fa5 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  // request.get(countryRequest);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [-50.6067956, 165.968396];\n  const zoom = 14;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    countryListView.addCountry(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country.name);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n  \n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [-50.6067956, 165.968396];\n  const zoom = 14;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -104,7 +104,7 @@ eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js *
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype.get = function (callback) {\n  const request = new XMLHttpRequest();\n  request.open(\"GET\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 200){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send();\n};\n\nRequest.prototype.post = function(callback, body){\n  const request = new XMLHttpRequest();\n  request.open(\"POST\", this.url);\n  request.setRequestHeader(\"Content-Type\", \"application/json\");\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 201){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send(JSON.stringify(body));\n}\n\nRequest.prototype.delete = function(callback){\n  const request = new XMLHttpRequest();\n  request.open(\"DELETE\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 204){\n      return;\n    }\n    callback();\n  })\n  request.send();\n}\n\nmodule.exports = Request;\n\n\n//# sourceURL=webpack:///./client/src/services/request.js?");
+eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype.get = function(callback) {\n  const request = new XMLHttpRequest();\n  request.open(\"GET\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 200){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send();\n};\n\nRequest.prototype.post = function(callback, body){\n  const request = new XMLHttpRequest();\n  request.open(\"POST\", this.url);\n  request.setRequestHeader(\"Content-Type\", \"application/json\");\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 201){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send(JSON.stringify(body));\n}\n\nRequest.prototype.delete = function(callback){\n  const request = new XMLHttpRequest();\n  request.open(\"DELETE\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 204){\n      return;\n    }\n    callback();\n  })\n  request.send();\n}\n\nmodule.exports = Request;\n\n\n//# sourceURL=webpack:///./client/src/services/request.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index e0efa2d..c91e6a3 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -9,19 +9,25 @@ const countryListView = new CountryListView();
 const countryRequest = new Request('https://restcountries.eu/rest/v2/all');
 const bucketRequest = new Request('http://localhost:300/api/bucket_countries');
 
+allCountries = [];
 
 const getAllBucketListCountries = function(allCountries){
   for(country of allCountries){
-    bucketListView.addCountry(country);
+    countryListView.addCountry(country);
+  }
+}
+
+const pullCountriesFromCountriesAPI = function(countriesAPI){
+  for(country of countriesAPI){
+    allCountries.push(country.name);
   }
 }
 
 const appStart = function(){
   console.log('Hello world!')
   // request.get(getAllBucketListCountries);
-  // request.get(countryRequest);
-
-
+  countryRequest.get(pullCountriesFromCountriesAPI);
+  
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
   const coords = [-50.6067956, 165.968396];
diff --git a/client/src/services/request.js b/client/src/services/request.js
index 8615b10..684f54a 100644
--- a/client/src/services/request.js
+++ b/client/src/services/request.js
@@ -2,7 +2,7 @@ const Request = function(url) {
   this.url = url;
 }
 
-Request.prototype.get = function (callback) {
+Request.prototype.get = function(callback) {
   const request = new XMLHttpRequest();
   request.open("GET", this.url);
   request.addEventListener("load", function(){

From 0182fe00535c786196c2ced8c80bcdb89c65c947 Mon Sep 17 00:00:00 2001
From: Roddy Daly <roddy_daly110@hotmail.com>
Date: Wed, 8 Aug 2018 20:35:22 +0100
Subject: [PATCH 10/37] seed file added

---
 db/seed.js | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 db/seed.js

diff --git a/db/seed.js b/db/seed.js
new file mode 100644
index 0000000..7c7a6c1
--- /dev/null
+++ b/db/seed.js
@@ -0,0 +1,58 @@
+use bucketdb;
+
+db.bucket_countries.insert([
+  {
+    name: 'Afghanistan',
+    capital: 'Kabul',
+    currency: 'Afghan afghani',
+    flag: 'https://restcountries.eu/data/afg.svg'
+  },
+  {
+    name: 'Albania',
+    capital: 'Tirana',
+    currency: 'Albanian lek',
+    flag: 'https://restcountries.eu/data/alb.svg'
+  },
+  {
+    name: 'Czech Republic',
+    capital: 'Prague',
+    currency: 'Czech koruna',
+    flag: 'https://restcountries.eu/data/cze.svg'
+  },
+  {
+    name: 'Eritrea',
+    capital: 'Asmara',
+    currency: 'Eritrean nakfa',
+    flag: 'https://restcountries.eu/data/eri.svg'
+  },
+  {
+    name: 'Holy See',
+    capital: 'Rome',
+    currency: 'Euro',
+    flag: 'https://restcountries.eu/data/vat.svg'
+  },
+  {
+    name: 'India',
+    capital: 'New Delhi',
+    currency: 'Indian rupee',
+    flag: 'https://restcountries.eu/data/ind.svg'
+  },
+  {
+    name: 'Iran',
+    capital: 'Tehran',
+    currency: 'Iranian rial',
+    flag: 'https://restcountries.eu/data/irn.svg'
+  },
+  {
+    name: 'Isle of Man',
+    capital: 'Douglas',
+    currency: 'British pound',
+    flag: 'https://restcountries.eu/data/imn.svg'
+  },
+  {
+    name: 'Jamaica',
+    capital: 'Kingston',
+    currency: 'Jamaican dollar',
+    flag: 'https://restcountries.eu/data/jam.svg'
+  }
+])

From b57ec5ab5018859858accac4b65b069c1b5252eb Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Wed, 8 Aug 2018 20:42:43 +0100
Subject: [PATCH 11/37] Corrected the country list

---
 client/build/bundle.js | 2 +-
 client/src/app.js      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 2097053..853746a 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    countryListView.addCountry(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country.name);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n  \n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 1;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    countryListView.addCountry(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 1;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index da72bbb..36da4a0 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -19,7 +19,7 @@ const getAllBucketListCountries = function(allCountries){
 
 const pullCountriesFromCountriesAPI = function(countriesAPI){
   for(country of countriesAPI){
-    allCountries.push(country.name);
+    allCountries.push(country);
   }
 }
 
@@ -27,7 +27,7 @@ const appStart = function(){
   console.log('Hello world!')
   // request.get(getAllBucketListCountries);
   countryRequest.get(pullCountriesFromCountriesAPI);
-  
+
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
   const coords = [55.857236, -3.166804];

From 6128d1804abf2e38dacf8010b160f9fabf56afc2 Mon Sep 17 00:00:00 2001
From: Roddy Daly <roddy_daly110@hotmail.com>
Date: Wed, 8 Aug 2018 21:17:39 +0100
Subject: [PATCH 12/37] dropdown list and countries lists now populate on
 browser

---
 client/build/bundle.js              | 6 ++----
 client/src/app.js                   | 8 +++++---
 client/src/views/countryListView.js | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 73a8166..e56a9b7 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,9 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    countryListView.addCountry(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 1;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
-
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    // countryListView.addCountry(country);\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -128,7 +126,7 @@ eval("var BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryListView.prototype.showListOfCountries = function(countries){\n  console.log(countries);\n\n  let selectTag = document.getElementById('countriesDropDown');\n\n  countries.forEach(function(country, index){\n    let option = document.createElement('option');\n    option.value = index;\n    option.innerText = country.name;\n    selectTag.appendChild(option);\n  });\n};\n\n\n//Copy to app.js\n// countryListView.prototype.handleSelected = function(countries){\n//   let selectTag = document.getElementById('countriesDropDown');\n//   selectTag.addEventListener('change', function(){\n//     const country = countries[this.value];\n//     console.log(country);\n//     bucketLists.render(country);\n//\n//     const coords = [country.latlng[0], country.latlng[1]];\n//     map.addMarker(coords);\n//   });\n// };\n\nmodule.exports = countryListView;\n\n\n//# sourceURL=webpack:///./client/src/views/countryListView.js?");
+eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryListView.prototype.showListOfCountries = function(countries){\n  console.log(countries);\n\n  let selectTag = document.getElementById('countryDropDown');\n\n  countries.forEach(function(country, index){\n    let option = document.createElement('option');\n    option.value = index;\n    option.innerText = country.name;\n    selectTag.appendChild(option);\n  });\n};\n\n\n//Copy to app.js\n// countryListView.prototype.handleSelected = function(countries){\n//   let selectTag = document.getElementById('countriesDropDown');\n//   selectTag.addEventListener('change', function(){\n//     const country = countries[this.value];\n//     console.log(country);\n//     bucketLists.render(country);\n//\n//     const coords = [country.latlng[0], country.latlng[1]];\n//     map.addMarker(coords);\n//   });\n// };\n\nmodule.exports = countryListView;\n\n\n//# sourceURL=webpack:///./client/src/views/countryListView.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index b0434e3..86963ed 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -7,13 +7,14 @@ const bucketListView = new BucketListView();
 const countryListView = new CountryListView();
 
 const countryRequest = new Request('https://restcountries.eu/rest/v2/all');
-const bucketRequest = new Request('http://localhost:300/api/bucket_countries');
+const bucketRequest = new Request('http://localhost:3000/api/bucket_countries');
 
 allCountries = [];
 
 const getAllBucketListCountries = function(allCountries){
   for(country of allCountries){
-    countryListView.addCountry(country);
+    // countryListView.addCountry(country);
+    bucketListView.render(country);
   }
 }
 
@@ -21,11 +22,12 @@ const pullCountriesFromCountriesAPI = function(countriesAPI){
   for(country of countriesAPI){
     allCountries.push(country);
   }
+  countryListView.showListOfCountries(allCountries);
 }
 
 const appStart = function(){
   console.log('Hello world!')
-  // request.get(getAllBucketListCountries);
+  bucketRequest.get(getAllBucketListCountries);
   countryRequest.get(pullCountriesFromCountriesAPI);
 
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
diff --git a/client/src/views/countryListView.js b/client/src/views/countryListView.js
index 138f932..12fc843 100644
--- a/client/src/views/countryListView.js
+++ b/client/src/views/countryListView.js
@@ -5,7 +5,7 @@ var countryListView = function(){
 countryListView.prototype.showListOfCountries = function(countries){
   console.log(countries);
 
-  let selectTag = document.getElementById('countriesDropDown');
+  let selectTag = document.getElementById('countryDropDown');
 
   countries.forEach(function(country, index){
     let option = document.createElement('option');

From 815d80eca4275836f2f938e872236b590c79c622 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 08:35:00 +0100
Subject: [PATCH 13/37] changed bundle.js

---
 client/build/bundle.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 73a8166..54019b2 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,9 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    countryListView.addCountry(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 1;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
-
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    countryListView.addCountry(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  // request.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 

From 353204c8f0e6457a845eae16e6ebe3c0b3b5691e Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 10:40:33 +0100
Subject: [PATCH 14/37] New map and initial CSS

---
 client/build/bundle.js         |  4 ++--
 client/build/index.html        | 14 ++++++++------
 client/build/styles.css        | 22 ++++++++++++++++++++--
 client/src/app.js              |  2 ++
 client/src/views/mapWrapper.js |  6 +++++-
 5 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index e56a9b7..af5ca33 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    // countryListView.addCountry(country);\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    // countryListView.addCountry(country);\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -137,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\");\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/build/index.html b/client/build/index.html
index f976c4d..00276bd 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -6,20 +6,21 @@
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
  crossorigin=""/>
-
- <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
+  <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
  crossorigin=""></script>
-
+  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Open+Sans" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">
   <script src="bundle.js"></script>
 </head>
-<body>
-  <h1>Bucketlist</h1>
 
+<header><h1>Bucket List</h1>
+</header>
+
+<body>
   <div id="countryList">
     <p>
-      Select a country to add to your Bucketlist:
+      Please select a country to add to your Bucketlist:
     </p>
     <select id= 'countryDropDown'></select>
     <button id='addCountry' type="submit">Add Country</button>
@@ -45,4 +46,5 @@ <h1>Bucketlist</h1>
     <button id="deleteButton" type="submit">Delete List</button>
   </div>
 </body>
+<footer><p>Created by Angelina Blyth, Roddy Daly and Peter Whittle.</p></footer>
 </html>
diff --git a/client/build/styles.css b/client/build/styles.css
index fe01754..dd7bd38 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -1,3 +1,8 @@
+*{
+  /* not sure if this messes up the margin for the map? */
+  margin: 0;
+}
+
 #mapContainer {
   height: 400px;
   width: 80%;
@@ -10,8 +15,21 @@
 
 h1{
   text-align: center;
+  color: #FFFFFF;
+  font-family: 'Josefin Sans', sans-serif;
 }
 
-*{
-  background-color: #CDD5D1;
+header{
+  background-color: #424B54;
+}
+
+footer{
+  text-align: center;
+  font-family: 'Open Sans', sans-serif;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  bottom: 0;
+  background-color: #424B54;
+  color: #FFFFFF;
 }
diff --git a/client/src/app.js b/client/src/app.js
index 86963ed..f2e7acf 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -30,6 +30,8 @@ const appStart = function(){
   bucketRequest.get(getAllBucketListCountries);
   countryRequest.get(pullCountriesFromCountriesAPI);
 
+
+
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
   const coords = [55.857236, -3.166804];
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index 32255e4..f548791 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -1,5 +1,9 @@
 const MapWrapper = function(containerID, coords, zoom) {
-  const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
+  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
+	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+	subdomains: 'abcd',
+	maxZoom: 19
+});
   this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);
 }
 

From f6e0230b45b17dba7d67aeade65be225b1cb4dc9 Mon Sep 17 00:00:00 2001
From: Roddy Daly <roddy_daly110@hotmail.com>
Date: Thu, 9 Aug 2018 10:41:48 +0100
Subject: [PATCH 15/37] can now add country to bucket list db and list

---
 client/build/bundle.js             |  6 +++---
 client/src/app.js                  | 18 ++++++++++++++++++
 client/src/services/request.js     |  4 ++--
 client/src/views/bucketListView.js |  3 +++
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index e56a9b7..47dfabc 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    // countryListView.addCountry(country);\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    // countryListView.addCountry(country);\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n    const country = allCountries[selectTag.value];\n    // console.log(country[this.value]);\n    // debugger;\n    console.log(country);\n    bucketListView.addCountry(country);\n    bucketRequest.post(country);\n\n\n    //const coords = [country.latlng[0], country.latlng[1]];\n    //map.addMarker(coords);\n\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -104,7 +104,7 @@ eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js *
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype.get = function(callback) {\n  const request = new XMLHttpRequest();\n  request.open(\"GET\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 200){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send();\n};\n\nRequest.prototype.post = function(callback, body){\n  const request = new XMLHttpRequest();\n  request.open(\"POST\", this.url);\n  request.setRequestHeader(\"Content-Type\", \"application/json\");\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 201){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send(JSON.stringify(body));\n}\n\nRequest.prototype.delete = function(callback){\n  const request = new XMLHttpRequest();\n  request.open(\"DELETE\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 204){\n      return;\n    }\n    callback();\n  })\n  request.send();\n}\n\nmodule.exports = Request;\n\n\n//# sourceURL=webpack:///./client/src/services/request.js?");
+eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype.get = function(callback) {\n  const request = new XMLHttpRequest();\n  request.open(\"GET\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 200){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send();\n};\n\nRequest.prototype.post = function(body){\n  const request = new XMLHttpRequest();\n  request.open(\"POST\", this.url);\n  request.setRequestHeader(\"Content-Type\", \"application/json\");\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 201){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    // callback(responseBody);\n  });\n  request.send(JSON.stringify(body));\n}\n\nRequest.prototype.delete = function(callback){\n  const request = new XMLHttpRequest();\n  request.open(\"DELETE\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 204){\n      return;\n    }\n    callback();\n  })\n  request.send();\n}\n\nmodule.exports = Request;\n\n\n//# sourceURL=webpack:///./client/src/services/request.js?");
 
 /***/ }),
 
@@ -115,7 +115,7 @@ eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("var BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.innerText = country.name;\n  ul.appendChild(li);\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
+eval("\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  console.log(country);\n  li.innerText = country.name;\n  ul.appendChild(li);\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index 86963ed..de4c80f 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -24,12 +24,30 @@ const pullCountriesFromCountriesAPI = function(countriesAPI){
   }
   countryListView.showListOfCountries(allCountries);
 }
+const handleSelected = function(countries){
+  let selectTag = document.getElementById('countryDropDown');
+
+    const country = allCountries[selectTag.value];
+    // console.log(country[this.value]);
+    // debugger;
+    console.log(country);
+    bucketListView.addCountry(country);
+    bucketRequest.post(country);
+
+
+    //const coords = [country.latlng[0], country.latlng[1]];
+    //map.addMarker(coords);
+
+};
 
 const appStart = function(){
   console.log('Hello world!')
   bucketRequest.get(getAllBucketListCountries);
   countryRequest.get(pullCountriesFromCountriesAPI);
 
+  const addCountryButton = document.getElementById('addCountry');
+  addCountryButton.addEventListener('click', handleSelected);
+
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
   const coords = [55.857236, -3.166804];
diff --git a/client/src/services/request.js b/client/src/services/request.js
index 684f54a..59e7f89 100644
--- a/client/src/services/request.js
+++ b/client/src/services/request.js
@@ -15,7 +15,7 @@ Request.prototype.get = function(callback) {
   request.send();
 };
 
-Request.prototype.post = function(callback, body){
+Request.prototype.post = function(body){
   const request = new XMLHttpRequest();
   request.open("POST", this.url);
   request.setRequestHeader("Content-Type", "application/json");
@@ -24,7 +24,7 @@ Request.prototype.post = function(callback, body){
       return;
     }
     const responseBody = JSON.parse(this.responseText);
-    callback(responseBody);
+    // callback(responseBody);
   });
   request.send(JSON.stringify(body));
 }
diff --git a/client/src/views/bucketListView.js b/client/src/views/bucketListView.js
index 1c1c23c..35f441f 100644
--- a/client/src/views/bucketListView.js
+++ b/client/src/views/bucketListView.js
@@ -1,9 +1,11 @@
+
 var BucketListView = function(){
   this.bucketLists = [];
 }
 
 BucketListView.prototype.addCountry = function(country){
   this.bucketLists.push(country);
+
   this.render(country);
 }
 
@@ -14,6 +16,7 @@ BucketListView.prototype.clear = function(){
 BucketListView.prototype.render = function(country){
   const ul = document.querySelector('#countries');
   const li = document.createElement('li');
+  console.log(country);
   li.innerText = country.name;
   ul.appendChild(li);
 }

From 81520d5ff57e9a5812423505db55146be8eec8f4 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 11:05:33 +0100
Subject: [PATCH 16/37] Added markers to map

---
 client/build/bundle.js         |  6 ++----
 client/src/app.js              | 20 ++++++++------------
 client/src/views/mapWrapper.js |  6 +++---
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index af6d353..752207d 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,9 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    // countryListView.addCountry(country);\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n    const country = allCountries[selectTag.value];\n    // console.log(country[this.value]);\n    // debugger;\n    console.log(country);\n    bucketListView.addCountry(country);\n    bucketRequest.post(country);\n\n\n    //const coords = [country.latlng[0], country.latlng[1]];\n    //map.addMarker(coords);\n\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  const mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
-
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords);\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -139,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/src/app.js b/client/src/app.js
index de4c80f..9bc18a5 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -13,7 +13,6 @@ allCountries = [];
 
 const getAllBucketListCountries = function(allCountries){
   for(country of allCountries){
-    // countryListView.addCountry(country);
     bucketListView.render(country);
   }
 }
@@ -27,17 +26,14 @@ const pullCountriesFromCountriesAPI = function(countriesAPI){
 const handleSelected = function(countries){
   let selectTag = document.getElementById('countryDropDown');
 
-    const country = allCountries[selectTag.value];
-    // console.log(country[this.value]);
-    // debugger;
-    console.log(country);
-    bucketListView.addCountry(country);
-    bucketRequest.post(country);
-
-
-    //const coords = [country.latlng[0], country.latlng[1]];
-    //map.addMarker(coords);
+  const country = allCountries[selectTag.value];
+  console.log(country);
+  bucketListView.addCountry(country);
+  bucketRequest.post(country);
 
+  const coords = [country.latlng[0], country.latlng[1]];
+  console.log(coords);
+  mainMap.addMarker(coords);
 };
 
 const appStart = function(){
@@ -52,7 +48,7 @@ const appStart = function(){
   const containerID = "mapContainer";
   const coords = [55.857236, -3.166804];
   const zoom = 2;
-  const mainMap = new MapWrapper(containerID, coords, zoom);
+ mainMap = new MapWrapper(containerID, coords, zoom);
 }
 
 document.addEventListener('DOMContentLoaded', appStart);
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index f548791..07f9543 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -7,9 +7,9 @@ const MapWrapper = function(containerID, coords, zoom) {
   this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);
 }
 
-MapWrapper.prototype.currentLocation = function (coords) {
-  this.map.setView(coords);
-};
+// MapWrapper.prototype.currentLocation = function (coords) {
+//   this.map.setView(coords);
+// };
 
 MapWrapper.prototype.moveMap = function (coords) {
  this.map.flyTo(coords);

From f39c4e90d5aeff5ee60a84c41792544835a87306 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 11:16:23 +0100
Subject: [PATCH 17/37] Added popup

---
 client/build/bundle.js         | 2 +-
 client/src/views/mapWrapper.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 752207d..b05467c 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -137,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map).bindPopup(\"Country Name placeholder\");\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index 07f9543..6e48f5e 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -16,7 +16,7 @@ MapWrapper.prototype.moveMap = function (coords) {
 };
 
 MapWrapper.prototype.addMarker = function(coords){
-  L.marker(coords).addTo(this.map);
+  L.marker(coords).addTo(this.map).bindPopup("Country Name placeholder");
 }
 
 module.exports = MapWrapper;

From 690f3799ff95d8884db2970aeb271bc9a184eedf Mon Sep 17 00:00:00 2001
From: Roddy Daly <roddy_daly110@hotmail.com>
Date: Thu, 9 Aug 2018 11:27:02 +0100
Subject: [PATCH 18/37] extra div added

---
 client/build/index.html | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/build/index.html b/client/build/index.html
index 00276bd..92b3e40 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -35,16 +35,13 @@
       Countries you wish to visit:
     </p>
     <ul id="countries">
-      country name
-      <br />
-      country capital
-      <br />
-      country currency
-      <br />
-      delete button
+    
     </ul>
     <button id="deleteButton" type="submit">Delete List</button>
   </div>
+  <div id='furtherInfo'>
+
+  </div>
 </body>
 <footer><p>Created by Angelina Blyth, Roddy Daly and Peter Whittle.</p></footer>
 </html>

From 0c3d1d1f5740fb1dcb54c11af1c5efcb3d33ea63 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 11:27:15 +0100
Subject: [PATCH 19/37] added country to popups on map

---
 client/build/bundle.js         | 4 ++--
 client/src/app.js              | 2 +-
 client/src/views/mapWrapper.js | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index b05467c..eb45671 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords);\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords, country);\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -137,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map).bindPopup(\"Country Name placeholder\");\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords, country){\n  L.marker(coords).addTo(this.map).bindPopup(country.name);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/src/app.js b/client/src/app.js
index 9bc18a5..c8bee42 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -33,7 +33,7 @@ const handleSelected = function(countries){
 
   const coords = [country.latlng[0], country.latlng[1]];
   console.log(coords);
-  mainMap.addMarker(coords);
+  mainMap.addMarker(coords, country);
 };
 
 const appStart = function(){
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index 6e48f5e..37584a9 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -15,8 +15,8 @@ MapWrapper.prototype.moveMap = function (coords) {
  this.map.flyTo(coords);
 };
 
-MapWrapper.prototype.addMarker = function(coords){
-  L.marker(coords).addTo(this.map).bindPopup("Country Name placeholder");
+MapWrapper.prototype.addMarker = function(coords, country){
+  L.marker(coords).addTo(this.map).bindPopup(country.name);
 }
 
 module.exports = MapWrapper;

From 00ab0fabb6b788df65a6c502bd904a256be295b7 Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 11:27:36 +0100
Subject: [PATCH 20/37] Additional CSS

---
 client/build/bundle.js         |  2 +-
 client/build/index.html        |  8 ++++----
 client/build/styles.css        | 27 +++++++++++++++++++++------
 client/src/views/mapWrapper.js |  8 +++++---
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index af5ca33..cbbefd3 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -137,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n\tattribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> &copy; <a href=\"http://cartodb.com/attributions\">CartoDB</a>',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {\n\tattribution: 'Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> &mdash; Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>',\n\tsubdomains: 'abcd',\n\tminZoom: 1,\n\tmaxZoom: 16,\n\text: 'png'\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\nMapWrapper.prototype.currentLocation = function (coords) {\n  this.map.setView(coords);\n};\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords){\n  L.marker(coords).addTo(this.map);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/build/index.html b/client/build/index.html
index 00276bd..9520f27 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -9,7 +9,7 @@
   <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
  crossorigin=""></script>
-  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Open+Sans" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Overpass|Permanent+Marker" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">
   <script src="bundle.js"></script>
 </head>
@@ -18,18 +18,18 @@
 </header>
 
 <body>
+  <div id = 'countryListContainer'>
   <div id="countryList">
     <p>
-      Please select a country to add to your Bucketlist:
+      Please select a country to add to your Bucketlist!
     </p>
     <select id= 'countryDropDown'></select>
     <button id='addCountry' type="submit">Add Country</button>
   </div>
+</div>
 
   <div id="mapContainer">
-
   </div>
-
   <div id="bucketListContainer">
     <p>
       Countries you wish to visit:
diff --git a/client/build/styles.css b/client/build/styles.css
index dd7bd38..19e07f1 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -13,23 +13,38 @@
   box-shadow: 5px 10px #888888;
 }
 
-h1{
+#countryListContainer{
+  display: flex;
+  justify-content: center;
+}
+
+#countryList{
+  padding-top: 20px;
   text-align: center;
-  color: #FFFFFF;
-  font-family: 'Josefin Sans', sans-serif;
+  max-width: 375px;
+  vertical-align: middle;
 }
 
 header{
-  background-color: #424B54;
+  background-color: #EA526F;
+  font-size: 25px;
+  text-align: center;
+  color: #FFFFFF;
+  Font-Family: 'Permanent Marker', Cursive;
+}
+
+body{
+  background-color: #FCEADE;
+  Font-Family: 'Overpass', Sans-Serif;
 }
 
 footer{
   text-align: center;
-  font-family: 'Open Sans', sans-serif;
+  Font-Family: 'Overpass', Sans-Serif;
   position: fixed;
   z-index: 1;
   width: 100%;
   bottom: 0;
-  background-color: #424B54;
+  background-color: #EA526F;
   color: #FFFFFF;
 }
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index f548791..566ff53 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -1,8 +1,10 @@
 const MapWrapper = function(containerID, coords, zoom) {
-  const osmLayer = new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
-	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+  const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
+	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 	subdomains: 'abcd',
-	maxZoom: 19
+	minZoom: 1,
+	maxZoom: 16,
+	ext: 'png'
 });
   this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);
 }

From dd5b25b3c00cfbe005f1782aacf57993cb9f7ea3 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 11:47:24 +0100
Subject: [PATCH 21/37] Added event listener to delete button

---
 client/build/bundle.js |  2 +-
 client/src/app.js      | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index eb45671..1cf52ec 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords, country);\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords, country);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n}\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  request.delete(deleteAllCountriesComplete);\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index c8bee42..ed1218e 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -36,6 +36,14 @@ const handleSelected = function(countries){
   mainMap.addMarker(coords, country);
 };
 
+const deleteAllCountriesComplete = function(){
+  bucketListView.clear();
+}
+
+const handleDeleteAllCountriesButton = function(allCountries){
+  request.delete(deleteAllCountriesComplete);
+}
+
 const appStart = function(){
   console.log('Hello world!')
   bucketRequest.get(getAllBucketListCountries);
@@ -44,11 +52,14 @@ const appStart = function(){
   const addCountryButton = document.getElementById('addCountry');
   addCountryButton.addEventListener('click', handleSelected);
 
+  const deleteAllCountriesButton = document.querySelector('#deleteButton');
+  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);
+
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
   const coords = [55.857236, -3.166804];
   const zoom = 2;
- mainMap = new MapWrapper(containerID, coords, zoom);
+  mainMap = new MapWrapper(containerID, coords, zoom);
 }
 
 document.addEventListener('DOMContentLoaded', appStart);

From 73b0742b943a278e640b5111ad10c3da826115d1 Mon Sep 17 00:00:00 2001
From: Roddy Daly <roddy_daly110@hotmail.com>
Date: Thu, 9 Aug 2018 12:20:36 +0100
Subject: [PATCH 22/37] added event listener to bucket list items

---
 client/build/bundle.js             | 4 ++--
 client/src/app.js                  | 8 ++++++++
 client/src/views/bucketListView.js | 7 ++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 752207d..8f863e0 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords);\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\n\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords);\n\n\n};\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n mainMap = new MapWrapper(containerID, coords, zoom);\n\n\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -115,7 +115,7 @@ eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  console.log(country);\n  li.innerText = country.name;\n  ul.appendChild(li);\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
+eval("\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.id = 'country_name'\n  li.innerText = country.name;\n  ul.appendChild(li);\n  li.addEventListener('click', function(){\n    console.log(\"country has been clicked\");\n    console.log(country);\n  });\n  \n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index 9bc18a5..e0a3778 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -17,6 +17,8 @@ const getAllBucketListCountries = function(allCountries){
   }
 }
 
+
+
 const pullCountriesFromCountriesAPI = function(countriesAPI){
   for(country of countriesAPI){
     allCountries.push(country);
@@ -34,6 +36,8 @@ const handleSelected = function(countries){
   const coords = [country.latlng[0], country.latlng[1]];
   console.log(coords);
   mainMap.addMarker(coords);
+
+
 };
 
 const appStart = function(){
@@ -44,11 +48,15 @@ const appStart = function(){
   const addCountryButton = document.getElementById('addCountry');
   addCountryButton.addEventListener('click', handleSelected);
 
+
+
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";
   const coords = [55.857236, -3.166804];
   const zoom = 2;
  mainMap = new MapWrapper(containerID, coords, zoom);
+
+
 }
 
 document.addEventListener('DOMContentLoaded', appStart);
diff --git a/client/src/views/bucketListView.js b/client/src/views/bucketListView.js
index 35f441f..814e717 100644
--- a/client/src/views/bucketListView.js
+++ b/client/src/views/bucketListView.js
@@ -16,9 +16,14 @@ BucketListView.prototype.clear = function(){
 BucketListView.prototype.render = function(country){
   const ul = document.querySelector('#countries');
   const li = document.createElement('li');
-  console.log(country);
+  li.id = 'country_name'
   li.innerText = country.name;
   ul.appendChild(li);
+  li.addEventListener('click', function(){
+    console.log("country has been clicked");
+    console.log(country);
+  });
+  
 }
 
 

From 60ac70a10c18733729400f55e726ca3e2e8b68c1 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 12:49:28 +0100
Subject: [PATCH 23/37] delete all button working but not refreshing

---
 client/build/bundle.js |  2 +-
 client/src/app.js      | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index da269b2..5ade825 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  console.log(country);\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  console.log(coords);\n  mainMap.addMarker(coords, country);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n}\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  request.delete(deleteAllCountriesComplete);\n}\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  mainMap.addMarker(coords, country);\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index ed1218e..495d47c 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -27,22 +27,22 @@ const handleSelected = function(countries){
   let selectTag = document.getElementById('countryDropDown');
 
   const country = allCountries[selectTag.value];
-  console.log(country);
   bucketListView.addCountry(country);
   bucketRequest.post(country);
 
   const coords = [country.latlng[0], country.latlng[1]];
-  console.log(coords);
   mainMap.addMarker(coords, country);
 };
 
+
+const handleDeleteAllCountriesButton = function(allCountries){
+  bucketRequest.delete(deleteAllCountriesComplete);
+};
+
 const deleteAllCountriesComplete = function(){
   bucketListView.clear();
 }
 
-const handleDeleteAllCountriesButton = function(allCountries){
-  request.delete(deleteAllCountriesComplete);
-}
 
 const appStart = function(){
   console.log('Hello world!')

From fa2c1b61d0c0ccc1b464ac251ca9fce42d18b6a7 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 12:52:52 +0100
Subject: [PATCH 24/37] List now refreshes when delete is clicked

---
 client/build/bundle.js             | 2 +-
 client/src/views/bucketListView.js | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 5ade825..b375ce2 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -115,7 +115,7 @@ eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  console.log(country);\n  li.innerText = country.name;\n  ul.appendChild(li);\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
+eval("\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(country) {\n  this.bucketLists = [];\n  const ul = document.querySelector('#countries');\n  ul.innerHTML = '';\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  console.log(country);\n  li.innerText = country.name;\n  ul.appendChild(li);\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
 
 /***/ }),
 
diff --git a/client/src/views/bucketListView.js b/client/src/views/bucketListView.js
index 35f441f..bb05d2a 100644
--- a/client/src/views/bucketListView.js
+++ b/client/src/views/bucketListView.js
@@ -9,8 +9,10 @@ BucketListView.prototype.addCountry = function(country){
   this.render(country);
 }
 
-BucketListView.prototype.clear = function(){
+BucketListView.prototype.clear = function(country) {
   this.bucketLists = [];
+  const ul = document.querySelector('#countries');
+  ul.innerHTML = '';
 }
 
 BucketListView.prototype.render = function(country){

From 1a7f74d7df471c20ce2866a83683563bdc4153e6 Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 13:25:41 +0100
Subject: [PATCH 25/37] CSS

---
 client/build/bundle.js         |  2 +-
 client/build/index.html        | 47 ++++++++++----------
 client/build/styles.css        | 80 +++++++++++++++++++++++-----------
 client/src/views/mapWrapper.js |  4 +-
 4 files changed, 79 insertions(+), 54 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 0415c48..9f5b661 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -137,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {\n\tattribution: 'Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> &mdash; Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>',\n\tsubdomains: 'abcd',\n\tminZoom: 1,\n\tmaxZoom: 16,\n\text: 'png'\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords, country){\n  L.marker(coords).addTo(this.map).bindPopup(country.name);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {\n\tattribution: 'Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> &mdash; Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>',\n\tsubdomains: 'abcd',\n\tminZoom: 2,\n\tmaxZoom: 15,\n\text: 'png'\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords, country){\n  L.marker(coords).addTo(this.map).bindPopup(country.name);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/build/index.html b/client/build/index.html
index c0a8050..f9a7322 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -4,12 +4,12 @@
   <meta charset="utf-8">
   <title>Countries Project</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
- integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
- crossorigin=""/>
+  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+  crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
- integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
- crossorigin=""></script>
-  <link href="https://fonts.googleapis.com/css?family=Overpass|Permanent+Marker" rel="stylesheet">
+  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
+  crossorigin=""></script>
+  <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Josefin+Sans" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">
   <script src="bundle.js"></script>
 </head>
@@ -18,30 +18,27 @@
 </header>
 
 <body>
-  <div id = 'countryListContainer'>
-  <div id="countryList">
-    <p>
-      Please select a country to add to your Bucketlist!
-    </p>
-    <select id= 'countryDropDown'></select>
-    <button id='addCountry' type="submit">Add Country</button>
+  <div id ='countryListContainer'>
+    <div id="countryList">
+      <p>
+        Please select a country to add to your Bucketlist!
+      </p>
+      <select id= 'countryDropDown'></select>
+      <button id='addCountry' type="submit">Add Country</button>
+    </div>
   </div>
-</div>
 
-  <div id="mapContainer">
-  </div>
-  <div id="bucketListContainer">
-    <p>
-      Countries you wish to visit:
-    </p>
-    <ul id="countries">
-    
-    </ul>
-    <button id="deleteButton" type="submit">Delete List</button>
-  </div>
-  <div id='furtherInfo'>
+  <div id="mapContainer"></div>
 
+  <div id= "infoPane">
+
+    <div id="bucketListContainer">
+      <p>Countries you wish to visit:</p>
+      <ul id="countries"></ul>
+      <button id="deleteButton" type="submit">Delete List</button></div>
+    <div id='furtherInfo'></div>
   </div>
 </body>
+
 <footer><p>Created by Angelina Blyth, Roddy Daly and Peter Whittle.</p></footer>
 </html>
diff --git a/client/build/styles.css b/client/build/styles.css
index 19e07f1..7aba2ea 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -3,14 +3,34 @@
   margin: 0;
 }
 
-#mapContainer {
-  height: 400px;
-  width: 80%;
-  margin-bottom: 2.5%;
-  margin-top: 2.5%;
-  margin-left: 10%;
-  border: solid 1px black;
-  box-shadow: 5px 10px #888888;
+header{
+  background-color: #276FBF;
+  font-size: 25px;
+  text-align: center;
+  color: #F6F4F3;
+  font-family: 'Amatic SC', cursive;
+}
+
+body{
+  background-color: #F6F4F3;
+  color: #183059;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+footer{
+  text-align: center;
+  font-family: 'Josefin Sans', sans-serif;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  bottom: 0;
+  background-color: #276FBF;
+  color: #FFFFFF;
+  opacity: 0.8
+}
+
+ul{
+  list-style: none;
 }
 
 #countryListContainer{
@@ -25,26 +45,34 @@
   vertical-align: middle;
 }
 
-header{
-  background-color: #EA526F;
-  font-size: 25px;
-  text-align: center;
-  color: #FFFFFF;
-  Font-Family: 'Permanent Marker', Cursive;
+#infoPane{
+  display: flex;
+  justify-content: center;
 }
 
-body{
-  background-color: #FCEADE;
-  Font-Family: 'Overpass', Sans-Serif;
+#mapContainer {
+  height: 400px;
+  width: auto;
+  margin-top: 15px;
+  margin-left: 15px;
+  margin-right: 15px;
+  border: solid 1px black;
 }
 
-footer{
-  text-align: center;
-  Font-Family: 'Overpass', Sans-Serif;
-  position: fixed;
-  z-index: 1;
-  width: 100%;
-  bottom: 0;
-  background-color: #EA526F;
-  color: #FFFFFF;
+#bucketListContainer{
+  margin: 15px;
+  margin-bottom: 40px;
+  height: 300px;
+  width: 400px;
+  border: solid 1px black;
+  overflow: scroll;
+}
+
+#furtherInfo{
+  margin: 15px;
+  margin-bottom: 40px;
+  height: 300px;
+  width: 400px;
+  border: solid 1px black;
+  overflow: scroll;
 }
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index 6ab79ed..48711b3 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -2,8 +2,8 @@ const MapWrapper = function(containerID, coords, zoom) {
   const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
 	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 	subdomains: 'abcd',
-	minZoom: 1,
-	maxZoom: 16,
+	minZoom: 2,
+	maxZoom: 15,
 	ext: 'png'
 });
   this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);

From 699132668eb037dd7db3b114fd2ffc968d2faeab Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 13:30:11 +0100
Subject: [PATCH 26/37] Working on removing markers from map

---
 client/build/bundle.js | 2 +-
 client/src/app.js      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index b375ce2..d5832a4 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  mainMap.addMarker(coords, country);\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  mainMap.addMarker(coords, country);\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index 495d47c..3155ef9 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -41,6 +41,7 @@ const handleDeleteAllCountriesButton = function(allCountries){
 
 const deleteAllCountriesComplete = function(){
   bucketListView.clear();
+  mainMap.clearLayer
 }
 
 
@@ -60,6 +61,8 @@ const appStart = function(){
   const coords = [55.857236, -3.166804];
   const zoom = 2;
   mainMap = new MapWrapper(containerID, coords, zoom);
+  //markers = mainMap.markerClusterGroup();
+  //console.log(markers);
 }
 
 document.addEventListener('DOMContentLoaded', appStart);

From 1118320714275a9fa661aabd83c879809ce9a815 Mon Sep 17 00:00:00 2001
From: Roddy Daly <roddy_daly110@hotmail.com>
Date: Thu, 9 Aug 2018 13:43:14 +0100
Subject: [PATCH 27/37] added event listener to bucket list items

---
 client/build/bundle.js              | 15 +++++++++++++--
 client/src/views/bucketListView.js  |  7 +++++--
 client/src/views/furtherInfoView.js | 30 +++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 client/src/views/furtherInfoView.js

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 8f863e0..93ef3aa 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -113,9 +113,9 @@ eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype
   !*** ./client/src/views/bucketListView.js ***!
   \********************************************/
 /*! no static exports found */
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
 
-eval("\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.id = 'country_name'\n  li.innerText = country.name;\n  ul.appendChild(li);\n  li.addEventListener('click', function(){\n    console.log(\"country has been clicked\");\n    console.log(country);\n  });\n  \n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
+eval("const FurtherInfoView = __webpack_require__(/*! ./furtherInfoView.js */ \"./client/src/views/furtherInfoView.js\");\n\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.id = 'country_name'\n  li.innerText = country.name;\n  ul.appendChild(li);\n  li.addEventListener('click', function(){\n    console.log(\"country has been clicked\");\n    let furtherInfo = new FurtherInfoView();\n    furtherInfo.clearContent();\n    furtherInfo.render(country);\n  });\n\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
 
 /***/ }),
 
@@ -130,6 +130,17 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 
 /***/ }),
 
+/***/ "./client/src/views/furtherInfoView.js":
+/*!*********************************************!*\
+  !*** ./client/src/views/furtherInfoView.js ***!
+  \*********************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+eval("var FurtherInfoView = function(){\n  this.country = [];\n}\n\nFurtherInfoView.prototype.clearContent = function(){\n  let divTag = document.querySelector('#furtherInfo');\n  while (divTag.hasChildNodes()){\n    divTag.removeChild(divTag.lastChild);\n  }\n}\n\nFurtherInfoView.prototype.render = function(country){\n  let divTag = document.querySelector('#furtherInfo');\n  const ul = document.createElement('ul');\n  const name = document.createElement('li');\n  name.innerText = `Name: ${country.name}`;\n  ul.appendChild(name);\n  const capital = document.createElement('li');\n  capital.innerText = `Capital: ${country.capital}`;\n  ul.appendChild(capital);\n  const language = document.createElement('li');\n  language.innerText = `Main Language: ${country.languages[0].name}`;\n  ul.appendChild(language);\n  const pop = document.createElement('li');\n  pop.innerText = `Population: ${country.population}`;\n  ul.appendChild(pop);\n  divTag.appendChild(ul);\n}\n\nmodule.exports = FurtherInfoView;\n\n\n//# sourceURL=webpack:///./client/src/views/furtherInfoView.js?");
+
+/***/ }),
+
 /***/ "./client/src/views/mapWrapper.js":
 /*!****************************************!*\
   !*** ./client/src/views/mapWrapper.js ***!
diff --git a/client/src/views/bucketListView.js b/client/src/views/bucketListView.js
index 814e717..2b6e581 100644
--- a/client/src/views/bucketListView.js
+++ b/client/src/views/bucketListView.js
@@ -1,3 +1,4 @@
+const FurtherInfoView = require('./furtherInfoView.js');
 
 var BucketListView = function(){
   this.bucketLists = [];
@@ -21,9 +22,11 @@ BucketListView.prototype.render = function(country){
   ul.appendChild(li);
   li.addEventListener('click', function(){
     console.log("country has been clicked");
-    console.log(country);
+    let furtherInfo = new FurtherInfoView();
+    furtherInfo.clearContent();
+    furtherInfo.render(country);
   });
-  
+
 }
 
 
diff --git a/client/src/views/furtherInfoView.js b/client/src/views/furtherInfoView.js
new file mode 100644
index 0000000..e10f60f
--- /dev/null
+++ b/client/src/views/furtherInfoView.js
@@ -0,0 +1,30 @@
+var FurtherInfoView = function(){
+  this.country = [];
+}
+
+FurtherInfoView.prototype.clearContent = function(){
+  let divTag = document.querySelector('#furtherInfo');
+  while (divTag.hasChildNodes()){
+    divTag.removeChild(divTag.lastChild);
+  }
+}
+
+FurtherInfoView.prototype.render = function(country){
+  let divTag = document.querySelector('#furtherInfo');
+  const ul = document.createElement('ul');
+  const name = document.createElement('li');
+  name.innerText = `Name: ${country.name}`;
+  ul.appendChild(name);
+  const capital = document.createElement('li');
+  capital.innerText = `Capital: ${country.capital}`;
+  ul.appendChild(capital);
+  const language = document.createElement('li');
+  language.innerText = `Main Language: ${country.languages[0].name}`;
+  ul.appendChild(language);
+  const pop = document.createElement('li');
+  pop.innerText = `Population: ${country.population}`;
+  ul.appendChild(pop);
+  divTag.appendChild(ul);
+}
+
+module.exports = FurtherInfoView;

From d4524a5f48a778ec575bedf1e9b1fac7c0e842aa Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 13:56:02 +0100
Subject: [PATCH 28/37] Further CSS

---
 client/build/index.html |  2 +-
 client/build/styles.css | 44 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/client/build/index.html b/client/build/index.html
index f9a7322..5b927ac 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -33,7 +33,7 @@
   <div id= "infoPane">
 
     <div id="bucketListContainer">
-      <p>Countries you wish to visit:</p>
+      <p id = "bucketListHeader">Countries List:</p>
       <ul id="countries"></ul>
       <button id="deleteButton" type="submit">Delete List</button></div>
     <div id='furtherInfo'></div>
diff --git a/client/build/styles.css b/client/build/styles.css
index 7aba2ea..f0f7ff0 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -30,9 +30,42 @@ footer{
 }
 
 ul{
+  padding-left: 0;
+  padding-bottom: 20px;
   list-style: none;
 }
 
+button{
+  padding-top: 5px;
+  border: none;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+button:hover{
+  padding-top: 5px;
+  border: none;
+  font: inherit;
+  color: inherit;
+  transition: background-color 500ms;
+  background-color: #276FBF;
+  cursor: pointer;
+}
+
+#deleteButton:hover{
+  padding-top: 5px;
+  border: none;
+  font: inherit;
+  color: inherit;
+  transition: background-color 500ms;
+  background-color: #F03A47;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
 #countryListContainer{
   display: flex;
   justify-content: center;
@@ -45,6 +78,10 @@ ul{
   vertical-align: middle;
 }
 
+#countryDropDown{
+  margin: 10px;
+}
+
 #infoPane{
   display: flex;
   justify-content: center;
@@ -59,7 +96,14 @@ ul{
   border: solid 1px black;
 }
 
+#bucketListHeader {
+font-weight: bold;
+padding-top: 15px;
+padding-bottom: 15px;
+}
+
 #bucketListContainer{
+  text-align: center;
   margin: 15px;
   margin-bottom: 40px;
   height: 300px;

From 837962972a2b89e9bde4d56a80c948127714fad2 Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 14:00:25 +0100
Subject: [PATCH 29/37] More css

---
 client/build/bundle.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 835a602..4b03bee 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,8 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n  mainMap.addMarker(coords, country);\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
-fo
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\n\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n\n  mainMap.addMarker(coords, country);\n\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
@@ -116,8 +115,7 @@ eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-
-eval("\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(country) {\n  this.bucketLists = [];\n  const ul = document.querySelector('#countries');\n  ul.innerHTML = '';\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  console.log(country);\n  li.innerText = country.name;\n  ul.appendChild(li);\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
+eval("const FurtherInfoView = __webpack_require__(/*! ./furtherInfoView.js */ \"./client/src/views/furtherInfoView.js\");\n\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(country) {\n  this.bucketLists = [];\n  const ul = document.querySelector('#countries');\n  ul.innerHTML = '';\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.id = 'country_name'\n  li.innerText = country.name;\n  ul.appendChild(li);\n  li.addEventListener('click', function(){\n    console.log(\"country has been clicked\");\n    let furtherInfo = new FurtherInfoView();\n    furtherInfo.clearContent();\n    furtherInfo.render(country);\n  });\n\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
 
 /***/ }),
 

From d425e43a7e0f6384f44bb661b86a2b5c67df2d9d Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 14:09:19 +0100
Subject: [PATCH 30/37] Additional styling

---
 client/build/index.html |  4 +++-
 client/build/styles.css | 11 +++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/build/index.html b/client/build/index.html
index 5b927ac..7de1c60 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -36,7 +36,9 @@
       <p id = "bucketListHeader">Countries List:</p>
       <ul id="countries"></ul>
       <button id="deleteButton" type="submit">Delete List</button></div>
-    <div id='furtherInfo'></div>
+    <div id='furtherInfo'>
+      <p id ='countryInfoHeader'>Country Info:</p>
+    </div>
   </div>
 </body>
 
diff --git a/client/build/styles.css b/client/build/styles.css
index f0f7ff0..73004f5 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -82,6 +82,10 @@ button:hover{
   margin: 10px;
 }
 
+#country_name{
+  cursor: pointer;
+}
+
 #infoPane{
   display: flex;
   justify-content: center;
@@ -112,7 +116,14 @@ padding-bottom: 15px;
   overflow: scroll;
 }
 
+#countryInfoHeader{
+font-weight: bold;
+padding-top: 15px;
+padding-bottom: 15px;
+}
+
 #furtherInfo{
+  text-align: center;
   margin: 15px;
   margin-bottom: 40px;
   height: 300px;

From 9b58c061c0580b7b5323509bf9664be6cffee0c5 Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 14:20:15 +0100
Subject: [PATCH 31/37] CSS complete

---
 client/build/styles.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/build/styles.css b/client/build/styles.css
index 73004f5..d6e74da 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -51,7 +51,7 @@ button:hover{
   font: inherit;
   color: inherit;
   transition: background-color 500ms;
-  background-color: #276FBF;
+  background-color: #2B7CD8;
   cursor: pointer;
 }
 
@@ -84,6 +84,7 @@ button:hover{
 
 #country_name{
   cursor: pointer;
+  padding: 5px;
 }
 
 #infoPane{
@@ -97,7 +98,6 @@ button:hover{
   margin-top: 15px;
   margin-left: 15px;
   margin-right: 15px;
-  border: solid 1px black;
 }
 
 #bucketListHeader {
@@ -112,8 +112,8 @@ padding-bottom: 15px;
   margin-bottom: 40px;
   height: 300px;
   width: 400px;
-  border: solid 1px black;
   overflow: scroll;
+  background-color: #EFEEED;
 }
 
 #countryInfoHeader{
@@ -128,6 +128,6 @@ padding-bottom: 15px;
   margin-bottom: 40px;
   height: 300px;
   width: 400px;
-  border: solid 1px black;
   overflow: scroll;
+  background-color: #EFEEED;
 }

From eb3cf92263ba2782638fe04bf139fe9e99bdcd51 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 14:25:08 +0100
Subject: [PATCH 32/37] fly to is working

---
 client/build/bundle.js             | 4 ++--
 client/src/views/bucketListView.js | 4 ++++
 client/src/views/mapWrapper.js     | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 4b03bee..13459e9 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -115,7 +115,7 @@ eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const FurtherInfoView = __webpack_require__(/*! ./furtherInfoView.js */ \"./client/src/views/furtherInfoView.js\");\n\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(country) {\n  this.bucketLists = [];\n  const ul = document.querySelector('#countries');\n  ul.innerHTML = '';\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.id = 'country_name'\n  li.innerText = country.name;\n  ul.appendChild(li);\n  li.addEventListener('click', function(){\n    console.log(\"country has been clicked\");\n    let furtherInfo = new FurtherInfoView();\n    furtherInfo.clearContent();\n    furtherInfo.render(country);\n  });\n\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
+eval("const FurtherInfoView = __webpack_require__(/*! ./furtherInfoView.js */ \"./client/src/views/furtherInfoView.js\");\n\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(country) {\n  this.bucketLists = [];\n  const ul = document.querySelector('#countries');\n  ul.innerHTML = '';\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.id = 'country_name'\n  li.innerText = country.name;\n  ul.appendChild(li);\n  li.addEventListener('click', function(){\n    console.log(\"country has been clicked\");\n    let furtherInfo = new FurtherInfoView();\n    furtherInfo.clearContent();\n    furtherInfo.render(country);\n\n    const coords = [country.latlng[0], country.latlng[1]];\n    const zoom = 6;\n    mainMap.moveMap(coords, zoom);\n  });\n\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
 
 /***/ }),
 
@@ -148,7 +148,7 @@ eval("var FurtherInfoView = function(){\n  this.country = [];\n}\n\nFurtherInfoV
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {\n\tattribution: 'Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> &mdash; Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>',\n\tsubdomains: 'abcd',\n\tminZoom: 2,\n\tmaxZoom: 15,\n\text: 'png'\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords) {\n this.map.flyTo(coords);\n};\n\nMapWrapper.prototype.addMarker = function(coords, country){\n  L.marker(coords).addTo(this.map).bindPopup(country.name);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {\n\tattribution: 'Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> &mdash; Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>',\n\tsubdomains: 'abcd',\n\tminZoom: 2,\n\tmaxZoom: 15,\n\text: 'png'\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords, zoom) {\n this.map.flyTo(coords, zoom);\n};\n\nMapWrapper.prototype.addMarker = function(coords, country){\n  L.marker(coords).addTo(this.map).bindPopup(country.name);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 
diff --git a/client/src/views/bucketListView.js b/client/src/views/bucketListView.js
index 045722f..dc88634 100644
--- a/client/src/views/bucketListView.js
+++ b/client/src/views/bucketListView.js
@@ -27,6 +27,10 @@ BucketListView.prototype.render = function(country){
     let furtherInfo = new FurtherInfoView();
     furtherInfo.clearContent();
     furtherInfo.render(country);
+
+    const coords = [country.latlng[0], country.latlng[1]];
+    const zoom = 6;
+    mainMap.moveMap(coords, zoom);
   });
 
 }
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index 48711b3..9de0dcf 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -13,8 +13,8 @@ const MapWrapper = function(containerID, coords, zoom) {
 //   this.map.setView(coords);
 // };
 
-MapWrapper.prototype.moveMap = function (coords) {
- this.map.flyTo(coords);
+MapWrapper.prototype.moveMap = function (coords, zoom) {
+ this.map.flyTo(coords, zoom);
 };
 
 MapWrapper.prototype.addMarker = function(coords, country){

From 5415fb06b16589a2b382a41777634090833dba24 Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 14:28:09 +0100
Subject: [PATCH 33/37] Markers display on page load

---
 client/build/bundle.js | 2 +-
 client/src/app.js      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 13459e9..7e7cb86 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n  }\n}\n\n\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n\n  mainMap.addMarker(coords, country);\n\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n    const coords = [country.latlng[0], country.latlng[1]];\n\n    mainMap.addMarker(coords, country);\n  }\n}\n\n\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n\n  mainMap.addMarker(coords, country);\n\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/src/app.js b/client/src/app.js
index 8ba115c..8f3f778 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -14,6 +14,9 @@ allCountries = [];
 const getAllBucketListCountries = function(allCountries){
   for(country of allCountries){
     bucketListView.render(country);
+    const coords = [country.latlng[0], country.latlng[1]];
+
+    mainMap.addMarker(coords, country);
   }
 }
 

From 4825bc79d6e7994cc086083ffdb95b8121123ed4 Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 14:51:54 +0100
Subject: [PATCH 34/37] Header for country info fixed

---
 client/build/bundle.js              | 2 +-
 client/build/styles.css             | 6 ++++++
 client/src/views/furtherInfoView.js | 3 +++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 4b03bee..1ba595f 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -137,7 +137,7 @@ eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("var FurtherInfoView = function(){\n  this.country = [];\n}\n\nFurtherInfoView.prototype.clearContent = function(){\n  let divTag = document.querySelector('#furtherInfo');\n  while (divTag.hasChildNodes()){\n    divTag.removeChild(divTag.lastChild);\n  }\n}\n\nFurtherInfoView.prototype.render = function(country){\n  let divTag = document.querySelector('#furtherInfo');\n  const ul = document.createElement('ul');\n  const name = document.createElement('li');\n  name.innerText = `Name: ${country.name}`;\n  ul.appendChild(name);\n  const capital = document.createElement('li');\n  capital.innerText = `Capital: ${country.capital}`;\n  ul.appendChild(capital);\n  const language = document.createElement('li');\n  language.innerText = `Main Language: ${country.languages[0].name}`;\n  ul.appendChild(language);\n  const pop = document.createElement('li');\n  pop.innerText = `Population: ${country.population}`;\n  ul.appendChild(pop);\n  divTag.appendChild(ul);\n}\n\nmodule.exports = FurtherInfoView;\n\n\n//# sourceURL=webpack:///./client/src/views/furtherInfoView.js?");
+eval("var FurtherInfoView = function(){\n  this.country = [];\n}\n\nFurtherInfoView.prototype.clearContent = function(){\n  let divTag = document.querySelector('#furtherInfo');\n  while (divTag.hasChildNodes()){\n    divTag.removeChild(divTag.lastChild);\n  }\n}\n\nFurtherInfoView.prototype.render = function(country){\n  let divTag = document.querySelector('#furtherInfo');\n  let header = document.createElement('p');\n  header.innerText = 'Country Info:';\n  divTag.appendChild(header);\n  const ul = document.createElement('ul');\n  const name = document.createElement('li');\n  name.innerText = `Name: ${country.name}`;\n  ul.appendChild(name);\n  const capital = document.createElement('li');\n  capital.innerText = `Capital: ${country.capital}`;\n  ul.appendChild(capital);\n  const language = document.createElement('li');\n  language.innerText = `Main Language: ${country.languages[0].name}`;\n  ul.appendChild(language);\n  const pop = document.createElement('li');\n  pop.innerText = `Population: ${country.population}`;\n  ul.appendChild(pop);\n  divTag.appendChild(ul);\n}\n\nmodule.exports = FurtherInfoView;\n\n\n//# sourceURL=webpack:///./client/src/views/furtherInfoView.js?");
 
 /***/ }),
 
diff --git a/client/build/styles.css b/client/build/styles.css
index d6e74da..0e0dae9 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -55,6 +55,12 @@ button:hover{
   cursor: pointer;
 }
 
+p{
+  font-weight: bold;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
 #deleteButton:hover{
   padding-top: 5px;
   border: none;
diff --git a/client/src/views/furtherInfoView.js b/client/src/views/furtherInfoView.js
index e10f60f..443784e 100644
--- a/client/src/views/furtherInfoView.js
+++ b/client/src/views/furtherInfoView.js
@@ -11,6 +11,9 @@ FurtherInfoView.prototype.clearContent = function(){
 
 FurtherInfoView.prototype.render = function(country){
   let divTag = document.querySelector('#furtherInfo');
+  let header = document.createElement('p');
+  header.innerText = 'Country Info:';
+  divTag.appendChild(header);
   const ul = document.createElement('ul');
   const name = document.createElement('li');
   name.innerText = `Name: ${country.name}`;

From 5d7d92398cca086341682c723e3de84c96e5747f Mon Sep 17 00:00:00 2001
From: Angelina Blyth <angelinalblyth@hotmail.com>
Date: Thu, 9 Aug 2018 14:52:19 +0100
Subject: [PATCH 35/37] Reset map

---
 client/build/bundle.js  | 2 +-
 client/build/index.html | 2 ++
 client/src/app.js       | 9 +++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/build/bundle.js b/client/build/bundle.js
index 7e7cb86..fc895c7 100644
--- a/client/build/bundle.js
+++ b/client/build/bundle.js
@@ -93,7 +93,7 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n    const coords = [country.latlng[0], country.latlng[1]];\n\n    mainMap.addMarker(coords, country);\n  }\n}\n\n\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n\n  mainMap.addMarker(coords, country);\n\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n    const coords = [country.latlng[0], country.latlng[1]];\n\n    mainMap.addMarker(coords, country);\n  }\n}\n\n\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n\n  mainMap.addMarker(coords, country);\n\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\nconst handleResetMapZoomButton = function(){\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap.moveMap(coords, zoom);\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const resetMapZoomButton = document.querySelector('#resetmapzoom')\n  resetMapZoomButton.addEventListener('click', handleResetMapZoomButton);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
 
 /***/ }),
 
diff --git a/client/build/index.html b/client/build/index.html
index 7de1c60..38357e0 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -40,6 +40,8 @@
       <p id ='countryInfoHeader'>Country Info:</p>
     </div>
   </div>
+
+  <button id="resetmapzoom" type="submit">View Map</button>
 </body>
 
 <footer><p>Created by Angelina Blyth, Roddy Daly and Peter Whittle.</p></footer>
diff --git a/client/src/app.js b/client/src/app.js
index 8f3f778..10d78a5 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -51,6 +51,12 @@ const deleteAllCountriesComplete = function(){
   mainMap.clearLayer
 }
 
+const handleResetMapZoomButton = function(){
+  const coords = [55.857236, -3.166804];
+  const zoom = 2;
+  mainMap.moveMap(coords, zoom);
+}
+
 
 const appStart = function(){
   console.log('Hello world!')
@@ -64,6 +70,9 @@ const appStart = function(){
   const deleteAllCountriesButton = document.querySelector('#deleteButton');
   deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);
 
+  const resetMapZoomButton = document.querySelector('#resetmapzoom')
+  resetMapZoomButton.addEventListener('click', handleResetMapZoomButton);
+
 
   const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
   const containerID = "mapContainer";

From 08b58692479943b1d6813db191333e2c821c93dd Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 14:56:57 +0100
Subject: [PATCH 36/37] hover effect on bucket list

---
 client/build/styles.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/build/styles.css b/client/build/styles.css
index 0e0dae9..a050627 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -93,6 +93,14 @@ p{
   padding: 5px;
 }
 
+#country_name:hover{
+  cursor: pointer;
+  padding: 5px;
+  transition: background-color 500ms;
+  background-color: #2B7CD8;
+  border-radius: 3px;
+}
+
 #infoPane{
   display: flex;
   justify-content: center;

From cb231c6316dd3e601fbf50d4230d1a065591d274 Mon Sep 17 00:00:00 2001
From: Pete Whittle <peterwhittle75@gmail.com>
Date: Thu, 9 Aug 2018 15:01:39 +0100
Subject: [PATCH 37/37] Styled map reset button

---
 client/build/index.html | 3 +--
 client/build/styles.css | 4 ++++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/build/index.html b/client/build/index.html
index 38357e0..ff04a3d 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -29,7 +29,7 @@
   </div>
 
   <div id="mapContainer"></div>
-
+<button id="resetmapzoom" type="submit">Reset Zoom</button>
   <div id= "infoPane">
 
     <div id="bucketListContainer">
@@ -41,7 +41,6 @@
     </div>
   </div>
 
-  <button id="resetmapzoom" type="submit">View Map</button>
 </body>
 
 <footer><p>Created by Angelina Blyth, Roddy Daly and Peter Whittle.</p></footer>
diff --git a/client/build/styles.css b/client/build/styles.css
index a050627..d43f478 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -61,6 +61,10 @@ p{
   padding-bottom: 15px;
 }
 
+#resetmapzoom{
+  margin-left: 15px;
+}
+
 #deleteButton:hover{
   padding-top: 5px;
   border: none;