<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bingolator</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,700&display=swap"
rel="stylesheet"
/>
<style>
body {
margin: 0;
height: 100dvh;
background-color: #6a1b9a;
color: #ffffff;
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
text-align: center;
}
.contenedor {
flex-grow: 1;
width: min(90%, 900px);
margin: 0 auto;
}
.resultado {
display: none;
}
.formulario__campo {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.formulario__campo:last-of-type {
margin-bottom: 10px;
}
.btn {
padding: 10px 20px;
border-radius: 0;
border: none;
font-family: "Roboto", sans-serif;
background-color: #ffd500;
font-size: unset;
cursor: pointer;
}
.resultado__numero {
font-size: 2rem;
}
</style>
</head>
<body>
<header>
<h1>Bingolator</h1>
</header>
<main class="contenedor">
<form class="formulario">
<div class="formulario__campo">
<label for="cartones">N. Cartones</label>
<input id="cartones" type="number" required />
</div>
<div class="formulario__campo">
<label for="precio">Precio (En centimos)</label>
<input id="precio" type="number" required />
</div>
<div class="formulario__campo">
<label for="porcentaje">% línea</label>
<input id="porcentaje" type="number" required />
</div>
<input class="btn" type="submit" value="Calcular" />
</form>
<div class="resultado">
<article>
<h2>Precio bingo:</h2>
<p id="bingo" class="resultado__numero"></p>
</article>
<article>
<h2>Precio línea:</h2>
<p id="linea" class="resultado__numero"></p>
</article>
<button id="Volver" class="btn">Volver</button>
</div>
</main>
<footer>
<p>Desarrollado por 4lva</p>
</footer>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$(".formulario").on("submit", function (e) {
e.preventDefault();
let cartones = parseFloat($("#cartones").val()) || 0;
let precio = parseFloat($("#precio").val()) || 0;
let porcentaje = parseFloat($("#porcentaje").val()) || 0;
let total = cartones * precio;
let precioLinea = (total * porcentaje) / 100;
let precioBingo = total - precioLinea;
$("#bingo").html((precioBingo / 100).toFixed(2) + "€");
$("#linea").html((precioLinea / 100).toFixed(2) + "€");
$(".formulario").hide();
$(".resultado").show();
});
$("#Volver").on("click", function () {
$(".resultado").hide();
$(".formulario").show();
});
});
</script>
</body>
</html>