Let's go further by implementing the frontend of our application. Create an index.html file with the following content:
<!DOCTYPE html>
<html>
<head>
<style>
button:disabled { color: red; }
.my-booking:disabled { font-weight: bold; color: green; }
</style>
</head>
<body>
<h1>Book a Seat</h1>
<h2 id="movie-label">Seats</h2> <!-- wraps movie id -->
<div id="seats_container"/> <!-- wraps seats buttons matrix -->
<script>
// script goes here
</script>
</body>
</html>
In our HTML, we have included two key UI elements:
- movie-label: A label that displays the current movie ID
- seats_container: A div that will contain the buttons matrix for the current movie seats
Now, let's write the required script. We request ...
