Dia37
This commit is contained in:
Marcos Lopez
parent
6d00e5cc0e
commit
7eb369c1cd
|
|
@ -0,0 +1,20 @@
|
|||
Debemos adaptar el ejercicio anterior.
|
||||
|
||||
- Para el periodo de alquiler solicitamos dos fechas inicio y fin del alquiler.(No el número de días).
|
||||
- Ahora tendra un botón para calcular el coste y sacar la información, otro para realizar el envío del formulario y otro más para limpiar los datos del formulario.
|
||||
|
||||
- Coste de anulación será el 30% del total con IVA incluido y solo se puede anular al menos 5 días antes del inicio del alquiler.
|
||||
|
||||
|
||||
|
||||
Mensaje en textarea:
|
||||
|
||||
Faltan 2 días para tu alquiler !
|
||||
Tu fecha de de entrega del vehículo es el 27/1/2024 !
|
||||
Puedes anular tu reserva hasta el día 21/1/2024 !
|
||||
El coste de la anulación será de 155.73 euros !
|
||||
Tus extras son los siguientes:
|
||||
Silla Infantil
|
||||
Gps
|
||||
Has contratado seguro a todo riesgo !
|
||||
Tienes recargo por ser menor de 30 años !
|
||||
75
Practicas/Practicas JS/DOM Alquiler Coche V2/index.html
Normal file
75
Practicas/Practicas JS/DOM Alquiler Coche V2/index.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="./js/main.js" defer></script>
|
||||
<title>Alquiler de coche</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form id="formAlquiler">
|
||||
<div style="display: flex; flex-direction: column; min-width: max-content; gap: 1em;">
|
||||
<div style="display: flex; flex-direction: row; gap:1em">
|
||||
<div style="display: flex;flex-direction: column; width: max-content;">
|
||||
<label for="fechaInicio">Fecha de inicio</label><input type="date" name="fechaInicio"
|
||||
id="fechaInicio">
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column; width: max-content;">
|
||||
<label for="fechaFin">Fecha de fin</label><input type="date" name="fechaFin"
|
||||
id="fechaFin">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2px;">
|
||||
<label for="tipoVehiculo">Tipo de vehiculo</label>
|
||||
<select name="tipoVehiculo" id="tipoVehiculo">
|
||||
<option value='basico' selected>Basico (45€ dia)</option>
|
||||
<option value='gama_media'>Gama media (65€ dia)</option>
|
||||
<option value='lujo'>Lujo (85 dia)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h2 style="padding: 0; margin: 0;">Elementos Opcionales</h2>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" name="sillainfantil" id="sillainfantil">
|
||||
<label for="sillainfantil">Silla infantil (15€ por dia)</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" name="gps" id="gps">
|
||||
<label for="gps">GPS (5€ por dia)</label>
|
||||
</div>
|
||||
|
||||
<h2 style="padding: 0; margin: 0;">Seguro</h2>
|
||||
<p style="padding: 0; margin: 0;">*** El seguro a terceros es obligatorio y tiene un coste de 10 €/dia sin IVA</p>
|
||||
<div>
|
||||
<input type="checkbox" name="segurotr" id="segurotr">
|
||||
<label for="segurotr">Seguro todo riesgo</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" name="menor30" id="menor30">
|
||||
<label for="menor30">Menor de 30 años (Recargo del 30% sobre el precio final)</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="total">Total Coste</label><input type="text" name="total" id="total">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" onclick="calculaAlquiler()">Calcula total</button>
|
||||
<button type="button" onclick="">Aceptar</button>
|
||||
<button type="button" onclick="limpiarForm()">Limpiar</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<textarea name="resumen" id="resumen" cols="30" rows="10">
|
||||
</textarea>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
76
Practicas/Practicas JS/DOM Alquiler Coche V2/js/main.js
Normal file
76
Practicas/Practicas JS/DOM Alquiler Coche V2/js/main.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
const diaInicio=document.getElementById("fechaInicio");
|
||||
const diaFin=document.getElementById("fechaFin");
|
||||
const gamaSeleccionada=document.getElementById("tipoVehiculo");
|
||||
const sillaInfantil=document.getElementById("sillainfantil");
|
||||
const gps=document.getElementById("gps");
|
||||
const seguroTr=document.getElementById("segurotr");
|
||||
const menor30=document.getElementById("menor30");
|
||||
const total=document.getElementById("total");
|
||||
const txtResumen= document.getElementById("resumen");
|
||||
|
||||
|
||||
const GAMAVEHICULOS=['basico','gama_media','lujo'];
|
||||
const PVPALQUILERXDIA=[45,65,85];
|
||||
const PVPSEGUROTR=[15,25,35];
|
||||
|
||||
const IVA=1.21;
|
||||
|
||||
|
||||
function calculaAlquiler() {
|
||||
let diasAlquiler=difFechasDias(diaInicio.value,diaFin.value)
|
||||
let pvpAlquilerXGama = parseInt(valorXopcion(gamaSeleccionada.value,GAMAVEHICULOS,PVPALQUILERXDIA,0)*diasAlquiler)
|
||||
let opcSillaInfantil = parseInt(totalXOpcion(sillaInfantil.checked,15,0)* diasAlquiler);
|
||||
let opcGps = parseInt(totalXOpcion(gps.checked,5,0)* diasAlquiler);
|
||||
let seguro = parseInt(totalXOpcion(seguroTr.checked,valorXopcion(gamaSeleccionada.value,GAMAVEHICULOS,PVPSEGUROTR,0),10)*diasAlquiler);
|
||||
let pvpSinIva = diasAlquiler+pvpAlquilerXGama+opcSillaInfantil+opcGps+seguro;
|
||||
let pvpConIva = parseFloat(pvpSinIva*IVA).toFixed(2);
|
||||
if (menor30.checked){pvpConIva=(pvpConIva*1.30).toFixed(2)}
|
||||
total.value=pvpConIva
|
||||
|
||||
|
||||
|
||||
|
||||
diasEntrega= difFechasDias(new Date(),diaInicio.value)
|
||||
generaResumen(diasEntrega, diaFin.value)
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function generaResumen(diasEntrega, fechaEntrega, fechaAnulacion, costeAnulacion, extras){
|
||||
let mensaje=`Faltan ${diasEntrega} días para tu alquiler\nTu fecha de entrega del vehiculo es: ${fechaEntrega}`
|
||||
txtResumen.value=mensaje
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ******************** //
|
||||
// Funciones de Fechas //
|
||||
// ******************** //
|
||||
/**
|
||||
* Devuelve la diferencia en dias entre fechas
|
||||
* @param {Date} fechaIni - Fecha inicial
|
||||
* @param {Date} fechaFin - Fecha final
|
||||
*/
|
||||
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 totalXOpcion(checked,valorChecked,valorUnchecked){
|
||||
return checked ? valorChecked : valorUnchecked;
|
||||
}
|
||||
|
||||
|
||||
function limpiarForm(){
|
||||
document.getElementById("formAlquiler").reset();
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user