From a510b4b65864e6af8f5827658d39451ac71c070c Mon Sep 17 00:00:00 2001
From: Marklogo <marklogo@gmail.com>
Date: Wed, 31 Jan 2024 01:18:41 +0100
Subject: [PATCH] Refactorizacion

---
 .../3 - Pruebas varias/index.html             | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 Practicas/Practicas JS/3 - Pruebas varias/index.html
diff --git a/Practicas/Practicas JS/3 - Pruebas varias/index.html b/Practicas/Practicas JS/3 - Pruebas varias/index.html
new file mode 100644
index 0000000..5b7fac0
--- /dev/null
+++ b/Practicas/Practicas JS/3 - Pruebas varias/index.html	
@@ -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>
\ No newline at end of file
