0

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>

3
  • Te recomiendo Jquery para ello, imagino tienes la cantidad de asientos en total y validar por id esos asientos, y guardarlos en Arrays para luego realizar tus cuentas Commented el 4 nov. 2021 a las 15:17
  • Si claro, primero mejora tu pregunta de que es exactamente lo que necesitas para dar una respuesta y asi si alguien mas viene con algo similar sepa por donde guiarse. Commented el 4 nov. 2021 a las 15:20
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Evita publicar datos personales...
    – gbianchi
    Commented el 5 nov. 2021 a las 0:40

1 respuesta 1

0

Como te dije es mejor usar Jquery por la simplicidad, te dejo un ejemplo funcional con 6 asientos

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<html>
  <div class="row">
  
    <div class="col-md-2">
      <button type="button" id="asiento1" data-check="1" onclick="add_asiento(1)" class="btn btn-primary">Asiento 1</button>
    </div>
    <div class="col-md-2">
      <button type="button" id="asiento2" data-check="1" onclick="add_asiento(2)" class="btn btn-primary">Asiento 2</button>
    </div>
    <div class="col-md-2">
      <button type="button" id="asiento3" data-check="1" onclick="add_asiento(3)" class="btn btn-primary">Asiento 3</button>
    </div>
    <div class="col-md-2">
      <button type="button" id="asiento4" data-check="1" onclick="add_asiento(4)" class="btn btn-primary">Asiento 4</button>
    </div>    
     <div class="col-md-2">
      <button type="button" id="asiento5" data-check="1" onclick="add_asiento(5)" class="btn btn-primary">Asiento 5</button>
    </div>
     <div class="col-md-2">
      <button type="button" id="asiento6" data-check="1" onclick="add_asiento(6)" class="btn btn-primary">Asiento 6</button>
    </div>   
    
  </div>
  <div class="row" align="center">
    <hr>
    <div class="col-md-2">
            <button type="button" class="btn btn-info" onclick="mostrar_asientos()">Mostrar Seleccionador</button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12" id="mostrar">
        
    </div>
  </div>
  
</html>

<script>
var asientos=[];    
function add_asiento(id)
{
    if ($("#asiento"+id).attr("data-check")==1) //Aun no Seleccionado
    {
        $("#asiento"+id).attr("data-check",2);
        $("#asiento"+id).removeClass("btn-primary");
        $("#asiento"+id).addClass("btn-danger");
        asientos.push({"Asiento":id});
    }
    else
    {
        $("#asiento"+id).attr("data-check",1);
        $("#asiento"+id).removeClass("btn-danger");
        $("#asiento"+id).addClass("btn-primary");   
        let indice = asientos.findIndex(asiento => asiento.Asiento === id); 
        if (indice!=-1) 
        {
            asientos.splice(indice,1);
        }
    }
}
function mostrar_asientos()
{
    if (asientos.length>0) 
    {
        $("#mostrar").html("Asientos Seleccionados: <br>");

        $.each(asientos,function()
            {
                $("#mostrar").append("Asiento N° "+this.Asiento+" <br>");
            });
    }
    else
    {
        $("#mostrar").html("Aún no selecciona ningún asiento");
    }



}

</script>

Ya con ello puedes poner imágenes de asientos, el array asientos le puedes agregar mas campos, como precio y esas cosas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.