<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitantes</title>
<link rel="stylesheet" href="css/estilos.css">
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid ">
<div class="row">
<div class="col">
<h1 class="display-3 ">Control de visitantes</h1>
<button id="add" class="btn btn-success ">Añadir visitante</button>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="reutilizar" name="reutilizar" value="something" checked>
<label class="form-check-label" for="reutilizar">Reutilizar números</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<h1 class="display-4 ">Visitantes</h1>
<div id="visitantes"></div>
</div>
<div class="col">
<h1 class="display-4 ">Histórico</h1>
<div id="historico"></div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
.numero{
display: inline-block;
border:2px solid blue;
padding: 5px;
min-width: 2em;
font-size: 2em;
text-align: center;
font-weight: bold;
margin: 10px;
}
estado = {}
window.onload = function () {
estado.lista = [];
estado.historico = [];
estado.actual = 1;
estado.limite = 20;
estado.add = document.getElementById("add");
estado.add.addEventListener("click", addVisitante);
estado.visitantes = document.getElementById("visitantes");
estado.historicos = document.getElementById("historico");
estado.reutilizar = document.getElementById("reutilizar");
iniciar();
}
function iniciar() {
pintarLista();
}
function addVisitante() {
if (estado.reutilizar.checked) {
// Buscar el primer elemento libre de la lista
let numero = 1;
while (estado.lista.includes(numero)) {
numero++;
}
estado.lista.push(numero);
estado.lista.sort((a,b)=>a-b)
} else {
estado.lista.push(estado.actual);
estado.actual++;
}
pintarLista();
}
function checkAdd() {
if (estado.lista.length <= estado.limite) {
estado.add.classList.remove("disabled")
} else {
estado.add.classList.add("disabled")
}
}
function pintarLista() {
checkAdd();
pintarDatos(estado.lista, estado.visitantes);
pintarDatos(estado.historico, estado.historicos);
}
function pincharCaja() {
let numero = Number(this.innerHTML);
estado.historico = estado.historico.concat(estado.lista.filter(x => x == numero))
if (estado.historico.length>estado.limite){
estado.historico=estado.historico.slice(-estado.limite);
}
estado.lista = estado.lista.filter(x => x != numero);
pintarLista();
}
function esPrimo(numero){
for(let i=2;i<=Math.sqrt(numero);i++){
if (numero%i==0){
return false;
}
}
return true;
}
function pintarDatos(datos, destino) {
destino.innerHTML = ""
for (let elemento of datos) {
let caja = document.createElement("div");
caja.innerHTML = elemento;
caja.classList.add("numero");
if (esPrimo(elemento)){
caja.classList.add("bg-warning");
}
caja.addEventListener("click", pincharCaja);
destino.append(caja)
}
}
