Movie Seat Booking System using HTML, CSS, and JavaScript

Author:

Introduction

A movie seat booking system allows users to select seats and calculate the total cost based on their selection. In this project, you'll learn how to create a simple seat-booking system using HTML, CSS, and JavaScript. Users can select available seats, and the total price will be updated based on the ticket price.

Development Steps

  1. Create Basic HTML Structure: Set up the structure for the movie layout and seat selection.
  2. Style the Seats with CSS: Use CSS to style available, selected, and occupied seats.
  3. Add JavaScript Functionality: Use JavaScript to handle seat selection and calculate the total price.

Step 1: Create a Basic HTML Structure

First, we'll create the HTML structure for the movie seat layout and the booking information, such as the movie and total cost.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Seat Booking</title>
</head>
<body>

    <!-- Movie selection and seat layout -->
    <div class="movie-container">
        <label for="movie">Pick a movie:</label>
        <select id="movie">
            <option value="10">Avengers: Endgame ($10)</option>
            <option value="12">Joker ($12)</option>
            <option value="8">Toy Story 4 ($8)</option>
            <option value="9">The Lion King ($9)</option>
        </select>
    </div>

    <div class="container">
        <div class="screen"></div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat occupied"></div>
            <div class="seat occupied"></div>
        </div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
    </div>

    <p class="text">You have selected <span id="count">0</span> seats for a price of $<span id="total">0</span>.</p>

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

Explanation:

  • The dropdown allows users to select a movie, which dynamically updates the ticket price.
  • The seat layout is created using multiple div elements, with rows of seats and some marked as occupied.
  • The paragraph at the bottom will show the number of selected seats and the total price.

Step 2: Style the Seats with CSS

Next, we'll style the seats to distinguish between available, selected, and occupied seats.

/* Basic page styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    text-align: center;
}

.container {
    margin: 20px auto;
    width: 300px;
}

.screen {
    background-color: #fff;
    height: 70px;
    width: 100%;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

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

.seat {
    background-color: #444451;
    height: 30px;
    width: 30px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.seat.selected {
    background-color: #6feaf6;
}

.seat.occupied {
    background-color: #fff;
    cursor: not-allowed;
}

.movie-container {
    margin: 20px auto;
    text-align: center;
}

.text {
    margin-top: 30px;
    font-size: 18px;
}

#movie {
    font-size: 16px;
    padding: 5px;
}

Explanation:

  • .seat: Basic style for available seats, with a dark color.
  • .seat.selected: Changes the background color of selected seats.
  • .seat.occupied: Occupied seats are shown in white and are non-clickable.
  • .screen: Represents the movie screen at the top of the layout.

Step 3: Add JavaScript Functionality

Now, we’ll add JavaScript to handle the seat selection, update the selected seats count, and calculate the total price.

// JavaScript to handle seat selection and price calculation
const container = document.querySelector('.container');
const seats = document.querySelectorAll('.row .seat:not(.occupied)');
const count = document.getElementById('count');
const total = document.getElementById('total');
const movieSelect = document.getElementById('movie');

let ticketPrice = +movieSelect.value;

// Update total and count
function updateSelectedCount() {
    const selectedSeats = document.querySelectorAll('.row .seat.selected');
    
    const selectedSeatsCount = selectedSeats.length;
    
    count.innerText = selectedSeatsCount;
    total.innerText = selectedSeatsCount * ticketPrice;
}

// Movie select event
movieSelect.addEventListener('change', e => {
    ticketPrice = +e.target.value;
    updateSelectedCount();
});

// Seat click event
container.addEventListener('click', e => {
    if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')) {
        e.target.classList.toggle('selected');
        
        updateSelectedCount();
    }
});

Explanation:

  • movieSelect.addEventListener: Updates the ticket price when the user selects a different movie.
  • container.addEventListener: Handles seat selection by toggling the selected class and recalculating the total price.
  • updateSelectedCount: Updates the seat count and total price dynamically based on the selected seats.

Complete Code Example

Here’s the complete code for the Movie Seat Booking system:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Seat Booking</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    .container {
        margin: 20px auto;
        width: 300px;
    }

    .screen {
        background-color: #fff;
        height: 70px;
        width: 100%;
        margin-bottom: 15px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

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

    .seat {
        background-color: #444451;
        height: 30px;
        width: 30px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
    }

    .seat.selected {
        background-color: #6feaf6;
    }

    .seat.occupied {
        background-color: #fff;
        cursor: not-allowed;
    }

    .movie-container {
        margin: 20px auto;
        text-align: center;
    }

    .text {
        margin-top: 30px;
        font-size: 18px;
    }

    #movie {
        font-size: 16px;
        padding: 5px;
    }
</style>
</head>
<body>

    <div class="movie-container">
        <label for="movie">Pick a movie:</label>
        <select id="movie">
            <option value="10">Avengers: Endgame ($10)</option>
            <option value="12">Joker ($12)</option>
            <option value="8">Toy Story 4 ($8)</option>
            <option value="9">The Lion King ($9)</option>
        </select>
    </div>

    <div class="container">
        <div class="screen"></div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat occupied"></div>
            <div class="seat occupied"></div>
        </div>

        <div class="row">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
    </div>

    <p class="text">You have selected <span id="count">0</span> seats for a price of $<span id="total">0</span>.</p>

    <script>
    const container = document.querySelector('.container');
    const seats = document.querySelectorAll('.row .seat:not(.occupied)');
    const count = document.getElementById('count');
    const total = document.getElementById('total');
    const movieSelect = document.getElementById('movie');

    let ticketPrice = +movieSelect.value;

    // Update total and count
    function updateSelectedCount() {
        const selectedSeats = document.querySelectorAll('.row .seat.selected');
        
        const selectedSeatsCount = selectedSeats.length;
        
        count.innerText = selectedSeatsCount;
        total.innerText = selectedSeatsCount * ticketPrice;
    }

    // Movie select event
    movieSelect.addEventListener('change', e => {
        ticketPrice = +e.target.value;
        updateSelectedCount();
    });

    // Seat click event
    container.addEventListener('click', e => {
        if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')) {
            e.target.classList.toggle('selected');
            
            updateSelectedCount();
        }
    });

    </script>
    
</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you created a movie seat booking system using HTML, CSS, and JavaScript. You learned how to style seats, mark them as selected or occupied, and calculate the total price based on the user’s selection. This simple project can be expanded with additional features like saving user preferences or integrating with a back-end system for real-time seat availability.

Related JavaScript Projects:

Movie Seat Booking System using HTML, CSS, and JavaScript Expense Tracker Project with HTML, CSS, and JavaScript Form Validator using JavaScript, HTML and CSS Exchange Rate Calculator Project with JavaScript, HTML and CSS Breakout Game with JavaScript, HTML and CSS JavaScript Tic Tac Toe Game Create Modal Box using JavaScript, HTML, and CSS JavaScript Calculator Project using HTML, CSS, and JavaScript JavaScript Password Generator Project Weather App using JavaScript, HTML, and CSS Todo App using JavaScript, HTML, and CSS Hangman Game using JavaScript, HTML, and CSS Meal Finder App using JavaScript, HTML, and CSS Quiz App Using JavaScript, HTML, and CSS Notes App Using JavaScript, HTML, and CSS Movie App Using JavaScript, HTML, and CSS Drawing App with JavaScript, HTML, and CSS FAQ Collapse with JavaScript, HTML, and CSS

Comments

Post a Comment

Leave Comment