Dia39
This commit is contained in:
parent
a510b4b658
commit
5b4e22f627
BIN
Practicas/Practicas JS/Examen UF1842/Examen UF1842 Alumano04.pdf
Normal file
BIN
Practicas/Practicas JS/Examen UF1842/Examen UF1842 Alumano04.pdf
Normal file
Binary file not shown.
210
Practicas/Practicas JS/Examen UF1842/index.html
Normal file
210
Practicas/Practicas JS/Examen UF1842/index.html
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<!-- *********************************** -->
|
||||
<!-- *********************************** -->
|
||||
<!-- ** ** -->
|
||||
<!-- ** Examen práctico UF1842 ** -->
|
||||
<!-- ** Alumno: Marcos López Gómez ** -->
|
||||
<!-- ** ** -->
|
||||
<!-- *********************************** -->
|
||||
<!-- *********************************** -->
|
||||
|
||||
<!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@200&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">Introduza el numero de noches de su estancia</label>
|
||||
<input type="number" name="diasAlquiler" id="diasAlquiler">
|
||||
</div>
|
||||
<div>
|
||||
<div class="formControl">
|
||||
<label for="tipoHabitacion">Tipo de habitacion</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">Regimen de estancia</label>
|
||||
<select name="tipoRegimen" id="tipoRegimen">
|
||||
<option value='desayuno' selected>Desayuno</option>
|
||||
<option value='media_pension'>Media pension</option>
|
||||
<option value='pension_completa'>Pension 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 (Habitacion + 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 Guia, 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>
|
||||
</body>
|
||||
<script>
|
||||
function calculaTotales() {
|
||||
if (!datosCorrectos()) return;
|
||||
const TIPOSHABITACIONES = ["simple", "doble", "triple", "suite"];
|
||||
const TIPOSREGIMEN = ["desayuno", "media_pension", "pension_completa", "todo_incluido"];
|
||||
|
||||
let txtDiasAlquiler = document.getElementById('diasAlquiler');
|
||||
let cboTipoHabitacion = document.getElementById('tipoHabitacion');
|
||||
let cboTipoRegimen = document.getElementById('tipoRegimen');
|
||||
let txtCosteTotalEstancia = document.getElementById('costeEst');
|
||||
let txtCosteTotalIva = document.getElementById('costeTotalIva');
|
||||
|
||||
let nDias = parseInt(txtDiasAlquiler.value);
|
||||
let pvpTipoHabitacion = parseInt(valorXopcion(cboTipoHabitacion.value, TIPOSHABITACIONES, [50, 80, 120, 150], 0))
|
||||
let pvpTipoRegimen = parseInt(valorXopcion(cboTipoRegimen.value, TIPOSREGIMEN, [50, 80, 120, 150]))
|
||||
|
||||
let descXDias = nDias <= 5 ? 0 : nDias <= 10 ? parseFloat(0.15) : parseFloat(0.25)
|
||||
let costeEstancia = (nDias * pvpTipoHabitacion) + (nDias * pvpTipoRegimen) - ((nDias * pvpTipoHabitacion) + (nDias * pvpTipoRegimen)) * descXDias
|
||||
|
||||
let diasSpa = parseInt(document.getElementById('diasSpa').value);
|
||||
let diasGuia = parseInt(document.getElementById('diasGuia').value);
|
||||
|
||||
let pvpDiasSpa = diasSpa <= 5 ? diasSpa * 30 : diasSpa * 20;
|
||||
let pvpDiasGuia = diasGuia <= 7 ? diasGuia * 50 : diasGuia * 40;
|
||||
|
||||
let totalSinIva = costeEstancia + pvpDiasSpa + pvpDiasGuia;
|
||||
let totalConIva = parseFloat(totalSinIva * 1.21).toFixed(2);
|
||||
|
||||
txtCosteTotalEstancia.value = costeEstancia;
|
||||
txtCosteTotalIva.value = totalConIva;
|
||||
generaResumen(nDias, totalSinIva);
|
||||
}
|
||||
|
||||
function datosCorrectos() {
|
||||
let diasAlquiler = document.getElementById('diasAlquiler').value;
|
||||
let diaCheckin = new Date(document.getElementById('fechaEntrada').value);
|
||||
let diasSpa = parseInt(document.getElementById('diasSpa').value);
|
||||
let diasGuia = parseInt(document.getElementById('diasGuia').value);
|
||||
|
||||
if (diasAlquiler <= 0 || isNaN(diasAlquiler)) { alert('El numero de dias de alquier debe ser superior a 0'); return 0; }
|
||||
if (diasSpa < 0 || diasSpa > diasAlquiler || isNaN(diasSpa)) { alert('El acceso al Spa no puede ser menor que cero o ser superior a los dias de estancia'); return 0; }
|
||||
if (diasGuia < 0 || diasGuia > diasAlquiler || isNaN(diasGuia)) { alert('El servicio de guia no puede ser menor que cero o ser superior a los dias de estancia'); return 0 }
|
||||
if (diaCheckin.getTime() < new Date().getTime() || isNaN(diaCheckin.getTime())) { alert('La fecha de entrada no puede ser inferior a la actual'); return 0 }
|
||||
return 1;
|
||||
}
|
||||
|
||||
function generaResumen(nDias, totalSinIva) {
|
||||
let txtresultado = document.getElementById('resultado');
|
||||
let diaCheckin = new Date(document.getElementById('fechaEntrada').value);
|
||||
|
||||
const diasFaltantes = difFechasDias(new Date(), diaCheckin);
|
||||
const pvpAnulacion = parseFloat((totalSinIva) * 0.20);
|
||||
|
||||
let fechaSalida = new Date(diaCheckin);
|
||||
fechaSalida.setDate(fechaSalida.getDate() + parseInt(nDias));
|
||||
|
||||
let fechaAnulacion = new Date(diaCheckin);
|
||||
fechaAnulacion.setDate(fechaAnulacion.getDate() - 3);
|
||||
|
||||
let mensaje = `Faltan ${diasFaltantes} dias para tu viaje\n`
|
||||
mensaje += `Tu fecha de regreso es ${new Date(fechaSalida).toLocaleDateString()}\n`
|
||||
mensaje += `Puedes anular tu reserva hasta el: ${new Date(fechaAnulacion).toLocaleDateString()}\n`
|
||||
mensaje += `El coste de la anulacion sera ${pvpAnulacion.toFixed(2)} euros`
|
||||
|
||||
txtresultado.value = mensaje
|
||||
}
|
||||
|
||||
function difFechasDias(fechaIni, fechaFin) {
|
||||
let dias = Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
|
||||
return dias;
|
||||
}
|
||||
|
||||
function valorXopcion(opc, opciones, valores, valorDefecto) {
|
||||
const index = opciones.indexOf(opc);
|
||||
return index !== -1 ? valores[index] : valorDefecto;
|
||||
}
|
||||
|
||||
function limpiarForm() {
|
||||
document.getElementById("formAlquiler").reset();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user