Introduction :

An innovative Ticket Management System, where simplicity and efficiency

converge to redefine the ticket booking experience. Designed to cater to
diverse event management needs, our system empowers users with seamless
booking capabilities, automated ticket generation, and convenient access to
booking history.
With an intuitive interface crafted using HTML, we invite users to effortlessly
navigate through the booking process. Our structured layout ensures clarity
and ease of use, guiding users to input their details and reserve their desired
seats with utmost convenience.
CSS elevates the visual appeal of our system, with
captivating designs and responsive layouts that adapt seamlessly to various
devices. From vibrant color schemes to sleek animations, our CSS styling
enhances user engagement and creates a visually pleasing experience.
JavaScript drives interactivity at every stage, enabling dynamic features such
as real-time validation and error handling. Through client-side scripting, we
provide instant feedback, ensuring a smooth and intuitive booking journey for
our users.
Central to our system is the automatic generation and storage of ticket IDs,
eliminating the need for manual intervention. Users can easily view their
booking history, complete with ticket details and unique IDs, offering
transparency and accountability in the booking process.
Moreover, our integrated view history feature provides users with the option
to review past bookings and seamlessly delete them if needed. With just a few
clicks, users can manage their bookings efficiently, ensuring a clutter-free and
organized ticketing experience.
“Welcome to our Ticket Management System – effortless event planning,
streamlined ticketing.”
Steps to Create Ticket Management System
 Plan and Define Requirements: Clearly define the objectives and
requirements of your Ticket Management System. Determine what
features you want to include, such as booking tickets, viewing booking
history, and deleting bookings.
  Design User Interface: Sketch out the layout and design of your ticket
management system. Decide on the placement of elements such as
input fields for booking details, buttons for submitting bookings and
viewing history, and tables for displaying booking history.
 Set Up HTML Structure: Create the HTML file for your ticket
management system. Structure the file with appropriate tags for
elements like forms, input fields, buttons, and tables.
 Style with CSS: Write CSS code to style your ticket management system.
Apply styles to enhance the appearance of elements, such as setting
colors, fonts, padding, and margins.
 Implement Functionality with JavaScript:Add event listeners to capture
user interactions, such as form submissions and button clicks.Write
JavaScript functions to handle these interactions, such as booking tickets,
displaying booking history, and deleting bookings.Implement logic to
generate unique ticket IDs and store booking details.
 Test and Debug: Test your ticket management system thoroughly to
ensure it functions as expected. Check for any bugs or errors and debug
them as necessary.

Explanation :
HTML (index.html)
The HTML code serves as the backbone of our Ticket Management System,
providing the structural framework for a user-friendly interface. We begin by
defining the document type and language to ensure compatibility and
accessibility across platforms.
Next, we set up the viewport meta tag to optimize the display on various
devices, ensuring a responsive design that adapts to different screen sizes. The
title tag sets the stage for our system, giving users a clear understanding of its
purpose.
For Crafting the User Experience our system’s interface is designed to be
intuitive and straightforward, guiding users through the ticket booking process
with ease. The HTML markup includes elements such as forms and buttons,
allowing users to input their booking details and navigate the system
effortlessly.
The form element, identified by its unique ID, houses input fields for essential
booking information, such as name, seat number, date, and location. This
structured approach ensures clarity and consistency, making it easy for users to
provide the necessary details.
Additionally, the inclusion of a “View History” button provides users with
access to their booking history, enhancing transparency and accountability in
the ticket management process.
For Displaying Booking History, our Ticket Management System goes beyond
just booking tickets; it also allows users to view their booking
history conveniently. The HTML code includes a section dedicated to displaying
this history, complete with a table that dynamically populates with ticket
details.
When users click the “View History” button, the table becomes visible,
presenting ticket information such as ticket ID, name, seat number, date, and
locations. This organized display enables users to track their bookings
effectively and make informed decisions.
Integrating Interactive Functionality, JavaScript functionality is seamlessly
integrated into the system. While not explicitly shown in the HTML code,
JavaScript enhances the user experience by adding interactivity and dynamic
features such as form validation, error handling, and the generation of unique
ticket IDs.
By combining HTML, CSS, and JavaScript, our Ticket Management System offers
users unparalleled convenience and control over their event bookings.
CSS Styling
 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.
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.

Source Code :
HTML (index.html)
<!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="stylesheet" type="text/css" href="styles.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">
<!-- Ticket history rows will be dynamically added here -->
</tbody>
</table>
</div>

<script src="script.js"></script>

</body>
</html>

CSS (styles.css)
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;
}

JS (script.js)

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.");
}
});

Output: