Dia42
This commit is contained in:
Marcos Lopez
@@ -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>
|
||||
Reference in New Issue
Block a user