Ticket Management System Using HTML, CSS & JS
Introduction
A new dimension in ticket management, where simplicity and efficiency meet to redefine the ticket booking experience. It will be designed to cater to the diversified event management requirement by empowering the user with seamless booking capabilities, automated generation of tickets, and convenient accessibility to booking history.
An intuitive interface can be used to spell out the ease of use when users log in with an intuitive interface crafted using HTML. Having a structured layout, all a user needs to do is input their details and reserve seats with utmost convenience.
CSS enhances the aesthetic value of our system through captivating designs that have responsive layouts and work on all devices. From bright coloring to sleek animations, our CSS styling has greatly influenced user engagement and created a sleek, clean, appealing experience.
It’s JavaScript all the way, taking control of interactivity with dynamic features such as real-time validation and error handling. We instill real-time feedback to ensure that users get a smooth and intuitive booking journey through client-side scripting.
It is cardinal to our system that a ticket ID creation and storing automated system excludes manual intervention. One can view their booking history with detailed tickets attached with unique IDs, thus yielding transparency and accountability for one’s bookings.
Also, thanks to our integrated view history feature, users are allowed the chance to review their past bookings and, if need be, eliminate them. With just a few clicks, users can easily handle bookings for a clear and organized ticketing experience.
“Welcome to our Ticket Management System – effortless event planning, streamlined ticketing.”.
Index.html
The HTML code is our skeleton for our Ticket Management System. This will provide the structural framework of this user-friendly interface. We will start by defining the document type and language for compatibility and accessibility across platforms.
Next, we set up the meta viewport tag so that it displays perfectly on all devices—the responsive design will ensure a good user experience on all screen dimensions. The title tag introduces to the user the purpose of the system, setting up what the program will do.
In enhancing the user experience in ticket bookings, our system interfaces are user-friendly and clear, thus able to help users go through the process of booking tickets with ease. This also involves the use of HTML markup in elements such as forms and buttons for inputting information on the details of bookings and the navigation through the system.
Most of the essential booking information, such as name, seat number, date, and location, is inputted inside the form element with a unique ID. This structure gives clarity and uniformity to the users in filling up the required details.
Second, a “View History” button makes available the history of bookings to the user so that the ticket management process becomes transparent and accountable.
Our Ticket Management System does a lot more; it books tickets, and it also allows the end users to view their booking history at their convenience. The HTML code includes a section dedicated for display of this history, complete with a table that dynamically populates these ticket details.
Upon clicking the “View History” button, a table will pop up that contains the history of tickets, which includes ticket ID, name, seat number, date, and locations. This is in tabular form for clarity to allow a user to track their bookings effectively and come up with appropriate decisions.
Integrated JavaScript functionality to make the system interactive. Though it won’t show explicitly in the HTML code, JavaScript makes the user experience interactive and dynamic, with form validation, error handling, generation of unique ticket IDs, etc.
With the integrated development of HTML, CSS, and JavaScript, our Ticket Management System assures users incomparable convenience and control of their bookings toward any kind of event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticket Management System</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/07/post1.png 741w, https://developergoutam.com/wp-content/uploads/2024/07/post1-298x300.png 298w, https://developergoutam.com/wp-content/uploads/2024/07/post1-150x151.png 150w, https://developergoutam.com/wp-content/uploads/2024/07/post1-450x453.png 450w, https://developergoutam.com/wp-content/uploads/2024/07/post1-600x604.png 600w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="background-img">
<div class="ticket-section">
<form id="ticket-form">
<h2>Ticket Management System</h2>
<input type="text" id="name" placeholder="Name" required><br>
<input type="text" id="seat" placeholder="Seat No" required><br>
<input type="date" id="date" required><br>
<input type="text" id="from" placeholder="From Location" required><br>
<input type="text" id="to" placeholder="To Location" required><br>
<input type="submit" value="Book Ticket">
</form>
<button id="view-history-btn">View History</button>
</div>
</div>
<div id="ticket-history" style="display: none;">
<h3>Ticket History</h3>
<table id="history-table">
<thead>
<tr>
<th>Ticket ID</th>
<th>Name</th>
<th>Seat No</th>
<th>Date</th>
<th>From Location</th>
<th>To Location</th>
<th>Action</th>
</tr>
</thead>
<tbody id="history-table-body">
</tbody>
</table>
</div> <script src="script.js" defer data-deferred="1"></script>
</body>
</html>
style.css
- Body Styles:
The body selector lays the groundwork for our Ticket Management System’s visual appeal and readability. By employing a familiar font stack including Arial and sans-serif fallbacks, we ensure consistent legibility across various platforms. The chosen background color of #f1f1f1 creates a calming backdrop for the system, promoting user focus and clarity. - Background Image Container Styling:
Within the .background-img class, we define the essential styling parameters for the container housing our ticket management section. The transparent background color (rgba(255, 255, 255, 0.8)) adds a subtle overlay effect to the background image, enhancing readability without overshadowing the content. The specified padding, border radius, and maximum width ensure a visually pleasing and well-contained layout, maintaining a balance between aesthetics and functionality. - Header Styles:
Our ticket management system’s header design exudes professionalism and clarity. The centered alignment and color (#333) of the h2 element ensure prominent visibility and readability, guiding users seamlessly through the booking process. - Ticket Booking Section Layout:
The .ticket-section class governs the layout of the ticket booking section, establishing a maximum width and centered alignment for optimal presentation. By setting a maximum width of 400 pixels and utilizing auto margins, we create a visually appealing and well-structured interface that adapts gracefully to different screen sizes. - Input Field and Button Styling:
Input fields (input[type=”text”], input[type=”date”], input[type=”submit”]) are styled for consistency and usability. The specified width, padding, margin, border, and border radius ensure a uniform appearance and comfortable user interaction. The submit button is accentuated with a vibrant background color (#4CAF50), transitioning to a darker shade on hover, providing visual feedback and enhancing user engagement. - View History Button Styling:
The #view-history-btn class defines the visual presentation of the “View History” button, ensuring it stands out as a prominent call-to-action. With a bold background color (rgb(24, 24, 92)) and contrasting white text, the button commands attention and invites users to explore their booking history. The specified width, padding, margin, border, and border radius maintain consistency with other interface elements, promoting a cohesive user experience. - Ticket History Display Styles:
The #ticket-history class governs the appearance of the ticket history section, ensuring it complements the overall design aesthetic while providing clear and accessible information. A subtle margin-top adds spacing between the ticket booking section and the history display, enhancing visual separation and organization. The defined background color, padding, border radius, and box shadow create a visually appealing container for displaying booking history, while the display: none; property initially hides the section until triggered by user interaction. - Ticket History Table Styling:
The #history-table class and its associated table elements (th, td) dictate the presentation of booking history data in a structured and visually appealing format. With a collapsed border style and consistent padding, the table maintains clarity and readability, while alternating row colors enhance visual distinction and organization. The specified text alignment ensures uniformity and coherence, facilitating easy comprehension of booking details. - Delete Button Styling:
The .delete-btn class defines the visual appearance of the delete button within the ticket history table, providing users with a clear and intuitive means of managing their booking history. With a bold background color (#dc3545) and contrasting white text, the button communicates its action effectively, while the specified border radius and padding ensure comfortable interaction and visual appeal.
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
padding: 20px;
background-image: url('tkt.jpg');
background-size: cover;
background-position: center;
height: 100vh;
}
.background-img {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
max-width: 400px;
margin: 50px auto;
}
h2 {
text-align: center;
color: #333;
}
.ticket-section {
max-width: 400px;
margin: 0 auto;
}
input[type="text"], input[type="date"], input[type="submit"] {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #45a049;
}
#ticket-history {
margin-top: 20px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: none;
}
#view-history-btn{
background-color:rgb(24, 24, 92);
color: white;
cursor: pointer;
transition: background-color 0.3s;
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
#history-table {
width: 100%;
border-collapse: collapse;
}
#history-table th, #history-table td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
#history-table th {
background-color: #f2f2f2;
text-align: left;
}
#history-table td {
text-align: center;
}
.delete-btn {
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
script.js
- Streamlined Booking Process:
By attaching an event listener to the ticket booking form, we intercept the submission process. This ensures that when users submit the form, the default action of the browser is prevented, allowing us to handle the booking process programmatically. - Gathering Passenger Details:
Using JavaScript, we access the values entered by the user into the form fields. This allows us to capture essential information such as the passenger’s name, preferred seat, travel date, and departure and destination points. - Crafting Unique Ticket IDs:
To ensure each booking has a unique identifier, we generate a ticket ID using JavaScript. This ID is constructed by appending the letter ‘T’ to a randomly generated 4-digit number, creating a distinct identifier for each booking. - Building Booking History:
Upon successful form submission, we dynamically add a new row to the booking history table. This row contains the ticket ID, passenger details, and a button for deleting the booking. JavaScript enables us to seamlessly update the table with the latest booking information. - Celebrating Successful Bookings:
After a successful booking, we notify the user with an alert message, confirming the booking’s completion. Additionally, we reset the form fields to their default state, ready for the next booking. JavaScript facilitates this interaction, providing real-time feedback to the user. - Offering Booking Management:
To empower users with booking management capabilities, we implement a delete functionality. By clicking the delete button associated with a booking, users can remove it from the booking history table. JavaScript handles this functionality seamlessly, ensuring a smooth and intuitive user experience.
document.getElementById("ticket-form").addEventListener("submit", function(event) {
event.preventDefault();
// Gather user input
var name = document.getElementById("name").value;
var seat = document.getElementById("seat").value;
var date = document.getElementById("date").value;
var from = document.getElementById("from").value;
var to = document.getElementById("to").value;
// Generate ticket ID (simple demonstration)
var ticketId = "T" + Math.floor(Math.random() * 10000);
// Add ticket details to history table
var tableBody = document.getElementById("history-table-body");
var newRow = tableBody.insertRow();
newRow.innerHTML = "<td>" + ticketId + "</td><td>" + name + "</td><td>" + seat + "</td><td>" + date + "</td><td>" + from + "</td><td>" + to + "</td><td>Booked</td><td><button class='delete-btn' data-ticket-id='" + ticketId + "'>Delete</button></td>";
// Display alert for successful booking and generated ticket ID
alert("Ticket with ID " + ticketId + " has been booked successfully.");
document.getElementById("ticket-form").reset();
});
document.getElementById("view-history-btn").addEventListener("click", function() {
document.getElementById("ticket-history").style.display = "block";
});
document.getElementById("ticket-history").addEventListener("click", function(event) {
if (event.target.classList.contains('delete-btn')) {
var ticketIdToDelete = event.target.getAttribute('data-ticket-id');
// Delete ticket logic (for demonstration, we'll remove the row from table)
event.target.closest('tr').remove();
alert("Ticket with ID " + ticketIdToDelete + " has been deleted.");
}
});