Ordenando
This commit is contained in:
parent
a32d41503d
commit
f482a5c3dd
32
Practicas/Practicas JS/2- Funciones/css/style.css
Normal file
32
Practicas/Practicas JS/2- Funciones/css/style.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
label {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
select {
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
.dateInput {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 14rem;
|
||||
width: min-content;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.containerFlexCol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.containerFlexRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
66
Practicas/Practicas JS/2- Funciones/index.html
Normal file
66
Practicas/Practicas JS/2- Funciones/index.html
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<script src="./js/main.js"></script>
|
||||
<title>Funciones útiles JS</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; flex-direction: column; min-width: max-content; gap: 4px;">
|
||||
<div class="containerFlexRow">
|
||||
<div class="dateInput">
|
||||
<label for="fechaInicio">Fecha de inicio del alquiler </label><input type="date" name="fechaInicio"
|
||||
id="fechaInicio">
|
||||
</div>
|
||||
<div class="dateInput">
|
||||
<label for="fechaFin">Fecha de fin del alquiler </label><input type="date" name="fechaFin"
|
||||
id="fechaFin">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dateInput">
|
||||
<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>
|
||||
<div>
|
||||
<input type="checkbox" name="sillaInfantil" id="sillaInfantil">
|
||||
<label for="sillaInfantil">Silla infantil (15€ dia)</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" name="gps" id="gps">
|
||||
<label for="gps">GPS (5€ dia)</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<input type="radio" name="seguro" value="10" checked required> Seguro a terceros obligatorio si no se
|
||||
contrata otro superior (10€ dia)
|
||||
</div>
|
||||
<input type="radio" name="seguro" value="0"> Todo riesgo (15€ para basico 25€ para gamam media 35€ para lujo)
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" name="menor30" id="menor30" required>
|
||||
<label for="menor30">Menor de 30 años (Recargo del 30% sobre el precio final)</label>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="calculaAlquiler()">Calcula total</button>
|
||||
</div>
|
||||
<span id="resultado"></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
Practicas/Practicas JS/2- Funciones/js/main.js
Normal file
32
Practicas/Practicas JS/2- Funciones/js/main.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
|
||||
|
||||
// ******************** //
|
||||
// Funciones de Fechas //
|
||||
// ******************** //
|
||||
/**
|
||||
* Devuelve la diferencia en dias entre fechas
|
||||
* @param {Date} fechaIni - Fecha inicial
|
||||
* @param {Date} fechaFin - Fecha final
|
||||
*/
|
||||
function difFechasDias(fechaIni, fechaFin) {
|
||||
const dias = Math.ceil((fechaFin - fechaIni) / (1000 * 60 * 60 * 24));
|
||||
return dias;
|
||||
}
|
||||
|
||||
/**
|
||||
* Devuelve una fecha dada en el siguiente formato Viernes, 26 de Enero de 2024
|
||||
* @param {Date} fecha - Fecha
|
||||
* @returns String
|
||||
*/
|
||||
function formatFecha(fecha) {
|
||||
//prettier-ignore
|
||||
const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
|
||||
//prettier-ignore
|
||||
const dias = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
|
||||
const diaSemana = fecha.getDay();
|
||||
const diaMes = fecha.getDate();
|
||||
const mes = fecha.getMonth();
|
||||
const ano = fecha.getFullYear();
|
||||
return `${dias[diaSemana]}, ${diaMes} de ${meses[mes]} de ${ano}`;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user