marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactorizacion

Browse Source
This commit is contained in:
Marklogo
2024-01-30 01:21:46 +01:00
parent 7eb369c1cd
commit 4cb6127f80
3 changed files with 408 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
Practicas/Practicas JS/DOM Alquiler Coche V2/index.html
View File

@@ -4,24 +4,89 @@
<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">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
}
body {
font-family: 'Roboto', sans-serif;
padding: 1em;
}
input,
select {
font-size: 1.2em;
border: 1px solid rgb(202, 207, 211);
border-radius: 0.3em;
padding: 0.2em;
color: rgb(17, 17, 17);
}
textarea{
border: 1px solid rgb(202, 207, 211);
border-radius: 0.3em;
padding: 0.2em;
color: rgb(17, 17, 17);
}
label {
font-size: 1.2em;
}
button {
padding: 0.4em;
background-color: #0d6efd;
border: 0;
border-radius: 0.4em;
color: white;
font-size: 1.2em;
}
button:hover {
background-color: #0b5ed7;
}
.ct_col {
display: flex;
flex-direction: column;
width: max-content;
}
.ct_row {
display: flex;
flex-direction: row;
align-items: center;
width: max-content;
gap: 1em;
}
.gap_1 {
gap: 1em;
}
</style>
<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;">
<div class="ct_col gap_1">
<form id="formAlquiler" class="ct_col gap_1">
<div class="ct_row">
<div class="ct_col">
<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 class="ct_col">
<label for="fechaFin">Fecha de fin</label><input type="date" name="fechaFin" id="fechaFin">
</div>
</div>
<div style="display: flex; gap: 2px;">
<div class="ct_col">
<label for="tipoVehiculo">Tipo de vehiculo</label>
<select name="tipoVehiculo" id="tipoVehiculo">
<option value='basico' selected>Basico (45€ dia)</option>
@@ -29,44 +94,47 @@
<option value='lujo'>Lujo (85 dia)</option>
</select>
</div>
<h2 style="padding: 0; margin: 0;">Elementos Opcionales</h2>
<div>
<h2>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>
</div>
<div>
<h2>Seguro</h2>
<p>*** 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>
<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>
</form>
<div class="ct_row">
<label for="total">Total Coste</label><input type="text" name="total" id="total" readonly>
</div>
</form>
<textarea name="resumen" id="resumen" cols="30" rows="10">
</textarea>
<div class="ct_row">
<button type="button" onclick="calculaAlquiler()">Calcula total</button>
<button type="button" onclick="submitForm()">Enviar Formulario</button>
<button type="button" onclick="limpiarForm()">Limpiar</button>
</div>
<textarea style="width:100%; height:30em;" name="resumen" id="resumen"></textarea>
</div>