app.js
function comprar()
{
if (validarEntradaIndefinida(document.getElementById('qtd').value))
{
alert('Preencha o campo quantidade corretamente.');
return;
}
else if (validarEntradaIndefinida(document.getElementById('tipo-ingresso').value) || validarEntradaDesconhecida(document.getElementById('tipo-ingresso').value))
{
alert('Tipo do ingresso indefinido ou desconhecido.');
return;
}
else if (parseInt(document.getElementById(`qtd-${document.getElementById('tipo-ingresso').value}`).textContent) < document.getElementById('qtd').value)
{
alert(`Quantidade indisponível para tipo ${document.getElementById('tipo-ingresso').value}.`);
return;
}
else
{
document.getElementById(`qtd-${document.getElementById('tipo-ingresso').value}`).textContent = parseInt(document.getElementById(`qtd-${document.getElementById('tipo-ingresso').value}`).textContent) - document.getElementById('qtd').value;
document.getElementById('qtd').value = '';
alert('Compra realizada com sucesso!');
}
}
function validarEntradaIndefinida(entrada)
{
return 0 >= entrada || '' == entrada || 'undefined' === typeof entrada;
}
function validarEntradaDesconhecida(entrada)
{
return !('inferior' == entrada || 'superior' == entrada || 'pista' == entrada);
}
index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/_reset.css">
<link rel="stylesheet" href="./styles/style.css">
<title>e-Ticket</title>
</head>
<body>
<header>
<img class="logo" src="./assets/PNG/Logo e-tricket.png" alt="Logo">
</header>
<main class="container">
<div class="grafismo"></div>
<h1>Compre seu <span>ingresso</span></h1>
<form action="">
<label class="input-group">
Escolha o tipo
<select name="tipo-ingresso" id="tipo-ingresso">
<option value="inferior">Cadeira inferior</option>
<option value="superior">Cadeira superior</option>
<option value="pista">Pista</option>
</select>
</label>
<label class="input-group">Qtde.
<input type="number" id="qtd" placeholder="00" min="1" max="10">
</label>
<button onclick="comprar()" type="button">Comprar</button>
</form>
<img class="hachuras" src="./assets/SVG/Hachuras.svg" alt="">
<section>
<h2>Quantidade disponível</h2>
<ul class="lista">
<li>Pista<span id="qtd-pista">100</span></li>
<li>Cadeira superior<span id="qtd-superior">200</span></li>
<li>Cadeira inferior<span id="qtd-inferior">400</span></li>
</ul>
<img src="./assets/Ingresso.svg" alt="">
</section>
</main>
<script src="js/app.js"></script>
</body>
</html>
