Lo que quiero realizar es que las entradas tengan valores individuales, para que el usuario pueda elegir la cantidad deseada de cualquier tipo de entrada a la hora de seleccionar los campos, pero no logro disolver en partes individuales las entradas, pero no me deja seleccionar otras que no sean solo una
Es para un proyecto de cine, pero no lograba realizar de otra manera la parte de venta de las entradas, queria realizar un html con la seleccion de tickets pero se me complicaba la validacion de los datos
const container = document.querySelector('.container');
const seats = document.querySelectorAll('.row .seat:not(.occupied)');
const count = document.getElementById('count');
const price = document.getElementById('price');
const movieSelect = document.getElementById('movie');
let ticketPrice = +movieSelect.value;
const populateUI = () => {
const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'));
if (selectedSeats !== null && selectedSeats.length > 0) {
seats.forEach((seat, index) => {
if (selectedSeats.indexOf(index) > -1) {
seat.classList.add('selected');
}
});
}
const selectedMovieIndex = localStorage.getItem('selectedMovieIndex');
const selectedMoviePrice = localStorage.getItem('selectedMoviePrice');
if (selectedMovieIndex !== null) {
movieSelect.selectedIndex = selectedMovieIndex;
}
if (selectedMoviePrice !== null) {
count.innerText = selectedSeats.length;
price.innerText = selectedSeats.length * +selectedMoviePrice;
}
};
populateUI();
selectedMovie = (movieIndex, moviePrice) => {
localStorage.setItem('selectedMovieIndex', movieIndex);
localStorage.setItem('selectedMoviePrice', moviePrice);
};
const updateSelectedSeatsCount = () => {
const selectedSeats = document.querySelectorAll('.row .selected');
const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat));
localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));
const selectedSeatsCount = selectedSeats.length;
count.innerText = selectedSeatsCount;
price.innerText = selectedSeatsCount * ticketPrice;
};
// Seat select event
container.addEventListener('click', e => {
if (
e.target.classList.contains('seat') &&
!e.target.classList.contains('occupied')
) {
e.target.classList.toggle('selected');
updateSelectedSeatsCount();
}
});
// Movie select event
movieSelect.addEventListener('change', e => {
ticketPrice = +e.target.value;
selectedMovie(e.target.selectedIndex, e.target.value);
updateSelectedSeatsCount();
});
* {
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
background: #020307;
color: #fff;
}
header {
background: #002069;
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 100px;
transition: 0.5s;
}
header.shadow {
background: #fff;
box-shadow: 0 0 4px rgb(14 55 54 / 15%);
}
header.shadow .navbar a {
color: #020307;
}
header.shadow .logo {
color: #020307;
}
.logo {
font-size: 17.6px;
font-weight: 600;
color: #fff;
display: flex;
align-items: center;
column-gap: 8px;
}
.logo .bx {
font-size: 24px;
color: #f29100;
}
.navbar {
display: flex;
column-gap: 80px;
}
.navbar li {
position: relative;
}
.navbar a {
font-size: 16px;
font-weight: 500;
color: #fff;
}
.navbar a::after {
content: "";
width: 0;
height: 2px;
background: #f29100;
position: absolute;
bottom: -4px;
left: 0;
transition: 0.4s all linear;
}
.navbar a:hover::after,
.navbar .inicio-activo::after {
width: 100%;
}
#menu-icon {
font-size: 24px;
cursor: pointer;
z-index: 1000001;
display: none;
}
.btn {
padding: 11.2px 22.4px;
background: #f29100;
color: #fff;
font-weight: 400;
border-radius: 8px;
}
.btn:hover {
background: #fa1216;
}
body {
background-color: #242333;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 700px;
font-family: 'Lato', sans-serif;
margin: 0;
}
.movie-container {
margin: 20px 0;
}
.movie-container select {
background-color: #fff;
border: 0;
border-radius: 5px;
font-size: 14px;
margin-left: 10px;
padding: 5px 15px 5px 15px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.container {
perspective: 1000px;
margin-bottom: 30px;
}
.seat {
background-color: #444451;
height: 20px;
width: 30px;
margin: 4px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.seat.selected {
background-color: #6feaf6;
}
.seat.occupied {
background-color: #fff;
}
.seat:nth-of-type(2) {
margin-right: 18px;
}
.seat:nth-last-of-type(2) {
margin-left: 18px;
}
.seat:not(.occupied):hover {
cursor: pointer;
transform: scale(1.2);
}
.showcase .seat:not(.occupied):hover {
cursor: default;
transform: scale(1);
}
.showcase {
background: rgba(0, 0, 0, 0.1);
padding: 5px 10px;
border-radius: 5px;
color: #777;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.showcase li {
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.showcase li small {
margin-left: 2px;
}
.row {
display: flex;
}
.screen {
background-color: #fff;
height: 70px;
width: 100%;
margin: 15px 0;
transform: rotateX(-45deg);
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}
p.text {
margin: 5px 0;
}
p.text span {
color: #6feaf6;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CineRex</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
</head>
<body>
<header>
<a href="#" class="logo">
<i class='bx bxs-movie'></i> CineRex
</a>
<ul class="navbar">
<li><a href="#inicio" class="inicio-activo">Inicio</a></li>
<li><a href="#peliculas">Cartelera</a></li>
<li><a href="#proximamente">Próximamente</a></li>
<li><a href="#">Reservar</a></li>
</ul>
<a href="#" class="btn">Iniciar Sesión</a>
</header>
<div class="movie-container">
<label>Seleccionar Entradas</label>
<select id="movie">
<option value="3000">Regular (₡3,000)</option>
<option value="2400">Niño (₡2,400)</option>
<option value="2400">Adulto Mayor (₡2,400)</option>
</select>
</div>
<ul class="showcase">
<li>
<div class="seat"></div>
<small>No Disponible</small>
</li>
<li>
<div class="seat selected"></div>
<small>Seleccionado</small>
</li>
<li>
<div class="seat occupied"></div>
<small>Ocupado</small>
</li>
</ul>
<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 class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></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 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 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 occupied"></div>
<div class="seat occupied"></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 class="seat occupied"></div>
<div class="seat"></div>
</div>
</div>
<p class="text">
Has seleccionado <span id="count">0</span> asientos por el precio de ₡<span id="price">0</span
>
</p>
<script src="js/script.js" type="text/javascript"></script>
<a href="#" class="btn">EFECTUAR PAGO</a>
</body>
</html>