Create a webpage and write a program in Java Script to show the reservation system of XYZ train. Assume total 3 different routes (each route is containing 3 different trains with 5 seats capacity each). The document should contain a form with radio buttons that allows user to select date and time for which reservation has to be booked. On reservation for a particular train it should prompt a message for successful entry otherwise unavailability. The program should display the output as
- Total number of reservation by system
- Reservation per train
- Reservation per route
HTML Page
<!DOCTYPE html>
<head>
<title>XYZ Train Reservation System</title>
</head>
<body>
<h1>XYZ Train Reservation System</h1>
<form id=”reservationForm”>
<label for=”route”>Select Route:</label>
<select id=”route” name=”route”>
<option value=”route1″>Route 1</option>
<option value=”route2″>Route 2</option>
<option value=”route3″>Route 3</option>
</select>
<label for=”train”>Select Train:</label>
<select id=”train” name=”train”>
<option value=”train1″>Train 1</option>
<option value=”train2″>Train 2</option>
<option value=”train3″>Train 3</option>
</select>
<label for=”dateTime”>Select Date and Time:</label>
<input type=”datetime-local” id=”dateTime” name=”dateTime”>
<button type=”button” onclick=”makeReservation()”>Make Reservation</button>
</form>
<div id=”output”>
<h2>Reservation Statistics</h2>
<p>Total Reservations: <span id=”totalReservations”>0</span></p>
<p>Reservations per Train:</p>
<ul id=”reservationsPerTrain”></ul>
<p>Reservations per Route:</p>
<ul id=”reservationsPerRoute”></ul>
</div>
CSS Page
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
button {
margin-top: 10px;
padding: 5px 10px;
cursor: pointer;
}
#output {
margin-top: 20px;
}
</style>
JavaScript Page
<script>
let totalReservations = 0;
let reservationsPerTrain = {};
let reservationsPerRoute = {};
function makeReservation() {
const route = document.getElementById(‘route’).value;
const train = document.getElementById(‘train’).value;
const dateTime = document.getElementById(‘dateTime’).value;
// Check if the selected train has available seats
if (reservationsPerTrain[train] === undefined) {
reservationsPerTrain[train] = 0;
}
if (reservationsPerRoute[route] === undefined) {
reservationsPerRoute[route] = 0;
}
if (reservationsPerTrain[train] < 5) {
totalReservations++;
reservationsPerTrain[train]++;
reservationsPerRoute[route]++;
alert(‘Reservation successful!’);
} else {
alert(‘Sorry, the selected train is fully booked.’);
}
updateReservationStatistics();
}
function updateReservationStatistics() {
document.getElementById(‘totalReservations’).innerText = totalReservations;
const reservationsPerTrainList = document.getElementById(‘reservationsPerTrain’);
reservationsPerTrainList.innerHTML = ”;
for (const train in reservationsPerTrain) {
const listItem = document.createElement(‘li’);
listItem.innerText = `${train}: ${reservationsPerTrain[train]}`;
reservationsPerTrainList.appendChild(listItem);
}
const reservationsPerRouteList = document.getElementById(‘reservationsPerRoute’);
reservationsPerRouteList.innerHTML = ”;
for (const route in reservationsPerRoute) {
const listItem = document.createElement(‘li’);
listItem.innerText = `${route}: ${reservationsPerRoute[route]}`;
reservationsPerRouteList.appendChild(listItem);
}
}
</script>
</body>