You are to create a web app using HTML5, CSS, jQuery and JavaScript as per the specifications given below, so that the app allows the user to book tickets for selected movie and provide their contact and payment information when confirming the order.

(15 points) Create a GitHub repository having name STUDENTID_CSD2214_1_TEST1_MovieTickets and add atleast 30 commits to prove your work progress. 0.5 point per commit will be allocated.

(20 points) Create a home page for your app that displays predefined list of movie names and their ticket price in a dropdown list, seat map of a theater (6 rows, 10 columns), legends indicating colors for occupied, vacant and selected seat colors, number of selected tickets, total ticket price and a button to confirm the seat selection.

(35 points) Once the user selects any of the movies, the seat map should be updated representing existing seat allocations. Then allow the user to make selection of the seats. Once user selects the seats, they should be able click on a button to confirm the order with selected tickets. Display a confirm dialog for the same. If user confirms the order, take them to the next page. You must persist the necessary details using local storage or session storage or any other techniques you have known to.

Hint: you will need to dynamically update the CSS classes allocated to HTML element using jQuery or JavaScript

(30 points) On the next page, display the movie, selected seat numbers and total price to the user at the top of the page. Also, display HTML form for user to enter their contact details such as name, email, phone number and payment details such as credit card number, name on card, expiry date and CVV number. You must validate all the inputs using HTML5 or jQuery or JavaScript for their format of values and display if any errors. Provide a submit button to the user for submitting their details, validate the data and display an alert with all the validated information.

Note: You can use any CSS and/or jQuery /JavaScript library of your choice. Refer to the screenshot given in next page for seat map layout. I encourage you to go above and beyond for creating appropriate and nice-looking pages.

Submission Checklist:

• Make sure that your app work fine on Google Chrome. I will use the same for evaluation.
• Provide all reference link on readme file
• Write the comments explaining your code modules.
• Once you are done, submit the following on moodle:
  • Make sure to upload your correct work/files on time and no extension will be granted for any wrong submission.
  • All late/wrong submission with be marked as ABSENT and ZERO point will be awarded.
  • A zip of your entire project folder named as STUDENTID_CSD2214_1_TEST1_MovieTickets
  • A screenshot of your app screens
  • A screen-recording demonstrating the app execution
  • Put GitHub link in comment