Seat Reservation with JavaScript : In this article I will show, How to implement seat booking with Pure JavaScript. Thus, I chose to compose on it. This post discloses how to execute seat booking with JavaScript . It tends to be utilized in online Bus, flight, inn, test backing, film and ticket booking framework.

A confounding variable about train travel in an unfamiliar nation is realizing what is important and what isn’t. This is particularly the situation with seat bookings for trains. For certain tickets you need to have a booking and with others it’s basically unrealistic. Thus we need to clear these things up for you, so you can travel like a neighborhood.

To put it plainly, a seating reservation implies you get a seat which is alloted to you by and by. Actually like a seat on an aircraft. Pulling up a chair reservation can be awesome thing yet not generally fundamental or conceivable. How might you know whether you need a booking or then again in case it is even conceivable to have one? First and foremost you need to figure out what sort of train you will be on.

 

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Practice</title>
</head>
<body>
    <div class="bus">
        <div id="selectedseataDisplay">
        </div>
        <div class="inner">
            <div class="leftside">
                <div id="s1" class="seat1"></div>
                <div id="s2" class="seat2"></div>
                <div id="s3" class="seat3"></div>
                <div id="s4" class="seat4"></div>
                <div id="s5" class="seat5"></div>
                <div id="s6" class="seat6"></div>
                <div id="s7" class="seat7"></div>
                <div id="s8" class="seat8"></div>
                <div id="s9" class="seat9"></div>
                <div id="s10" class="seat10"></div>
            </div>
            <div class="rightside">
                <div id="s11" class="seat11"></div>
                <div id="s12" class="seat12"></div>
                <div id="s13" class="seat13"></div>
                <div id="s14" class="seat14"></div>
                <div id="s15" class="seat15"></div>
                <div id="s16" class="seat16"></div>
                <div id="s17" class="seat17"></div>
                <div id="s18" class="seat18"></div>
                <div id="s19" class="seat19"></div>
                <div id="s20" class="seat20"></div>
            </div>
        </div>
    </div>
</body>
</html>

 

CSS

 .bus {
        display: flex;
        justify-content: center;
    }

    .inner {
        display: flex;
        justify-content: space-between;
        width: 700px;
    }

    .rightside {
        margin-left: 20px;
    }

    .leftside,
    .rightside {
        display: flex;
        flex-wrap: wrap;
    }

    .leftside div,
    .rightside div {
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        margin-top: 15px;
        margin-left: 10px;
        cursor: pointer;
        border: 5px solid #d4a8ff;
    }

    .leftside div:hover,
    .rightside div:hover {
        background-color: #d4a8ff;
        border: 5px solid rebeccapurple;
    }

    .selected,
    .selected:hover {
        background-color: #7ace7d !important;
        border: 5px solid #37a262 !important;
    }
    #selectedseataDisplay{
        display: flex;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    margin-top: 20px;
    }
    #selectedseataDisplay li{
    background-color: #7ace7d;
    color: #fff;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
    font-family: monospace;
    padding: 5px;
    list-style: none;
    height: 35px;
    width: 60px;
    margin-right: 5px;
    border: 2px solid #37a262;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
    margin-bottom:5px;
    }

JavaScript

 const selectedSeat = [];
    document.addEventListener('click', function (e) {
        e = e || window.event;
        const target = e.target || e.srcElement,
            text = target.className;
        let seatNumber = text;
        document.getElementsByClassName(seatNumber)[0].classList.toggle('selected');
        textID = target.id;
        if (document.getElementById(textID).classList.contains("selected")) {
            selectedSeat.push(text);
        }
        else {
            let seatTo = text.split(" ");
            let seatToRemove = seatTo[0];
            for (let i = 0; i < selectedSeat.length; i++) {
                if (selectedSeat[i] === seatToRemove) {
                    selectedSeat.splice(i, 1);
                }
            }
        }
        console.log('selectedSeat are ', selectedSeat);
        document.getElementById('selectedseataDisplay').innerHTML = '';
        for(let j=0; j<selectedSeat.length;j++){
                        document.getElementById('selectedseataDisplay').innerHTML += "<li>"+selectedSeat[j]+"</li>";
        }

    }, false);

Live Demo

See the Pen Seat Reservation with JavaScript by Rohit Gautam (@TheRrohitt) on CodePen.

Please follow and like us:

Tagged in:

, ,