Dia42
This commit is contained in:
Marcos Lopez
parent
958814b055
commit
3e83dea5d2
BIN
Practicas/Practicas JS/Examen MF0491_3/MF0491_3.pdf
Normal file
BIN
Practicas/Practicas JS/Examen MF0491_3/MF0491_3.pdf
Normal file
Binary file not shown.
283
Practicas/Practicas JS/Examen MF0491_3/index.html
Normal file
283
Practicas/Practicas JS/Examen MF0491_3/index.html
Normal file
|
|
@ -0,0 +1,283 @@
|
||||||
|
<!-- *********************************** -->
|
||||||
|
<!-- *********************************** -->
|
||||||
|
<!-- ** ** -->
|
||||||
|
<!-- ** Examen práctico MF0491_3 ** -->
|
||||||
|
<!-- ** 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@300&display=swap" rel="stylesheet">
|
||||||
|
<title>Examen MF0491_3</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4em;
|
||||||
|
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: transparent;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formControl>label {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
padding: 0.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background-color: transparent;
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#botonera {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
width: min-content;
|
||||||
|
padding: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
#botonera {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
width: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"]::file-selector-button {
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<form id="formAlquiler"
|
||||||
|
style="display: flex; flex-direction: column; gap: 1em; min-width: min-content ;max-width: 600px; background-color: #9d2236; color:white; padding: 1em;">
|
||||||
|
<h1>Reserve su habitacion</h1>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Datos de la reserva</legend>
|
||||||
|
<div>
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
|
||||||
|
id="fechaEntrada">
|
||||||
|
</div>
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="fechaSalida">Fecha de Salida</label><input type="date" name="fechaSalida"
|
||||||
|
id="fechaSalida">
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Datos personales</legend>
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="nombre">* Nombre</label>
|
||||||
|
<input type="text" name="nombre" id="nombre" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="email">* Correo Electronico</label>
|
||||||
|
<input type="text" name="email" id="email" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="telf">* Telefono</label>
|
||||||
|
<input type="text" name="telf" id="telf" required>
|
||||||
|
</div>
|
||||||
|
<div class="formControl">
|
||||||
|
<span>Check-in online (Opcional)</span>
|
||||||
|
<label for="dni">* Adjunte fotocopia del DNI</label>
|
||||||
|
<input type="file" name="dni" id="dni">
|
||||||
|
</div>
|
||||||
|
<div id="botonera">
|
||||||
|
<div style="display: flex; flex-direction:column; gap: 0.4rem;">
|
||||||
|
<button type="button" onclick="calculaTotales()">Calcular coste Total</button>
|
||||||
|
<button type="button" onclick="limpiarForm()">Borrar</button>
|
||||||
|
<button type="button" onclick="enviarForm()">Enviar la reserva</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<textarea id="resultado" rows="10"></textarea>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function calculaTotales() {
|
||||||
|
|
||||||
|
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 fechaini = document.getElementById('fechaEntrada').value;
|
||||||
|
const fechafin = document.getElementById('fechaSalida').value;
|
||||||
|
|
||||||
|
const nDias = difFechasDias(fechaini, fechafin);
|
||||||
|
|
||||||
|
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 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 nombre = document.querySelector('#nombre').value;
|
||||||
|
|
||||||
|
|
||||||
|
const mensaje = `Hola ${nombre}\n` +
|
||||||
|
`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);
|
||||||
|
}
|
||||||
|
|
||||||
|
const difFechasDias = (fechaIni, fechaFin) => Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
|
||||||
|
const limpiarForm = () => document.getElementById("formAlquiler").reset();
|
||||||
|
const enviarForm = () => document.getElementById("formAlquiler").submit();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
<!-- Examen práctico UF1842 JAVASCRIPT -->
|
||||||
|
<!Doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Examen práctico UF1842 JAVASCRIPT</title>
|
||||||
|
<style>
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 80%;
|
||||||
|
min-width: 350px;
|
||||||
|
background-color: #9d2236;
|
||||||
|
border: 2px solid #000000;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
background-color: #9d2236;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: white;
|
||||||
|
background-color: #9d2236;
|
||||||
|
border: 2px solid white;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
option {
|
||||||
|
color: white;
|
||||||
|
background-color: #9d2236;
|
||||||
|
border: 2px solid white;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background-color: #9d2236;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
color: white;
|
||||||
|
border: 2px solid white;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=submit],
|
||||||
|
input[type=button],
|
||||||
|
input[type=reset] {
|
||||||
|
background-color: #9d2236;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: lighter;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 2px solid #000000;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 1px 2px 3px #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media query para pantallas de menos de 450 píxeles de ancho */
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
// Función obtener() que realizará la captación de datos,los cálculos y la escritura del mensaje de info
|
||||||
|
|
||||||
|
function obtener() {
|
||||||
|
// Declaro y obtengo el valor de las variables
|
||||||
|
const noches = document.getElementById("noches").value;
|
||||||
|
const habitacion = document.getElementById("habitacion").value;
|
||||||
|
const regimen = document.getElementById("regimen").value;
|
||||||
|
const spa = document.getElementById("spa").value;
|
||||||
|
const guia = document.getElementById("guia").value;
|
||||||
|
|
||||||
|
//Cáculo extras (spa y guia)
|
||||||
|
let spaT;
|
||||||
|
|
||||||
|
if (spa > 5) {
|
||||||
|
spaT = spa * 20;
|
||||||
|
} else {
|
||||||
|
spaT = spa * 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
let guiaT;
|
||||||
|
|
||||||
|
if (guia > 7) {
|
||||||
|
guiaT = guia * 40;
|
||||||
|
} else {
|
||||||
|
guiaT = guia * 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tipo habitación
|
||||||
|
let hotel;
|
||||||
|
if (habitacion === "simple") {
|
||||||
|
hotel = 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (habitacion === "doble") {
|
||||||
|
hotel = 80;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (habitacion === "triple") {
|
||||||
|
hotel = 120;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (habitacion === "suite") {
|
||||||
|
hotel = 150;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Tipo de regimen
|
||||||
|
let comidas;
|
||||||
|
if (regimen === "desayuno") {
|
||||||
|
comidas = 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (regimen === "mediapension") {
|
||||||
|
comidas = 80;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (regimen === "pensioncompleta") {
|
||||||
|
comidas = 120;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (regimen === "todoincluido") {
|
||||||
|
comidas = 150;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gastos estancia hotel+comidas
|
||||||
|
const hotelT = hotel * noches;
|
||||||
|
const regimenT = comidas * noches;
|
||||||
|
|
||||||
|
const estancia = hotelT + regimenT;
|
||||||
|
|
||||||
|
// Descuento por larga estancia
|
||||||
|
let estanciaDescuento;
|
||||||
|
if (noches <= 4) {
|
||||||
|
estanciaDescuento = estancia;
|
||||||
|
} else if (noches >= 5 && noches <= 10) {
|
||||||
|
estanciaDescuento = estancia * 0.85;
|
||||||
|
} else if (noches >= 11) {
|
||||||
|
estanciaDescuento = estancia * 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Envío el precio total sin IVA al formulario
|
||||||
|
document.getElementById("estancia").value = estanciaDescuento;
|
||||||
|
|
||||||
|
//Coste total con extras
|
||||||
|
const total = estanciaDescuento + spaT + guiaT;
|
||||||
|
const totalI = (total * 1.21).toFixed(2);
|
||||||
|
// Envío el precio con IVA al formulario
|
||||||
|
document.getElementById("total").value = totalI;
|
||||||
|
// Precio de anulación
|
||||||
|
const precioAnulacion = (total * 0.2).toFixed(2);
|
||||||
|
|
||||||
|
|
||||||
|
// Calcular días que faltan y fecha de regreso
|
||||||
|
const hoy = new Date().getTime();// Fecha de la reserva
|
||||||
|
const entrada = document.getElementById("fecha").valueAsNumber;
|
||||||
|
const dif = entrada - hoy;
|
||||||
|
const diasFaltan = dif / (1000 * 60 * 60 * 24);// Días que faltan
|
||||||
|
const regreso = entrada + (noches * 24 * 60 * 60 * 1000);//Fecha de regreso
|
||||||
|
const regresoF = new Date(regreso);// Obtener en UTC
|
||||||
|
const regresoP = regresoF.toLocaleDateString();//Pasar fecha a formato corto dd/mm/xxxx
|
||||||
|
|
||||||
|
const anulacion = entrada - (3 * 24 * 60 * 60 * 1000);//Fecha de anulación
|
||||||
|
const anulacionF = new Date(anulacion);
|
||||||
|
const anulacionP = anulacionF.toLocaleDateString();
|
||||||
|
//Mensaje de información
|
||||||
|
const frase = "Faltan " + (Math.ceil(diasFaltan)) + " días " + "para tu viaje" + "\n"
|
||||||
|
+ "Tu fecha de regreso es el " + regresoP + "\n"
|
||||||
|
+ "Puedes anular tu reserva hasta el día " + anulacionP + "\n"
|
||||||
|
+ "El coste de la anulación será de " + precioAnulacion + " euros";
|
||||||
|
//Enviar mensaje al formulario
|
||||||
|
document.getElementById("info").value = frase;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<link href="css/estilo.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Reserva tu habitación</h1>
|
||||||
|
<div id="container">
|
||||||
|
<form action="gracias.html" method="post">
|
||||||
|
<p>Introduzca número de noches de su estancia <input type="number" name="noches" id="noches" value="0"
|
||||||
|
size="3"></p>
|
||||||
|
<p>Seleccione el tipo de habitación
|
||||||
|
<!-- Lista de selección -->
|
||||||
|
<select name="habitacion" id="habitacion">
|
||||||
|
<option value="simple" required>Simple</option>
|
||||||
|
<option value="doble">Doble</option>
|
||||||
|
<option value="triple">Triple</option>
|
||||||
|
<option value="suite">Suite</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
<p>Seleccione el regimen de alojamiento
|
||||||
|
<!-- Lista de selección -->
|
||||||
|
<select name="regimen" id="regimen">
|
||||||
|
<option value="desayuno" required>Desayuno</option>
|
||||||
|
<option value="mediapension">Media pensión</option>
|
||||||
|
<option value="pensioncompleta">Pensión Completa</option>
|
||||||
|
<option value="todoincluido">Todo Incluido</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<p>Elige la fecha de entrada <input type="date" id="fecha"></p>
|
||||||
|
<br>
|
||||||
|
<p>Coste de la estancia (Habitación + Comidas) <input type="text" name="estancia" id="estancia"></p>
|
||||||
|
<p>Acceso al Spa, elija cuantos días <input type="number" name="spa" id="spa" value="0" size="3"></p>
|
||||||
|
|
||||||
|
<p>Servicio de guía turístico, elija cuantos días <input type="number" name="guia" id="guia" value="0"
|
||||||
|
size="3"></p>
|
||||||
|
<p>Coste total con IVA incluido <input type="text" name="total" id="total"></p>
|
||||||
|
|
||||||
|
<input type="button" value="Calcular coste total" onclick="obtener()"><input type="reset" name="limpiar"
|
||||||
|
value="Borrar" /><br>
|
||||||
|
<br>
|
||||||
|
<textarea name="info" id="info" rows="10" cols="60">Información de su viaje</textarea>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,3 +1,11 @@
|
||||||
|
<!-- *********************************** -->
|
||||||
|
<!-- *********************************** -->
|
||||||
|
<!-- ** ** -->
|
||||||
|
<!-- ** Examen práctico MF0491_3 ** -->
|
||||||
|
<!-- ** Alumno: Marcos López Gómez ** -->
|
||||||
|
<!-- ** ** -->
|
||||||
|
<!-- *********************************** -->
|
||||||
|
<!-- *********************************** -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
|
|
@ -7,7 +15,7 @@
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
|
||||||
<title>Examen UF1842</title>
|
<title>Examen MF0491_3</title>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -23,6 +31,13 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4em;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.formControl {
|
.formControl {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -36,8 +51,8 @@
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
border: 1px solid rgb(202, 207, 211);
|
border: 1px solid rgb(202, 207, 211);
|
||||||
border-radius: 0.3em;
|
border-radius: 0.3em;
|
||||||
background-color: white;
|
background-color: transparent;
|
||||||
color: rgb(17, 17, 17);
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formControl>label {
|
.formControl>label {
|
||||||
|
|
@ -45,6 +60,16 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
padding: 0.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background-color: transparent;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
min-height: 2rem;
|
min-height: 2rem;
|
||||||
min-width: 2rem;
|
min-width: 2rem;
|
||||||
|
|
@ -59,74 +84,128 @@
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #0b5ed7;
|
background-color: #0b5ed7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#botonera {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
#botonera {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
width: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"]::file-selector-button {
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
<form id="formAlquiler" style="display: flex; flex-direction: column; gap: 1em; max-width: 400px;">
|
<form id="formAlquiler"
|
||||||
<h1>Alquiler de habitacion</h1>
|
style="display: flex; flex-direction: column; gap: 1em; max-width: 600px; background-color: #9d2236; color:white; padding: 1em;">
|
||||||
<div class="formControl">
|
<h1>Reserve su habitacion</h1>
|
||||||
<label for="diasAlquiler">Introduzca el número de noches de su estancia</label>
|
<fieldset>
|
||||||
<input type="number" name="diasAlquiler" id="diasAlquiler">
|
<legend>Datos de la reserva</legend>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="formControl">
|
||||||
|
<label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
|
||||||
|
id="fechaEntrada">
|
||||||
|
</div>
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="fechaSalida">Fecha de Salida</label><input type="date" name="fechaSalida"
|
||||||
|
id="fechaSalida">
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Datos personales</legend>
|
||||||
<div class="formControl">
|
<div class="formControl">
|
||||||
<label for="tipoHabitacion">Tipo de habitación</label>
|
<label for="nombre">* Nombre</label>
|
||||||
<select name="tipoHabitacion" id="tipoHabitacion">
|
<input type="text" name="nombre" id="nombre" required>
|
||||||
<option value='simple' selected>Simple</option>
|
</div>
|
||||||
<option value='doble'>Doble</option>
|
|
||||||
<option value='triple'>Triple</option>
|
<div class="formControl">
|
||||||
<option value='suite'>Suite</option>
|
<label for="email">* Correo Electronico</label>
|
||||||
</select>
|
<input type="text" name="email" id="email" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="telf">* Telefono</label>
|
||||||
|
<input type="text" name="telf" id="telf" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="formControl">
|
<div class="formControl">
|
||||||
<label for="tipoRegimen">Régimen de estancia</label>
|
<span>Check-in online (Opcional)</span>
|
||||||
<select name="tipoRegimen" id="tipoRegimen">
|
<label for="dni">* Adjunte fotocopia del DNI</label>
|
||||||
<option value='desayuno' selected>Desayuno</option>
|
<input type="file" name="dni" id="dni">
|
||||||
<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>
|
<div id="botonera">
|
||||||
<div class="formControl">
|
<div style="display: flex; flex-direction:column; gap: 0.4rem;">
|
||||||
<label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
|
<button type="button" onclick="calculaTotales()">Calcular coste Total</button>
|
||||||
id="fechaEntrada">
|
<button type="button" onclick="limpiarForm()">Borrar</button>
|
||||||
</div>
|
<button type="button" onclick="enviarForm()">Enviar la reserva</button>
|
||||||
<div>
|
</div>
|
||||||
<div class="formControl">
|
|
||||||
<label for="costeEst">Coste de la estancia (Habitación + Comidas)</label>
|
<textarea id="resultado" rows="10"></textarea>
|
||||||
<input type="number" name="costeEst" id="costeEst" readonly>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</fieldset>
|
||||||
<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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function calculaTotales() {
|
function calculaTotales() {
|
||||||
if (!datosCorrectos()) return;
|
|
||||||
|
|
||||||
const TIPOSHABITACIONES = { simple: 50, doble: 80, triple: 120, suite: 150 };
|
const TIPOSHABITACIONES = { simple: 50, doble: 80, triple: 120, suite: 150 };
|
||||||
const TIPOSREGIMEN = { desayuno: 50, media_pension: 80, pension_completa: 120, todo_incluido: 150 };
|
const TIPOSREGIMEN = { desayuno: 50, media_pension: 80, pension_completa: 120, todo_incluido: 150 };
|
||||||
|
|
@ -134,7 +213,11 @@
|
||||||
const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
|
const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
|
||||||
const setValue = (id, value) => document.querySelector(`#${id}`).value = parseFloat(value).toFixed(2);
|
const setValue = (id, value) => document.querySelector(`#${id}`).value = parseFloat(value).toFixed(2);
|
||||||
|
|
||||||
const nDias = getValue('diasAlquiler');
|
const fechaini = document.getElementById('fechaEntrada').value;
|
||||||
|
const fechafin = document.getElementById('fechaSalida').value;
|
||||||
|
|
||||||
|
const nDias = difFechasDias(fechaini, fechafin);
|
||||||
|
|
||||||
const pvpTipoHabitacion = TIPOSHABITACIONES[document.querySelector('#tipoHabitacion').value];
|
const pvpTipoHabitacion = TIPOSHABITACIONES[document.querySelector('#tipoHabitacion').value];
|
||||||
const pvpTipoRegimen = TIPOSREGIMEN[document.querySelector('#tipoRegimen').value];
|
const pvpTipoRegimen = TIPOSREGIMEN[document.querySelector('#tipoRegimen').value];
|
||||||
|
|
||||||
|
|
@ -156,21 +239,6 @@
|
||||||
generaResumen(nDias, totalSinIva);
|
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) {
|
function generaResumen(nDias, totalSinIva) {
|
||||||
const setValue = (id, value) => document.querySelector(`#${id}`).value = value;
|
const setValue = (id, value) => document.querySelector(`#${id}`).value = value;
|
||||||
|
|
||||||
|
|
@ -186,7 +254,12 @@
|
||||||
const fechaAnulacion = new Date(diaCheckin);
|
const fechaAnulacion = new Date(diaCheckin);
|
||||||
fechaAnulacion.setDate(fechaAnulacion.getDate() - 3);
|
fechaAnulacion.setDate(fechaAnulacion.getDate() - 3);
|
||||||
|
|
||||||
const mensaje = `Faltan ${diasFaltantes} días para tu viaje\n` +
|
|
||||||
|
const nombre = document.querySelector('#nombre').value;
|
||||||
|
|
||||||
|
|
||||||
|
const mensaje = `Hola ${nombre}\n` +
|
||||||
|
`Faltan ${diasFaltantes} días para tu viaje\n` +
|
||||||
`Tu fecha de regreso es ${new Date(fechaSalida).toLocaleDateString()}\n` +
|
`Tu fecha de regreso es ${new Date(fechaSalida).toLocaleDateString()}\n` +
|
||||||
`Puedes anular tu reserva hasta el: ${new Date(fechaAnulacion).toLocaleDateString()}\n` +
|
`Puedes anular tu reserva hasta el: ${new Date(fechaAnulacion).toLocaleDateString()}\n` +
|
||||||
`El coste de la anulación será ${pvpAnulacion} euros`;
|
`El coste de la anulación será ${pvpAnulacion} euros`;
|
||||||
|
|
@ -195,7 +268,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const difFechasDias = (fechaIni, fechaFin) => Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
|
const difFechasDias = (fechaIni, fechaFin) => Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
|
||||||
const limpiarForm = ()=> document.getElementById("formAlquiler").reset();
|
const limpiarForm = () => document.getElementById("formAlquiler").reset();
|
||||||
|
const enviarForm = () => document.getElementById("formAlquiler").submit();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user