<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Movie Ticket Booking</title> <style> body { font-family: Arial, sans-serif; text-align: center; background: #f5f5f5; } .movie-list, .showtime-list, .seat-grid, .cart { margin: 20px auto; padding: 15px; border: 1px solid #ccc; border-radius: 8px; width: 60%; background: white; } button { margin: 5px; padding: 8px 12px; cursor: pointer; } .seat { display: inline-block; width: 30px; height: 30px; margin: 3px; background: #ccc; border-radius: 5px; cursor: pointer; } .selected { background: green; color: white; } .cart-items { text-align: left; } </style> </head> <body> <h1>🎬 Movie Ticket Booking</h1> <!-- Movies --> <div class="movie-list"> <h2>Select a Movie</h2> <button class="movie-btn">Avengers</button> <button class="movie-btn">Inception</button> <button class="movie-btn">Titanic</button> </div> <!-- Showtimes --> <div class="showtime-list" style="display:none;"> <h2>Select Showtime</h2> <button class="showtime-btn">10:00 AM</button> <button class="showtime-btn">2:00 PM</button> <button class="showtime-btn">6:00 PM</button> </div> <!-- Seats --> <div class="seat-grid" style="display:none;"> <h2>Select Seats</h2> <div id="seats"></div> <button id="add-to-cart">Add to Cart</button> </div> <!-- Cart --> <div class="cart" style="display:none;"> <h2>Booking Cart</h2> <div class="cart-items"></div> <button id="checkout">Checkout</button> </div> <script> let selectedMovie = ""; let selectedShowtime = ""; let selectedSeats = []; let cart = []; // Movie selection document.querySelectorAll(".movie-btn").forEach(btn => { btn.addEventListener("click", () => { selectedMovie = btn.textContent; document.querySelector(".showtime-list").style.display = "block"; }); }); // Showtime selection document.querySelectorAll(".showtime-btn").forEach(btn => { btn.addEventListener("click", () => { selectedShowtime = btn.textContent; document.querySelector(".seat-grid").style.display = "block"; generateSeats(); }); }); // Generate seat buttons function generateSeats() { const seatContainer = document.getElementById("seats"); seatContainer.innerHTML = ""; for (let i = 1; i <= 20; i++) { const seat = document.createElement("div"); seat.classList.add("seat"); seat.textContent = i; seat.addEventListener("click", () => toggleSeat(seat, i)); seatContainer.appendChild(seat); } } // Seat select/unselect function toggleSeat(seat, num) { if (selectedSeats.includes(num)) { selectedSeats = selectedSeats.filter(s => s !== num); seat.classList.remove("selected"); } else { selectedSeats.push(num); seat.classList.add("selected"); } } // Add to Cart document.getElementById("add-to-cart").addEventListener("click", () => { if (selectedMovie && selectedShowtime && selectedSeats.length > 0) { cart.push({ movie: selectedMovie, time: selectedShowtime, seats: [...selectedSeats] }); selectedSeats = []; document.querySelector(".cart").style.display = "block"; renderCart(); alert("Added to cart!"); } else { alert("Please select movie, time and seats."); } }); // Render Cart function renderCart() { const cartItems = document.querySelector(".cart-items"); cartItems.innerHTML = ""; cart.forEach((item, index) => { cartItems.innerHTML += `<p>${item.movie} - ${item.time} | Seats: ${item.seats.join(", ")}</p>`; }); } // Checkout document.getElementById("checkout").addEventListener("click", () => { if (cart.length > 0) { alert("Payment successful! Booking confirmed ✅"); cart = []; document.querySelector(".cart-items").innerHTML = ""; } else { alert("Cart is empty!"); } }); </script> </body> </html>