From 387b4dc318837d3919e671a47b6c9e51ed41ac53 Mon Sep 17 00:00:00 2001
From: Marklogo <marklogo@gmail.com>
Date: Thu, 1 Feb 2024 16:25:58 +0100
Subject: [PATCH] Refactorizacion

---
 .../Examen UF1842/index optimizado.html       | 209 ++++++++++++++++++
 .../Practicas JS/Examen UF1842/index.html     |   2 +-
 2 files changed, 210 insertions(+), 1 deletion(-)
 create mode 100644 Practicas/Practicas JS/Examen UF1842/index optimizado.html
diff --git a/Practicas/Practicas JS/Examen UF1842/index optimizado.html b/Practicas/Practicas JS/Examen UF1842/index optimizado.html
new file mode 100644
index 0000000..baf99fe
--- /dev/null
+++ b/Practicas/Practicas JS/Examen UF1842/index optimizado.html	
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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">
+    <title>Examen UF1842</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            text-decoration: none;
+            outline: none;
+            box-sizing: border-box;
+            font-family: 'Roboto', sans-serif;
+        }
+
+        body {
+            padding: 1em;
+        }
+
+        .formControl {
+            display: inline-flex;
+            flex-direction: column;
+            margin-right: 1rem;
+        }
+
+        .formControl>input,
+        .formControl>select {
+            height: 2rem;
+            font-size: 1.2rem;
+            padding: 0.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;
+        }
+
+        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>
+        <form id="formAlquiler" style="display: flex; flex-direction: column; gap: 1em; max-width: 400px;">
+            <h1>Alquiler de habitacion</h1>
+            <div class="formControl">
+                <label for="diasAlquiler">Introduzca el número de noches de su estancia</label>
+                <input type="number" name="diasAlquiler" id="diasAlquiler">
+            </div>
+            <div>
+                <div class="formControl">
+                    <label for="tipoHabitacion">Tipo de habitación</label>
+                    <select name="tipoHabitacion" id="tipoHabitacion">
+                        <option value='simple' selected>Simple</option>
+                        <option value='doble'>Doble</option>
+                        <option value='triple'>Triple</option>
+                        <option value='suite'>Suite</option>
+                    </select>
+                </div>
+                <div class="formControl">
+                    <label for="tipoRegimen">Régimen de estancia</label>
+                    <select name="tipoRegimen" id="tipoRegimen">
+                        <option value='desayuno' selected>Desayuno</option>
+                        <option value='media_pension'>Media pensión</option>
+                        <option value='pension_completa'>Pensión Completa</option>
+                        <option value='todo_incluido'>Todo Incluido</option>
+                    </select>
+                </div>
+            </div>
+            <div class="formControl">
+                <label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
+                    id="fechaEntrada">
+            </div>
+            <div>
+                <div class="formControl">
+                    <label for="costeEst">Coste de la estancia (Habitación + Comidas)</label>
+                    <input type="number" name="costeEst" id="costeEst" readonly>
+                </div>
+            </div>
+            <div>
+                <div class="formControl">
+                    <label for="diasSpa">Acceso al Spa, días</label>
+                    <input type="number" name="diasSpa" id="diasSpa">
+                </div>
+                <div class="formControl">
+                    <label for="diasGuia">Servicio de Guía, días</label>
+                    <input type="number" name="diasGuia" id="diasGuia">
+                </div>
+            </div>
+            <div>
+                <div class="formControl">
+                    <label for="costeTotalIva">Coste total (IVA incluido)</label>
+                    <input type="number" name="costeTotalIva" id="costeTotalIva" readonly>
+                </div>
+            </div>
+            <div>
+                <button type="button" onclick="calculaTotales()">Calcular coste Total</button>
+                <button type="button" onclick="limpiarForm()">Borrar</button>
+            </div>
+            <textarea id="resultado" rows="10"></textarea>
+        </form>
+    </div>
+
+    <script>
+        function calculaTotales() {
+            if (!datosCorrectos()) return;
+
+            const TIPOSHABITACIONES = { simple: 50, doble: 80, triple: 120, suite: 150 };
+            const TIPOSREGIMEN = { desayuno: 50, media_pension: 80, pension_completa: 120, todo_incluido: 150 };
+
+            const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
+            const setValue = (id, value) => document.querySelector(`#${id}`).value = parseFloat(value).toFixed(2);
+
+            const nDias = getValue('diasAlquiler');
+            const pvpTipoHabitacion = TIPOSHABITACIONES[document.querySelector('#tipoHabitacion').value];
+            const pvpTipoRegimen = TIPOSREGIMEN[document.querySelector('#tipoRegimen').value];
+
+            const descXDias = nDias <= 5 ? 0 : nDias <= 10 ? 0.15 : 0.25;
+            const costeEstancia = nDias * (pvpTipoHabitacion + pvpTipoRegimen) * (1 - descXDias);
+
+            const diasSpa = getValue('diasSpa');
+            const diasGuia = getValue('diasGuia');
+
+            const pvpDiasSpa = diasSpa <= 5 ? diasSpa * 30 : diasSpa * 20;
+            const pvpDiasGuia = diasGuia <= 7 ? diasGuia * 50 : diasGuia * 40;
+
+            const totalSinIva = costeEstancia + pvpDiasSpa + pvpDiasGuia;
+            const totalConIva = (totalSinIva * 1.21).toFixed(2);
+
+            setValue('costeEst', costeEstancia);
+            setValue('costeTotalIva', totalConIva);
+
+            generaResumen(nDias, totalSinIva);
+        }
+
+        function datosCorrectos() {
+            const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
+
+            const diasAlquiler = getValue('diasAlquiler');
+            const diaCheckin = new Date(document.querySelector('#fechaEntrada').value);
+            const diasSpa = getValue('diasSpa');
+            const diasGuia = getValue('diasGuia');
+
+            if (diasAlquiler <= 0 || isNaN(diasAlquiler)) { alert('El número de días de alquiler debe ser superior a 0'); return false; }
+            if (diasSpa < 0 || diasSpa > diasAlquiler || isNaN(diasSpa)) { alert('El acceso al Spa no puede ser menor que cero o ser superior a los días de estancia'); return false; }
+            if (diasGuia < 0 || diasGuia > diasAlquiler || isNaN(diasGuia)) { alert('El servicio de guía no puede ser menor que cero o ser superior a los días de estancia'); return false; }
+            if (diaCheckin.getTime() < new Date().getTime() || isNaN(diaCheckin.getTime())) { alert('La fecha de entrada no puede ser inferior a la actual'); return false; }
+            return true;
+        }
+
+        function generaResumen(nDias, totalSinIva) {
+            const setValue = (id, value) => document.querySelector(`#${id}`).value = value;
+
+            const txtresultado = document.querySelector('#resultado');
+            const diaCheckin = new Date(document.querySelector('#fechaEntrada').value);
+
+            const diasFaltantes = difFechasDias(new Date(), diaCheckin);
+            const pvpAnulacion = (totalSinIva * 0.20).toFixed(2);
+
+            const fechaSalida = new Date(diaCheckin);
+            fechaSalida.setDate(fechaSalida.getDate() + parseInt(nDias));
+
+            const fechaAnulacion = new Date(diaCheckin);
+            fechaAnulacion.setDate(fechaAnulacion.getDate() - 3);
+
+            const mensaje = `Faltan ${diasFaltantes} días para tu viaje\n` +
+                `Tu fecha de regreso es ${new Date(fechaSalida).toLocaleDateString()}\n` +
+                `Puedes anular tu reserva hasta el: ${new Date(fechaAnulacion).toLocaleDateString()}\n` +
+                `El coste de la anulación será ${pvpAnulacion} euros`;
+
+            setValue('resultado', mensaje);
+        }
+
+        function difFechasDias(fechaIni, fechaFin) {
+            const dias = Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
+            return dias;
+        }
+
+        function limpiarForm() {
+            document.getElementById("formAlquiler").reset();
+        }
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/Examen UF1842/index.html b/Practicas/Practicas JS/Examen UF1842/index.html
index 7ed916a..f005d87 100644
--- a/Practicas/Practicas JS/Examen UF1842/index.html	
+++ b/Practicas/Practicas JS/Examen UF1842/index.html	
@@ -14,7 +14,7 @@
     <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@200&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
     <title>Examen UF1842</title>
     <style>
         * {
