209 lines
8.4 KiB
HTML
209 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<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=Roboto:wght@300&display=swap" rel="stylesheet">
|
|
<title>Examen UF1842</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
text-decoration: none;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
body {
|
|
padding: 1em;
|
|
}
|
|
|
|
.formControl {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.formControl>input,
|
|
.formControl>select {
|
|
height: 2rem;
|
|
font-size: 1.2rem;
|
|
padding: 0.2rem;
|
|
border: 1px solid rgb(202, 207, 211);
|
|
border-radius: 0.3em;
|
|
background-color: white;
|
|
color: rgb(17, 17, 17);
|
|
}
|
|
|
|
.formControl>label {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
min-height: 2rem;
|
|
min-width: 2rem;
|
|
padding: 0.4em;
|
|
background-color: #0d6efd;
|
|
border: 0;
|
|
border-radius: 0.4em;
|
|
color: white;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #0b5ed7;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<form id="formAlquiler" style="display: flex; flex-direction: column; gap: 1em; max-width: 400px;">
|
|
<h1>Alquiler de habitacion</h1>
|
|
<div class="formControl">
|
|
<label for="diasAlquiler">Introduzca el número de noches de su estancia</label>
|
|
<input type="number" name="diasAlquiler" id="diasAlquiler">
|
|
</div>
|
|
<div>
|
|
<div class="formControl">
|
|
<label for="tipoHabitacion">Tipo de habitación</label>
|
|
<select name="tipoHabitacion" id="tipoHabitacion">
|
|
<option value='simple' selected>Simple</option>
|
|
<option value='doble'>Doble</option>
|
|
<option value='triple'>Triple</option>
|
|
<option value='suite'>Suite</option>
|
|
</select>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="tipoRegimen">Régimen de estancia</label>
|
|
<select name="tipoRegimen" id="tipoRegimen">
|
|
<option value='desayuno' selected>Desayuno</option>
|
|
<option value='media_pension'>Media pensión</option>
|
|
<option value='pension_completa'>Pensión Completa</option>
|
|
<option value='todo_incluido'>Todo Incluido</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
|
|
id="fechaEntrada">
|
|
</div>
|
|
<div>
|
|
<div class="formControl">
|
|
<label for="costeEst">Coste de la estancia (Habitación + Comidas)</label>
|
|
<input type="number" name="costeEst" id="costeEst" readonly>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="formControl">
|
|
<label for="diasSpa">Acceso al Spa, días</label>
|
|
<input type="number" name="diasSpa" id="diasSpa">
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="diasGuia">Servicio de Guía, días</label>
|
|
<input type="number" name="diasGuia" id="diasGuia">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="formControl">
|
|
<label for="costeTotalIva">Coste total (IVA incluido)</label>
|
|
<input type="number" name="costeTotalIva" id="costeTotalIva" readonly>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button type="button" onclick="calculaTotales()">Calcular coste Total</button>
|
|
<button type="button" onclick="limpiarForm()">Borrar</button>
|
|
</div>
|
|
<textarea id="resultado" rows="10"></textarea>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function calculaTotales() {
|
|
if (!datosCorrectos()) return;
|
|
|
|
const TIPOSHABITACIONES = { simple: 50, doble: 80, triple: 120, suite: 150 };
|
|
const TIPOSREGIMEN = { desayuno: 50, media_pension: 80, pension_completa: 120, todo_incluido: 150 };
|
|
|
|
const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
|
|
const setValue = (id, value) => document.querySelector(`#${id}`).value = parseFloat(value).toFixed(2);
|
|
|
|
const nDias = getValue('diasAlquiler');
|
|
const pvpTipoHabitacion = TIPOSHABITACIONES[document.querySelector('#tipoHabitacion').value];
|
|
const pvpTipoRegimen = TIPOSREGIMEN[document.querySelector('#tipoRegimen').value];
|
|
|
|
const descXDias = nDias <= 5 ? 0 : nDias <= 10 ? 0.15 : 0.25;
|
|
const costeEstancia = nDias * (pvpTipoHabitacion + pvpTipoRegimen) * (1 - descXDias);
|
|
|
|
const diasSpa = getValue('diasSpa');
|
|
const diasGuia = getValue('diasGuia');
|
|
|
|
const pvpDiasSpa = diasSpa <= 5 ? diasSpa * 30 : diasSpa * 20;
|
|
const pvpDiasGuia = diasGuia <= 7 ? diasGuia * 50 : diasGuia * 40;
|
|
|
|
const totalSinIva = costeEstancia + pvpDiasSpa + pvpDiasGuia;
|
|
const totalConIva = (totalSinIva * 1.21).toFixed(2);
|
|
|
|
setValue('costeEst', costeEstancia);
|
|
setValue('costeTotalIva', totalConIva);
|
|
|
|
generaResumen(nDias, totalSinIva);
|
|
}
|
|
|
|
function datosCorrectos() {
|
|
const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
|
|
|
|
const diasAlquiler = getValue('diasAlquiler');
|
|
const diaCheckin = new Date(document.querySelector('#fechaEntrada').value);
|
|
const diasSpa = getValue('diasSpa');
|
|
const diasGuia = getValue('diasGuia');
|
|
|
|
if (diasAlquiler <= 0 || isNaN(diasAlquiler)) { alert('El número de días de alquiler debe ser superior a 0'); return false; }
|
|
if (diasSpa < 0 || diasSpa > diasAlquiler || isNaN(diasSpa)) { alert('El acceso al Spa no puede ser menor que cero o ser superior a los días de estancia'); return false; }
|
|
if (diasGuia < 0 || diasGuia > diasAlquiler || isNaN(diasGuia)) { alert('El servicio de guía no puede ser menor que cero o ser superior a los días de estancia'); return false; }
|
|
if (diaCheckin.getTime() < new Date().getTime() || isNaN(diaCheckin.getTime())) { alert('La fecha de entrada no puede ser inferior a la actual'); return false; }
|
|
return true;
|
|
}
|
|
|
|
function generaResumen(nDias, totalSinIva) {
|
|
const setValue = (id, value) => document.querySelector(`#${id}`).value = value;
|
|
|
|
const txtresultado = document.querySelector('#resultado');
|
|
const diaCheckin = new Date(document.querySelector('#fechaEntrada').value);
|
|
|
|
const diasFaltantes = difFechasDias(new Date(), diaCheckin);
|
|
const pvpAnulacion = (totalSinIva * 0.20).toFixed(2);
|
|
|
|
const fechaSalida = new Date(diaCheckin);
|
|
fechaSalida.setDate(fechaSalida.getDate() + parseInt(nDias));
|
|
|
|
const fechaAnulacion = new Date(diaCheckin);
|
|
fechaAnulacion.setDate(fechaAnulacion.getDate() - 3);
|
|
|
|
const mensaje = `Faltan ${diasFaltantes} días para tu viaje\n` +
|
|
`Tu fecha de regreso es ${new Date(fechaSalida).toLocaleDateString()}\n` +
|
|
`Puedes anular tu reserva hasta el: ${new Date(fechaAnulacion).toLocaleDateString()}\n` +
|
|
`El coste de la anulación será ${pvpAnulacion} euros`;
|
|
|
|
setValue('resultado', mensaje);
|
|
}
|
|
|
|
function difFechasDias(fechaIni, fechaFin) {
|
|
const dias = Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
|
|
return dias;
|
|
}
|
|
|
|
function limpiarForm() {
|
|
document.getElementById("formAlquiler").reset();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |