ZeusAFK · April 6, 2023 00:54
diff --git a/bus.html b/bus.html
 <!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>Document</title>
  <style>
    body {
      font-size: 18px;
    }

    .asiento {
      width: 20px;
      height: 20px;
      border: #333 3px dotted;
      margin: 2px;
      display: inline-block;
    }

    .pasillo {
      background-color: #333;
      width: 30px;
      height: 28px;
      display: inline-block;
    }

    .vendido {
      background-color: red;
    }

    .disponible {
      background-color: aquamarine;
    }
  </style>
 </head>

 <body>
  <div id="bus"></div>
 </body>
 <script>
  var capacidad = 60;
  var vendidos = 30;
  var pasajes = [];

  for (let i = 0; i < vendidos; i++) {
    let randomNumber = Math.floor(Math.random() * 120) + 1;
    pasajes.push(randomNumber);
  }

  var bus = document.querySelector("#bus");

  let posicion = 1;
  for (let i = 1; i <= capacidad; i++) {
    let asiento = document.createElement('div');

    asiento.classList.add('asiento');
    asiento.setAttribute('data-asiento', i);

    asiento.addEventListener('click', function (e) {
      let asientoId = e.target.getAttribute('data-asiento');
      console.log('¡Haz hecho clic en asiento: ' + asientoId);
    });

    let vendido = pasajes.find(x => x == i);

    if (posicion % 3 == 0) {
      let pasillo = document.createElement('div');
      pasillo.classList.add('pasillo');
      bus.appendChild(pasillo);
    }

    if (posicion % 4 == 0) {
      let salto = document.createElement('div');
      salto.classList.add('salto');
      bus.appendChild(salto);
      posicion = 1;
    }

    posicion++;

    asiento.classList.add(vendido ? 'vendido' : 'disponible');

    bus.appendChild(asiento);
  }

 </script>

 </html>
	<!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>Document</title>
	<style>
	body {
	font-size: 18px;
	}

	.asiento {
	width: 20px;
	height: 20px;
	border: #333 3px dotted;
	margin: 2px;
	display: inline-block;
	}

	.pasillo {
	background-color: #333;
	width: 30px;
	height: 28px;
	display: inline-block;
	}

	.vendido {
	background-color: red;
	}

	.disponible {
	background-color: aquamarine;
	}
	</style>
	</head>

	<body>
	<div id="bus"></div>
	</body>
	<script>
	var capacidad = 60;
	var vendidos = 30;
	var pasajes = [];

	for (let i = 0; i < vendidos; i++) {
	let randomNumber = Math.floor(Math.random() * 120) + 1;
	pasajes.push(randomNumber);
	}

	var bus = document.querySelector("#bus");

	let posicion = 1;
	for (let i = 1; i <= capacidad; i++) {
	let asiento = document.createElement('div');

	asiento.classList.add('asiento');
	asiento.setAttribute('data-asiento', i);

	asiento.addEventListener('click', function (e) {
	let asientoId = e.target.getAttribute('data-asiento');
	console.log('¡Haz hecho clic en asiento: ' + asientoId);
	});

	let vendido = pasajes.find(x => x == i);

	if (posicion % 3 == 0) {
	let pasillo = document.createElement('div');
	pasillo.classList.add('pasillo');
	bus.appendChild(pasillo);
	}

	if (posicion % 4 == 0) {
	let salto = document.createElement('div');
	salto.classList.add('salto');
	bus.appendChild(salto);
	posicion = 1;
	}

	posicion++;

	asiento.classList.add(vendido ? 'vendido' : 'disponible');

	bus.appendChild(asiento);
	}

	</script>

	</html>