Build a Ticket Booking Application in JavaScript and Tailwind

Last Updated : 01 Mar, 2024

The Ticket Booking application offers a platform for users to reserve tickets. Tailwind CSS is used for the styling process, ensuring a visually appealing interface with its extensive utility classes. JavaScript enhances user experience by enabling dynamic form interactions, real-time updates, and ticket generation functionalities.

Preview of final output: Let us have a look at how the fial output will look like.

Preview

Prerequisites

Approach to create Ticket Booking Application:

First, Integrate the TailwindCSS via CDN Links and create the basic structure of the webpage.
The <body> section, the background color is set to a light blue shade using the bg-blue-100 class from TailwindCSS. The layout is structured using flexbox classes like min-h-screen, flex, justify-center, and items-center, ensuring content is centered both vertically and horizontally.
Inside a container <div>, various elements such as headings, form fields, and a booking details section are styled using TailwindCSS classes like bg-white, p-8, rounded-lg, shadow-md, container, and max-w-md. These classes provide consistent styling and layout across different screen sizes.
Implement functionality for viewing available tickets, selecting seats, and completing the booking process using JavaScript. Event listeners are used to trigger functions like submitForm(event) and changeSeatType() based on user interactions.
Methods like getElementById() and textContent are used to dynamically update elements with form data and toggle the visibility of the booking details section and download ticket button.

