We need a very simple booking prototype using localStorage. You will use canvas to draw the Squares representing the seats. No databases, nothing, only using localstorage.
You will create a page with a booking system for a flight with 18 available places, the six first being dedicated to business class and other economy classes.
All data in the reservation system must be saved using sessionStorage. This means that you can "jump" between the pages while the current data is retained (persistent)!
You must divide the booking page vertically into two parts. When loading the page, a table of three columns and six lines (3x6) should be drawn in the right hand side to represent the aircraft seats. Here it should be stated which seats are available by giving these cells a GREEN background and booked places must have a RED background. In the left part there must be entry fields for first name, last name, social security number (YYYY-MM-DD-XXXX) and class labels (ie business or economy class) and location number.
The visitor should be able to click on a free space, that is to say. a GREEN box and then it will change color to BLUE. At the same time, labels for class and place number must be changed to the place chosen and the class in question.
The application should check that you can not select an already booked (busy) location and that the plane can not be overbooked!
The reservation is saved in an array where the aircraft seats are represented by rows of three places in each row. The design of the array you decide on yourself!
In the booking form (left side) you must be able to enter first name, last name and social security number. There must be two buttons, one to complete the booking and one to clear all selections (including seat selection)!
Once the button has been pressed to book and the current boardingcard is printed, the flight deck table (right side) must be updated prior to booking the next customer. The form on the left side of the page should be "reset" so the fields for first name, last name and social security number will be blank.
SEATS 1-6 Bussinessclass
SEATS 7-18 ECONOMYCLASS