From f482a5c3dd6e2722c5f4432cccf57bbb715b96f0 Mon Sep 17 00:00:00 2001
From: Marklogo <marklogo@gmail.com>
Date: Fri, 26 Jan 2024 01:31:25 +0100
Subject: [PATCH] Ordenando

---
 .../05_CONDICIONALES_JAVASCRIPT.html          |  0
 .../06_BUCLES_JAVASCRIPT.html                 |  0
 .../09_EVENTOS_DOM_JAVASCRIPT.html            |  0
 .../10_OBJETOS_JAVASCRIPT.html                |  0
 .../11_DATE_Javascript.html                   |  0
 .../ARRAYS_JAVASCRIPT.html                    |  0
 .../Funciones iniciales.js                    |  0
 .../VARIABLES_JAVASCRIPT.html                 |  0
 .../estilos.css                               |  0
 .../holaMundo.html                            |  0
 .../holaMundo.js                              |  0
 .../Practicas JS/2- Funciones/css/style.css   | 32 +++++++++
 .../Practicas JS/2- Funciones/index.html      | 66 +++++++++++++++++++
 .../Practicas JS/2- Funciones/js/main.js      | 32 +++++++++
 14 files changed, 130 insertions(+)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/05_CONDICIONALES_JAVASCRIPT.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/06_BUCLES_JAVASCRIPT.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/09_EVENTOS_DOM_JAVASCRIPT.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/10_OBJETOS_JAVASCRIPT.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/11_DATE_Javascript.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/ARRAYS_JAVASCRIPT.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/Funciones iniciales.js (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/VARIABLES_JAVASCRIPT.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/estilos.css (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/holaMundo.html (100%)
 rename Practicas/Practicas JS/{Introduccion => 1 - Introduccion}/holaMundo.js (100%)
 create mode 100644 Practicas/Practicas JS/2- Funciones/css/style.css
 create mode 100644 Practicas/Practicas JS/2- Funciones/index.html
 create mode 100644 Practicas/Practicas JS/2- Funciones/js/main.js

diff --git a/Practicas/Practicas JS/Introduccion/05_CONDICIONALES_JAVASCRIPT.html b/Practicas/Practicas JS/1 - Introduccion/05_CONDICIONALES_JAVASCRIPT.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/05_CONDICIONALES_JAVASCRIPT.html
rename to Practicas/Practicas JS/1 - Introduccion/05_CONDICIONALES_JAVASCRIPT.html
diff --git a/Practicas/Practicas JS/Introduccion/06_BUCLES_JAVASCRIPT.html b/Practicas/Practicas JS/1 - Introduccion/06_BUCLES_JAVASCRIPT.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/06_BUCLES_JAVASCRIPT.html
rename to Practicas/Practicas JS/1 - Introduccion/06_BUCLES_JAVASCRIPT.html
diff --git a/Practicas/Practicas JS/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html b/Practicas/Practicas JS/1 - Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html
rename to Practicas/Practicas JS/1 - Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html
diff --git a/Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html b/Practicas/Practicas JS/1 - Introduccion/10_OBJETOS_JAVASCRIPT.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/10_OBJETOS_JAVASCRIPT.html
rename to Practicas/Practicas JS/1 - Introduccion/10_OBJETOS_JAVASCRIPT.html
diff --git a/Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html b/Practicas/Practicas JS/1 - Introduccion/11_DATE_Javascript.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/11_DATE_Javascript.html
rename to Practicas/Practicas JS/1 - Introduccion/11_DATE_Javascript.html
diff --git a/Practicas/Practicas JS/Introduccion/ARRAYS_JAVASCRIPT.html b/Practicas/Practicas JS/1 - Introduccion/ARRAYS_JAVASCRIPT.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/ARRAYS_JAVASCRIPT.html
rename to Practicas/Practicas JS/1 - Introduccion/ARRAYS_JAVASCRIPT.html
diff --git a/Practicas/Practicas JS/Introduccion/Funciones iniciales.js b/Practicas/Practicas JS/1 - Introduccion/Funciones iniciales.js
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/Funciones iniciales.js
rename to Practicas/Practicas JS/1 - Introduccion/Funciones iniciales.js
diff --git a/Practicas/Practicas JS/Introduccion/VARIABLES_JAVASCRIPT.html b/Practicas/Practicas JS/1 - Introduccion/VARIABLES_JAVASCRIPT.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/VARIABLES_JAVASCRIPT.html
rename to Practicas/Practicas JS/1 - Introduccion/VARIABLES_JAVASCRIPT.html
diff --git a/Practicas/Practicas JS/Introduccion/estilos.css b/Practicas/Practicas JS/1 - Introduccion/estilos.css
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/estilos.css
rename to Practicas/Practicas JS/1 - Introduccion/estilos.css
diff --git a/Practicas/Practicas JS/Introduccion/holaMundo.html b/Practicas/Practicas JS/1 - Introduccion/holaMundo.html
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/holaMundo.html
rename to Practicas/Practicas JS/1 - Introduccion/holaMundo.html
diff --git a/Practicas/Practicas JS/Introduccion/holaMundo.js b/Practicas/Practicas JS/1 - Introduccion/holaMundo.js
similarity index 100%
rename from Practicas/Practicas JS/Introduccion/holaMundo.js
rename to Practicas/Practicas JS/1 - Introduccion/holaMundo.js
diff --git a/Practicas/Practicas JS/2- Funciones/css/style.css b/Practicas/Practicas JS/2- Funciones/css/style.css
new file mode 100644
index 0000000..a54ec18
--- /dev/null
+++ b/Practicas/Practicas JS/2- Funciones/css/style.css	
@@ -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;
+}
diff --git a/Practicas/Practicas JS/2- Funciones/index.html b/Practicas/Practicas JS/2- Funciones/index.html
new file mode 100644
index 0000000..88f24bd
--- /dev/null
+++ b/Practicas/Practicas JS/2- Funciones/index.html	
@@ -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>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/2- Funciones/js/main.js b/Practicas/Practicas JS/2- Funciones/js/main.js
new file mode 100644
index 0000000..ea72d6a
--- /dev/null
+++ b/Practicas/Practicas JS/2- Funciones/js/main.js	
@@ -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}`;
+}