4 files changed, 71 insertions, 3 deletions
diff --git a/client/src/index.js b/client/src/index.js
index f9ee48d..0b8e676 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,5 +1,10 @@
 import { ParkArticle } from "./templateImplementations.js";
-import { displayNumberOfItemsInShoppingBasketWithBadge, dutchCurrencyFormat, dutchCurrencyFormatWithSign } from "./utils.js";
+import {
+    displayNumberOfItemsInShoppingBasketWithBadge,
+    dutchCurrencyFormat,
+    dutchCurrencyFormatWithSign,
+    findParent
+} from "./utils.js";
 import { fetchAttractions } from "./functions.js"
 
 
@@ -216,7 +221,8 @@ function calulateTotal(numberOfKids, numberOfAdults, serverSideAttraction) {
 
 function displayTotal(event) {
     console.log("displaying a total price based on client side info");
-    var order = event.target.parentNode;
+    var order = findParent(parent => {return parent.classList.contains("order")})(event.target)
+    console.log(order)
     var total = order.querySelector(".total");
 
     var kids = order.querySelector(".numberofkids").value;
diff --git a/client/src/map.js b/client/src/map.js
new file mode 100644
index 0000000..10f2d66
--- /dev/null
+++ b/client/src/map.js
@@ -0,0 +1,41 @@
+import { fetchAttractions } from "./functions.js"
+import { ParkArticle } from "./templateImplementations.js"
+
+// replace "toner" here with "terrain" or "watercolor"
+var layer = new L.StamenTileLayer("watercolor");
+var map = new L.Map("discoverablemap", {
+    center: new L.LatLng(52.1026406, 5.175044799999999),
+    zoom: 10
+});
+map.addLayer(layer);
+
+function addMarkersForAttractions(map) {
+    return function addMarkers(attractions) {
+        for (let i = 0; i < attractions.length; i++) {
+            const attraction = attractions[i];
+            const location = attraction.location;
+
+            const marker = L.marker([location.lat, location.lon]).addTo(map);
+
+            const articleObj = new ParkArticle(attraction, document.querySelector("parkpopup"))
+            console.log(articleObj)
+            const parkArticleFunctionality = {
+                orderButtonClick: orderButtonClicked,
+                displayTotal: displayTotal,
+                disableButton: disableButton,
+            }
+            const articleHTML = articleObj.toHTML(parkArticleFunctionality);
+            console.log(articleHTML);
+
+
+            marker.bindPopup(
+                articleHTML
+            )
+
+        }
+    }
+}
+
+
+ fetchAttractions()
+        .then(addMarkersForAttractions(map));
diff --git a/client/src/templateImplementations.js b/client/src/templateImplementations.js
index 9db0271..5767a84 100644
--- a/client/src/templateImplementations.js
+++ b/client/src/templateImplementations.js
@@ -50,6 +50,16 @@ export class Order extends TemplatedNode {
 export class ParkArticle extends TemplatedNode {
 
     addToNode(node, parkArticleFunctionality) {
+        const clone = this.cloneTemplateAndFillInHTML(parkArticleFunctionality);
+        node.appendChild(clone);
+    }
+
+    toHTML(parkArticleFunctionality) {
+        return this.cloneTemplateAndFillInHTML(parkArticleFunctionality);
+
+    }
+
+    cloneTemplateAndFillInHTML(parkArticleFunctionality) {
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
 
         var clone = this.template.content.cloneNode(true);
@@ -91,6 +101,6 @@ export class ParkArticle extends TemplatedNode {
             inputElements[i].addEventListener("input", parkArticleFunctionality.displayTotal);
             inputElements[i].addEventListener("input", parkArticleFunctionality.disableButton(this.name, button));
         }
-        node.appendChild(clone);
+        return clone;
     }
 }
diff --git a/client/src/utils.js b/client/src/utils.js
index 03416f0..5a0423d 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -28,6 +28,17 @@ export function findParentWithTag(tagName) {
     }
 }
 
+export function findParent(func) {
+    return function startingFromThisNode(node) {
+        if (func(node)) {
+            return node;
+        } else {
+            return startingFromThisNode(node.parentNode);
+        }
+    }
+}
+
+
 export function childKillerUsingTags(parent) {
 
     return function oneOfMyChildren(child) {