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

  1. Total number of reservation by system
  2. Reservation per train
  3. 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>