diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/index.html | 54 | ||||
| -rw-r--r-- | client/map.html | 4 | ||||
| -rw-r--r-- | client/shoppingbasket.html | 3 | ||||
| -rw-r--r-- | client/src/index.js | 75 | ||||
| -rw-r--r-- | client/src/shoppingbasket.js | 70 | ||||
| -rw-r--r-- | client/style/main.css | 79 | ||||
| -rw-r--r-- | client/style/map.css | 7 |
7 files changed, 274 insertions, 18 deletions
diff --git a/client/index.html b/client/index.html index 41f966b..0ca5740 100644 --- a/client/index.html +++ b/client/index.html @@ -1,5 +1,4 @@ <!doctype html> - <html lang="nl"> <head> <meta charset="utf-8"> @@ -7,17 +6,22 @@ <title>Sogyo Adventure</title> <meta name="description" content="The ticket shop for Sogyo employees"> + <link rel="shortcut icon" type="image/jpg" href="img/logo_sogyo_rgb_199x200-1.jpg"/> <link rel="stylesheet" href="style/main.css"> </head> <body> + <div id="testingdivs"> + </div> + <header id="logo-header"> <img src="img/logo_sogyo_rgb_199x200-1.jpg"> </header> <header id="mainheader"> Sogyo Adventure </header> + <header id="sticky-header"> <nav> <a id="home" href="index.html"> Home @@ -39,9 +43,10 @@ Admin </a> </nav> + </header> <main> - + <div id="center-articles"> <article> <div class="parkname">De Efteling</div> <div class="parkdescription"> @@ -59,7 +64,11 @@ <label>Adults: </label><input placeholder="adults" type="number" class="numberofadults" /> <label>Kids: </label><input placeholder="kids" type="number" class="numberofkids" /> <div class="total"><span class="sign">€</span><span class="price">0,-</span></div> - <button class="orderbutton">Add to shopping basket</button> + <button class="orderbutton"> + <span class="front"> + Add to shopping basket + </span> + </button> </div> </article> @@ -80,7 +89,11 @@ <label>Adults: </label><input placeholder="adults" type="number" class="numberofadults" /> <label>Kids: </label><input placeholder="kids" type="number" class="numberofkids" /> <div class="total"><span class="sign">€</span><span class="price">0,-</span></div> - <button class="orderbutton">Add to shopping basket</button> + <button class="orderbutton"> + <span class="front"> + Add to shopping basket + </span> + </button> </div> </article> @@ -101,7 +114,11 @@ <label>Adults: </label><input placeholder="adults" type="number" class="numberofadults" /> <label>Kids: </label><input placeholder="kids" type="number" class="numberofkids" /> <div class="total"><span class="sign">€</span><span class="price">0,-</span></div> - <button class="orderbutton">Add to shopping basket</button> + <button class="orderbutton"> + <span class="front"> + Add to shopping basket + </span> + </button> </div> </article> @@ -122,7 +139,11 @@ <label>Adults: </label><input placeholder="adults" type="number" class="numberofadults" /> <label>Kids: </label><input placeholder="kids" type="number" class="numberofkids" /> <div class="total"><span class="sign">€</span><span class="price">0,-</span></div> - <button class="orderbutton">Add to shopping basket</button> + <button class="orderbutton"> + <span class="front"> + Add to shopping basket + </span> + </button> </div> </article> @@ -143,7 +164,11 @@ <label>Adults: </label><input placeholder="adults" type="number" class="numberofadults" /> <label>Kids: </label><input placeholder="kids" type="number" class="numberofkids" /> <div class="total"><span class="sign">€</span><span class="price">0,-</span></div> - <button class="orderbutton">Add to shopping basket</button> + <button class="orderbutton"> + <span class="front"> + Add to shopping basket + </span> + </button> </div> </article> @@ -164,7 +189,11 @@ <label>Adults: </label><input placeholder="adults" type="number" class="numberofadults" /> <label>Kids: </label><input placeholder="kids" type="number" class="numberofkids" /> <div class="total"><span class="sign">€</span><span class="price">0,-</span></div> - <button class="orderbutton">Add to shopping basket</button> + <button class="orderbutton"> + <span class="front"> + Add to shopping basket + </span> + </button> </div> </article> @@ -185,12 +214,17 @@ <label>Adults: </label><input placeholder="adults" type="number" class="numberofadults" /> <label>Kids: </label><input placeholder="kids" type="number" class="numberofkids" /> <div class="total"><span class="sign">€</span><span class="price">0,-</span></div> - <button class="orderbutton">Add to shopping basket</button> + <button class="orderbutton"> + <span class="front"> + Add to shopping basket + </span> + </button> </div> </article> + </div> </main> <script src="src/index.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/client/map.html b/client/map.html index 35347a8..4bcf373 100644 --- a/client/map.html +++ b/client/map.html @@ -19,6 +19,7 @@ <header id="mainheader"> Sogyo Adventure </header> + <header id="sticky-header"> <nav> <a id="home" href="index.html"> Home @@ -40,6 +41,7 @@ Admin </a> </nav> + </header> <main> @@ -51,4 +53,4 @@ <script src="src/index.js"></script> </body> -</html>
\ No newline at end of file +</html> 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 @@ </template> </body> -</html>
\ No newline at end of file + <script src="src/shoppingbasket.js"></script> +</html> 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%; +} |