Sogyo Adventure

- +

De Efteling

@@ -59,7 +64,11 @@ Adults: Kids:

€0,-

- +

@@ -80,7 +89,11 @@ Adults: Kids:

€0,-

- +

@@ -101,7 +114,11 @@ Adults: Kids:

€0,-

- + @@ -122,7 +139,11 @@ Adults: Kids:

€0,-

- + @@ -143,7 +164,11 @@ Adults: Kids:

€0,-

- + @@ -164,7 +189,11 @@ Adults: Kids:

€0,-

- + @@ -185,12 +214,17 @@ Adults: Kids:

€0,-

- + +

@@ -51,4 +53,4 @@ - \ No newline at end of file + diff --git a/client/shoppingbasket.html b/client/shoppingbasket.html index 707e147..720c463 100644 --- a/client/shoppingbasket.html +++ b/client/shoppingbasket.html @@ -54,4 +54,5 @@ - \ No newline at end of file + + diff --git a/client/src/index.js b/client/src/index.js index e69de29..13d7219 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -0,0 +1,75 @@ +function orderButtonClicked(event) { + console.log("button click"); + var button; + if (event.target.classList.contains("orderbutton")) { + button = event.target; + } else { + button = event.target.parentNode; + } + var node = button.previousElementSibling; + var adults; + var kids; + var parkName; + while (true) { + if (node.classList.contains("numberofkids")) { + kids = Number(node.value); + } + if (node.classList.contains("numberofadults")) { + adults = Number(node.value) + } + if (node.classList.contains("parkname")) { + parkName = node.innerText; + break + } + if (node.previousElementSibling == null) { + node = node.parentNode; + } else { + node = node.previousElementSibling; + } + } + + if (kids > 0 || adults > 0) { + saveOrderInShoppingBasket(parkName, adults, kids); + } +}; + +function saveOrderInShoppingBasket(name, adults, kids) { + var order = { + name: name, + adults: adults, + children: kids, + }; + var orderString = JSON.stringify(order); + localStorage.setItem(localStorage.length + 1, orderString) + document.querySelector(".badge").innerText = localStorage.length; +} + +document.querySelector(".badge").innerText = localStorage.length; +var buttons = document.querySelectorAll(".orderbutton"); + + +for (var i = 0; i < buttons.length; i++) { + console.log(buttons[i]); + buttons[i].addEventListener("click", orderButtonClicked); +} + + +// When the user scrolls the page, execute myFunction +window.onscroll = function() {myFunction()}; + +// Get the header +var header = document.getElementById("sticky-header"); + +// Get the offset position of the navbar +var sticky = header.offsetTop; + +// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position +function myFunction() { + if (window.pageYOffset > sticky) { + header.classList.add("sticky"); + } else { + header.classList.remove("sticky"); + } +} + + diff --git a/client/src/shoppingbasket.js b/client/src/shoppingbasket.js index e69de29..c23c02c 100644 --- a/client/src/shoppingbasket.js +++ b/client/src/shoppingbasket.js @@ -0,0 +1,70 @@ +document.querySelector(".badge").innerText = localStorage.length; + +function getOrderArray() { + var orders = new Array; + for (let i = 0; i < localStorage.length; i++) { + var order = localStorage.getItem(i+1); + order = JSON.parse(order); + orders.push(order); + } + // console.log(orders); + return orders; +} + +class Order { + constructor(orderJSON) { + for (const [key, value] of Object.entries(orderJSON)) { + this[key] = value; + } + + } + + addToMain() { + // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template + var main = document.querySelector("main"); + var template = document.querySelector("#ticket"); + + var clone = template.content.cloneNode(true); + // console.log(clone); + var lines = clone.querySelectorAll("div"); + + for (var i = 0; i < lines.length; i++) { + var text = lines[i].textContent; + + if (text === "Parkname") { + console.log(this.name); + lines[i].textContent = this.name; + } + + if (text.toLowerCase().includes("adults")) { + lines[i].textContent = text + " " + this.adults; + } + + if (text.toLowerCase().includes("kids")) { + lines[i].textContent = text + " " + this.children; + } + } + + main.appendChild(clone); + } +} + + +function displayOrders() { + var orders = getOrderArray(); + for (let i = 0; i < orders.length; i++) { + orderObj = new Order(orders[i]); + orderObj.addToMain(); + } + +} + +displayOrders(); + +function finalizePayment(event) { + console.log("finalizing payments"); + localStorage.clear(); + window.location.replace("orderplaced.html"); +} + +document.querySelector("#finalizepaymentbutton").addEventListener("click", finalizePayment); diff --git a/client/style/main.css b/client/style/main.css index b6aabb5..7ec539a 100644 --- a/client/style/main.css +++ b/client/style/main.css @@ -15,6 +15,39 @@ body { color: white; } +#sticky-header { + display: block; + z-index: +1; +} + +#center-articles { + position: relative; +} + +/* The sticky class is added to the header with JS when it reaches its scroll position */ +.sticky { + position: fixed; + top: 0; + width: 100% +} + +/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ +.sticky + .content { + padding-top: 102px; +} + +a:link, a:visited { + color: white; +} + +a:hover { + color: cyan; +} + +a:link:active, a:visited:active { + color: green; +} + #logo-header { display: flex; justify-content: flex-start; @@ -33,7 +66,9 @@ nav { height: 2rem; line-height: 2rem; - background-color: var(--accent-color); + background-color: darkgrey; + text-align: center; + } /* Describes the styling of all elements with class="parkname", note the . in front of parkname */ @@ -50,6 +85,9 @@ article { border: 1px solid var(--primary-color); color: var(--light-text-color); margin: 5px; + display: block; + top: 50%; + left: 50%; } .order { @@ -58,9 +96,44 @@ article { .badge { background-color: red; - display: none; + display: inline-block; color: white; font-weight: bold; width: 25px; border-radius: 25px; -} \ No newline at end of file +} + + +.orderbutton { + background: hsl(170deg 0% 64%); + border-radius: 12px; + border: none; + padding: 0; + cursor: pointer; + outline-offset: 4px; + margin: 20px; +} +.front { + display: block; + padding: 12px 42px; + border-radius: 12px; + font-size: 1.25rem; + background: var(--primary-color); + color: white; + transform: translateY(-4px); + transition: + transform 600ms + cubic-bezier(.3, .7, .4, 1); +} + +.orderbutton:hover .front { + transform: translateY(-6px); + transition: + transform + 250ms + cubic-bezier(.3, .7, .4, 1.5); +} + +.orderbutton:active .front { + transform: translateY(-2px); +} diff --git a/client/style/map.css b/client/style/map.css index f8254d3..39d3a8a 100644 --- a/client/style/map.css +++ b/client/style/map.css @@ -2,6 +2,7 @@ height: 100%; width: 100%; background-color: brown; + display: flex; } body { @@ -10,6 +11,6 @@ body { } main { - height: 100%; - width: 100%; -} \ No newline at end of file + height: 90%; + width: 95%; +} diff --git a/main.js b/main.js index f10447d..6b942d7 100644 --- a/main.js +++ b/main.js @@ -1,11 +1,11 @@ /** * Server side code using the express framework running on a Node.js server. - * + * * Load the express framework and create an app. */ const express = require('express'); const app = express(); -/** +/** * Host all files in the client folder as static resources. * That means: localhost:8080/someFileName.js corresponds to client/someFileName.js. */ @@ -20,7 +20,7 @@ app.use(express.json()); * Our code starts here. */ const attractions = [ - { + { name: "De Efteling", description: "The Dutch fairy tale themed park. In high demand!", adultPrice: 32, @@ -32,7 +32,7 @@ const attractions = [ location: { lat: 51.649718, lon: 5.043689 }, }, - { + { name: "Madurodam", description: "The Netherlands smallest theme park.", adultPrice: 25, @@ -44,7 +44,7 @@ const attractions = [ location: { lat: 52.0994779, lon: 4.299619900000039 }, }, - { + { name: "Toverland", description: "Experience magic and wonder.", adultPrice: 30, @@ -56,7 +56,7 @@ const attractions = [ location: { lat: 51.3968994, lon: 5.9825161 }, }, - { + { name: "Walibi Holland", description: "Need an Adrenaline Rush?", adultPrice: 37, @@ -67,8 +67,8 @@ const attractions = [ available: 20, location: { lat: 52.438554, lon: 5.766986 }, }, - - { + + { name: "Duinrell", description: "From the Kikkerbaan to the Tikibad.", adultPrice: 22, @@ -78,9 +78,9 @@ const attractions = [ discount: 7, available: 20, location: { lat: 52.147433, lon: 4.383922 }, - }, + }, - { + { name: "Slagharen", description: "Fun for the whole family in a true western style.", adultPrice: 28, @@ -90,9 +90,9 @@ const attractions = [ discount: 50, available: 2, location: { lat: 52.6249522, lon: 6.563149500000009 }, - }, + }, - { + { name: "Drievliet", description: "Come and experience our wonderful attractions.", adultPrice: 26, @@ -102,18 +102,18 @@ const attractions = [ discount: 25, available: 0, location: { lat: 52.052608, lon: 4.352633 }, - }, + }, ] /** * A route is like a method call. It has a name, some parameters and some return value. - * + * * Name: /api/attractions * Parameters: the request as made by the browser * Return value: the list of attractions defined above as JSON - * + * * In addition to this, it has a HTTP method: GET, POST, PUT, DELETE - * + * * Whenever we make a request to our server, * the Express framework will call one of the methods defined here. * These are just regular functions. You can edit, expand or rewrite the code here as needed. @@ -151,4 +151,4 @@ app.get("/api/admin/edit", function (request, response) { * Make our webserver available on port 8000. * Visit localhost:8000 in any browser to see your site! */ -app.listen(8000, () => console.log('Example app listening on port 8000!')); \ No newline at end of file +app.listen(8000, () => console.log('Example app listening on port 8000!')); -- cgit v1.2.3