For a school project I need to make a booking system for a cinema, so people can select seats where they want to sit.
One requirement is that if someone booked a chair, someone ele shouldn't be able to book it anymore.
My idea was to add a class to the selected chairs when you click "Buy tickets" on the bottom of the page, but how can I save these classes, my professors say I should use HTML 5 storage, but they refuse to help me any further.
This is a part of what I already have now:
<script>
var total = 0;
var countBlauw = 0;
var countOranje = 0;
var countRood = 0;
$(document).ready(function(){
$(".blauw").toggle(function () {
$(this).removeClass("blauw").addClass("select");
countBlauw++;
total+=7.5;
calculateTotal();
}, function() {
$(this).removeClass("select").addClass("blauw");
countBlauw--;
total-=7.5;
calculateTotal();
});
$(".oranje").toggle(function () {
$(this).removeClass("oranje").addClass("select");
countOranje++;
total+=10;
calculateTotal();
}, function() {
$(this).removeClass("select").addClass("oranje");
countOranje--;
total-=10;
calculateTotal();
});
$(".rood").toggle(function () {
$(this).removeClass("rood").addClass("select");
countRood++;
total+=15;
calculateTotal();
}, function() {
$(this).removeClass("select").addClass("rood");
countRood--;
total-=15;
calculateTotal();
});
});
</script>
<script>
function calculateTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;
}
</script>
<table style="empty-cells: hide; border-collapse:separate; border-spacing:2px; border-style:solid;" border="0">
<tr>
<td class="leeg"></td>
<td class="leeg"></td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="leeg"></td>
<td class="leeg"></td>
</tr>
And so forth.
<script>
$(window).load( function() {
document.getElementById('totalPrice').innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;
});
</script>
<div id="totalPrice"></div>
Is it possible to save the classes added with .addClass() to local or session storage? It's should only be a simulation, so it doesn't matter if someone on another computer (or with an other browser) can book the same seat.
Could someone please give me some advice? :)
ids, and store an object that tells you which seats are taken. (Like an array of taken seat IDs.)