On this page you can order tickets by clicking on the list items.
Clicked items get grouped and then put in an empty container
on the page. I added a sample view to clarify what the result should
be.
At this point I am stuck. I’m able to insert objects, but I don’t know
how to unpack whats inside the object. That should be the tickets
one clicked. Hopefully someone here can point me in the right
direction to solve this.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
/* Styling bullets list items */
li {
list-style: none;
}
li:before {
content: "1F3B8";
margin-right: 10px;
}
/* Styling for tickets ordered */
#order {
background-color: #b0c4de;
font-size: 120%;
}
.sample {
background-color: #b0c4de;
font-size: 120%;
}
</style>
</head>
<body>
<p>Here you'll find the prices for the tickets:</p>
<ul>
<li onclick="push(tckt1)">Saturday: €110</li>
<li onclick="push(tckt2)">Sunday: €110</li>
<li onclick="push(tckt3)">Monday: €110</li>
<li onclick="push(tckt4)">Weekend: €230</li>
</ul>
<div id="order">
</div>
<br>
// This is a sample of how the output should look.
<div class="sample">
Your order:<br>
3 Weekend-tickets à €230 = € 690<br>
1 Sunday-tickets à €110 = € 110<br>
Totaalbedrag: €800 - 10% korting à €80 = €720
</div>
<script>
const order = document.getElementById("order")
let tickets = [];
const tckt1 = {id: 1, name: "Saturday-tickets à €110", price: 110};
const tckt2 = {id: 2, name: "Sunday-tickets à €110", price: 110};
const tckt3 = {id: 3, name: "Monday-tickets à €110", price: 110};
const tckt4 = {id: 4, name: "Weekend-tickets à €230", price: 230};
// Push object in array tickets
function push(temp){
tickets.push(temp);
let res = tickets.reduce(function (x,cur){
let item = cur.id + cur.name + cur.price
if (!x[item]) x[item] = 0;
x[item] = x[item] + 1
return x
}, {})
let results = []
for (const key in res) {
const count = res[key];
const id = key.slice(0, 1)
const day = key.slice(1, 24)
const price = key.slice(24)
results.push({
id: id,
name: day,
price: price,
count: count
})
}
console.log(results)
order.innerHTML+=results[0];
}
</script>
</body>
</html>