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.
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 thebg-blue-100
class from TailwindCSS. The layout is structured using flexbox classes likemin-h-screen
,flex
,justify-center
, anditems-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 likebg-white
,p-8
,rounded-lg
,shadow-md
,container
, andmax-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)
andchangeSeatType()
based on user interactions. -
Methods like
getElementById()
andtextContent
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 >
</ 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 >
|
Output:
Recommended Articles