<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container ">
<h2>Formulario Agencia de viajes</h2>
<form>
<label for="cantidad">Viajeros:</label>
<input type="number" onchange="calcular()" class="form-control" placeholder="Introduzca viajeros"
id="viajeros" name="viajeros" value="1">
<label for="precio">Días:</label>
<input type="number" class="form-control" placeholder="Introduzca días" id="dias" name="dias">
<p>
<label class="form-check-label">
<input type="checkbox" id="seguro" name="seguro" class="form-check-input" value="si">Seguro
</label>
</p>
<select class="form-control" id="precio" name="precio">
<option value="17">Normal</option>
<option value="25">Superior</option>
<option value="40">Extra</option>
</select>
<h3>Importe total: <span id="total"></span></h3>
<p id="descuento"></p>
<button type="button" onclick="calcular()" class="btn btn-primary">Enviar</button>
<button type="reset" class="btn btn-primary">Borrar</button>
<script src="js/test.js"></script>
</form>
</div>
</body>
</html>
function calcular () {
const viajeros = parseFloat(document.getElementById('viajeros').value)
const dias = parseFloat(document.getElementById('dias').value)
const precio = parseFloat(document.getElementById('precio').value)
const seguro = document.getElementById('seguro').checked
let total = precio * viajeros * dias
if (seguro) {
total += 2 * viajeros
}
if (total > 450 && total < 500) {
document.getElementById('descuento').innerHTML = 'Por 50 € más tienes descuento'
} else if (total >= 500) {
document.getElementById('descuento').innerHTML = 'Al superar 500 € de compra, tiene un <b>descuento del 10%</b>'
total *= 0.9
} else {
document.getElementById('descuento').innerHTML = ''
}
if (!isNaN(total)) {
document.getElementById('total').innerHTML = total
}
}
// Si hacemos código en una web siempre tendremos este tipo de funciones
// Que recuperan valores y que cambian elementos
function calcular () {
const viajeros = parseFloat(document.getElementById('viajeros').value)
const dias = parseFloat(document.getElementById('dias').value)
const precio = parseFloat(document.getElementById('precio').value)
const seguro = document.getElementById('seguro').checked
const total = calcularTotal(precio, viajeros, dias, seguro)
document.getElementById('total').innerHTML = total
}
// Función debe ser como una caja negra sin conexión con el exterior
function calcularTotal (precio, viajeros, dias, seguro) {
let total = precio * viajeros * dias
if (seguro) {
total += 2 * viajeros
}
if (total >= 500) {
total *= 0.9
}
if (isNaN(total)) {
return ''
} else {
return total
}
}
// Si hacemos código en una web siempre tendremos este tipo de funciones
// Que recuperan valores y que cambian elementos
const calcular = () => {
const viajeros = parseFloat(document.getElementById('viajeros').value)
const dias = parseFloat(document.getElementById('dias').value)
const precio = parseFloat(document.getElementById('precio').value)
const seguro = document.getElementById('seguro').checked
const total = calcularTotal(precio, viajeros, dias, seguro)
document.getElementById('total').innerHTML = total
}
// Función debe ser como una caja negra sin conexión con el exterior
const calcularTotal = (precio, viajeros, dias, seguro) => {
let total = precio * viajeros * dias
if (seguro) {
total += 2 * viajeros
}
if (total >= 500) {
total *= 0.9
}
if (isNaN(total)) {
return ''
} else {
return total
}
}