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-31 01:18:41 +01:00
parent a6dd79e9c8
commit a510b4b658
1 changed files with 139 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
Practicas/Practicas JS/3 - Pruebas varias/index.html Normal file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pruebas Varias</title>
<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@200&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.formControl {
display: inline-flex;
flex-direction: column;
margin-right: 1rem;
}
.formControl>input,
.formControl>select {
height: 2rem;
font-size: 1.2rem;
border: 1px solid rgb(202, 207, 211);
border-radius: 0.3em;
background-color: white;
color: rgb(17, 17, 17);
}
.formControl>label {
font-size: 1em;
font-weight: bold;
}
.formControlChk {
display: flex;
align-items: center;
gap: 0.2rem;
}
.formControlChk>input[type="checkbox"],
.formControlChk>input[type="radio"] {
height: 1.2rem;
width: 1.2rem;
}
.formControlChk>label {
font-size: 1.2rem;
}
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;
}
</style>
</head>
<body>
<div style="min-width: 346px;">
<h1>Alquiler de habitaciones de hotel</h1>
<form id="frmAlquiler">
<div>
<div class="formControl">
<label for="fechaInicio">Fecha de inicio</label><input type="date" name="fechaInicio"
id="fechaInicio">
</div>
<div class="formControl">
<label for="fechaFinal">Fecha de fin</label><input type="date" name="fechaFinal"
id="fechaFinal">
</div>
<div class="formControl">
<label for="tipoHabitacion">Tipo de habitacion</label>
<select name="tipoHabitacion" id="tipoHabitacion">
<option value='individual' selected>Individual</option>
<option value='doble'>Doble</option>
<option value='triple'>Triple</option>
</select>
</div>
</div>
<div>
<h2>Elementos Opcionales CheckBox</h2>
<div class="formControlChk">
<input type="checkbox" name="opc1" id="opc1">
<label for="opc1">Opc1</label>
</div>
<div class="formControlChk">
<input type="checkbox" name="opc2" id="opc2">
<label for="opc2">Opc2</label>
</div>
</div>
<div>
<h2>Elementos Opcionales Radio</h2>
<label for="genero">Género:</label>
<div class="formControlChk">
<input type="radio" name="genero" id="masculino" value="masculino" checked>
<label for="masculino">Masculino</label>
</div>
<div class="formControlChk">
<input type="radio" name="genero" id="femenino" value="femenino">
<label for="femenino">Femenino</label>
</div>
</div>
</form>
</div>
</body>
<script>
function calculaTotal(){
let txtFechaInicio=document.getElementById('fechaInicio');
let txtFechaFinal=document.getElementById('fechaFinal');
let selTipoHabitacion=document.getElementById('tipoHabitacion');
let chkOpc1=document.getElementById('opc1');
let chkOpc2=document.getElementById('opc2');
}
</script>
</html>