Example: Implementation of Ticket Booking App in Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Ticket Booking</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-blue-100">
    <div class="min-h-screen flex justify-center items-center">
        <div class="bg-white p-8 rounded-lg shadow-md
                    container max-w-md">
            <h2 class="text-2xl font-semibold 
                       mb-4 text-center">
                Book Your Tickets
            </h2>
            <form action="#" method="POST" class="space-y-4"
                  id="bookingForm" onsubmit="submitForm(event)">
                <div>
                    <label for="category"
                           class="block text-sm font-medium 
                                  form-label text-gray-700">
                        Category
                    </label>
                    <select id="category" name="category"
                            class="w-full border rounded-md p-2 
                                   form-select focus:outline-none 
                                   focus:ring-2 focus:ring-blue-500 
                                   focus:border-transparent"
                            required onchange="changeSeatType()">
                        <option value="" disabled selected>
                            Select Category
                        </option>
                        <option value="bus">Bus</option>
                        <option value="train">Train</option>
                        <option value="movie">Movie</option>
                    </select>
                </div>
                <div>
                    <label for="timing" class="block text-sm 
                                               font-medium form-label
                                               text-gray-700">
                        Timing
                    </label>
                    <select id="timing" name="timing"
                            class="w-full border rounded-md p-2 
                                   form-select focus:outline-none
                                   focus:ring-2 focus:ring-blue-500 
                                   focus:border-transparent"
                        required>
                        <option value="" disabled selected>
                          Select Timing
                          </option>
                        <option value="10am">10:00 AM</option>
                        <option value="12pm">12:00 PM</option>
                        <option value="1pm">01:00 PM</option>
                        <option value="3pm">03:00 PM</option>
                        <option value="6pm">06:00 PM</option>
                        <option value="8pm">08:00 PM</option>
                    </select>
                </div>
                <div>
                    <label for="availableSeat"
                           class="block text-sm font-medium 
                                  form-label text-gray-700">
                        Available Seat</label>
                    <select id="availableSeat" name="availableSeat"
                            class="w-full border rounded-md p-2 
                                   form-select focus:outline-none 
                                   focus:ring-2 focus:ring-blue-500 
                                   focus:border-transparent"
                        required>
                        <option value="" disabled selected>
                            Select Available Seat
                        </option>
                    </select>
                </div>
                <div>
                    <label for="name"
                           class="block text-sm font-medium
                                  form-label text-gray-700">
                        Name
                    </label>
                    <input type="text" id="name" name="name"
                           class="w-full border rounded-md 
                                  p-2 form-input focus:outline-none
                                  focus:ring-2 focus:ring-blue-500
                                  focus:border-transparent"
                            placeholder="Enter name" required>
                </div>
                <div>
                    <label for="bookingDate"
                           class="block text-sm font-medium
                                  form-label text-gray-700">
                        Booking Date
                    </label>
                    <input type="date" id="bookingDate"
                           name="bookingDate"
                              class="w-full border rounded-md p-2
                                  form-input focus:outline-none
                                  focus:ring-2 focus:ring-blue-500
                                  focus:border-transparent"
                               required>
                </div>
                <div>
                    <label for="seatType"
                           class="block text-sm font-medium 
                                  form-label text-gray-700">
                        Seat Type
                    </label>
                    <select id="seatType" name="seatType"
                            class="w-full border rounded-md p-2 
                                   form-select focus:outline-none 
                                   focus:ring-2 focus:ring-blue-500
                                   focus:border-transparent"
                        required>
                        <option value="" disabled selected>
                              Select Seat Type
                          </option>
                    </select>
                </div>
                <div>
                    <button type="submit"
                            class="w-full bg-blue-500 text-white 
                                   py-2 rounded-md hover:bg-blue-600
                                   transition-colors form-button">
                        Book Now
                    </button>
                </div>
            </form>
            <div id="bookingDetails"
                 class="hidden mt-4 booking-details
                        text-gray-700">
                <h3 class="text-xl font-semibold">
                      Booking Details:
                  </h3>
                <p id="categoryDisplay"></p>
                <p id="timingDisplay"></p>
                <p id="availableSeatDisplay"></p>
                <p id="nameDisplay"></p>
                <p id="bookingDateDisplay"></p>
                <p id="seatTypeDisplay"></p>
                <p class="text-green-500 font-semibold 
                          success-message" 
                   id="successMessage">
                  </p>
                <button id="downloadTicketBtn"
                        class="bg-blue-500 text-white px-4 
                               py-2 rounded-md mt-2 hidden">
                    Download Ticket
                </button>
            </div>
        </div>
    </div>
    <script>
        function submitForm(event) {
            event.preventDefault();
            const category = document.getElementById('category').value;
            const timing = document.getElementById('timing').value;
            const availableSeat = document.getElementById('availableSeat')
                                          .value;
            const name = document.getElementById('name').value;
            const bookingDate = document.getElementById('bookingDate')
                                        .value;
            const seatType = document.getElementById('seatType').value;
            document.getElementById('categoryDisplay')
                      .textContent = `Category: ${category}`;
            document.getElementById('timingDisplay')
                      .textContent = `Timing: ${timing}`;
            document.getElementById('availableSeatDisplay')
                      .textContent = `Available Seat: ${availableSeat}`;
            document.getElementById('nameDisplay')
                      .textContent = `Name: ${name}`;
            document.getElementById('bookingDateDisplay')
                      .textContent = `Booking Date: ${bookingDate}`;
            document.getElementById('seatTypeDisplay')
                      .textContent = `Seat Type: ${seatType}`;
            document.getElementById('successMessage')
                      .textContent = 'Booking Successful!';
            document.getElementById('bookingDetails')
                      .classList.remove('hidden');
            document.getElementById('downloadTicketBtn')
                      .classList.remove('hidden');
            document.getElementById('downloadTicketBtn')
                      .onclick = downloadTicket;
        }
        function downloadTicket() {
            const category = document.getElementById('category').value;
            const timing = document.getElementById('timing')
                                   .value;
            const availableSeat = document.getElementById('availableSeat')
                                          .value;
            const name = document.getElementById('name').value;
            const bookingDate = document.getElementById('bookingDate')
                                        .value;
            const seatType = document.getElementById('seatType')
                                     .value;
            const ticketContent = `Category: ${category}\nTiming: 
                                   ${timing}\nAvailable Seat: 
                                   ${availableSeat}\nName: 
                                   ${name}\nBooking Date: 
                                   ${bookingDate}\nSeat Type: 
                                   ${seatType}`;
            const blob = new Blob([ticketContent], { type: 'text/plain' });
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = 'ticket.txt';
            link.click();
        }
        function changeSeatType() {
            const category = document.getElementById('category').value;
            const seatTypeSelect = document.getElementById('seatType');
            seatTypeSelect.innerHTML = '';
 
            // Select the availableSeat dropdown element
            const availableSeatSelect =document.getElementById('availableSeat');
 
            // Clear the options
            availableSeatSelect.innerHTML = '';
            if (category === 'bus' || category === 'train') {
                const seatOptions = ['General', 'Sleeper', 'AC'];
                seatOptions.forEach(option => {
                    const optionElement = document.createElement('option');
                    optionElement.value = option.toLowerCase();
                    optionElement.textContent = option;
                    seatTypeSelect.appendChild(optionElement);
                });
            } else if (category === 'movie') {
                const seatOptions = ['Standard', 'Premium', 'VIP'];
                seatOptions.forEach(option => {
                    const optionElement = document.createElement('option');
                    optionElement.value = option.toLowerCase();
                    optionElement.textContent = option;
                    seatTypeSelect.appendChild(optionElement);
                });
            }
            for (let i = 1; i <= 30; i++) {
                const optionElement = document.createElement('option');
                optionElement.value = i;
                optionElement.textContent = i;
                availableSeatSelect.appendChild(optionElement);
            }
        }
        window.onload = changeSeatType;
    </script>
</body>
 
</html>