avances en el ajercicio 8 (creacion de lista dinamica)

ejercicio6/ejercicio6.js

@@ -11,18 +11,76 @@ const empleados = [
     { nombre: "Julia", sector: "Diseño", sueldo: 130000 }
 ];
 
-let tabla = document.createElement('table');
+// PROMEDIO DE SUELDOS
+let arraySueldoEmpleados = empleados.map((empleado) => empleado.sueldo); // creamos un array que solamente contenga los sueldos
+let sumatoriaSueldos = arraySueldoEmpleados.reduce((acumulador, numeroActual) => acumulador + numeroActual, 0); // tomamos la lista creada y aplicamos el metodo reduce para sumar todos sus elementos. similar al metodo sum() de python
+let promedioSueldos = sumatoriaSueldos / empleados.length // dividimos las sumatoria de los sueldos por las cantidad de empleados
+//IMPORTANTE: la variable promedioSueldos sera usada mas tarde al final de la tabla
+
+// TABLA DINAMICA: este ejercicio lo separ`e en dos partes, DINAMICA y NO DINAMICA. 
+
+// Empezamos por la parte NO DINAMICA: (parte de la tabla que no deberia a camibiar, aunque ingresen mas empleados)
+//creamos/asignamos los elementos necesarios
 let body =  document.querySelector('body');
-let parrafo = document.createElement ('p')
+tabla = document.createElement('table');
+tableHead = document.createElement('thead'); 
+tableRowHeader = document.createElement('tr');
+thc1 = document.createElement('th');  // thc: abreviatura de TableHeaderCell
+thc2 = document.createElement('th');
+thc3 = document.createElement('th');
+thc4 = document.createElement('th');
+tableBody = document.createElement('tbody');
+// aplicamos el textContent a los elementos 
+thc1.textContent = 'Nombre';
+thc2.textContent = 'Sector';
+thc3.textContent = 'Sueldo';
+thc4.textContent = 'Promedio';
+// asignamos a la tabla los elementos
+body.appendChild(tabla);
+tabla.appendChild(tableHead);
+tableHead.appendChild(tableRowHeader);
+tableRowHeader.appendChild(thc1);
+tableRowHeader.appendChild(thc2);
+tableRowHeader.appendChild(thc3);
+tableRowHeader.appendChild(thc4);
+tabla.appendChild(tableBody);
+
+// Ahora vamos por la parte DINAMICA:
+for (let empleado of empleados){ // iteramos la lista 
+    //Creamos una row y tres 'td' por empleado, para nombre, sector y sueldo
+    RowEmpleado = document.createElement('tr');
+    nombreEmpleado = document.createElement('td');
+    sectorEmpleado = document.createElement('td');
+    sueldoEmpleado = document.createElement('td');
+    //Llenamos las 'td' con su respectivo texto acceciendo al objeto iterado
+    nombreEmpleado.textContent = empleado.nombre;
+    sectorEmpleado.textContent = empleado.sector;
+    sueldoEmpleado.textContent = empleado.sueldo;
+    //Anexamos los elementos 'row' y 'td'
+    tableBody.appendChild(RowEmpleado);
+    RowEmpleado.appendChild(nombreEmpleado);
+    RowEmpleado.appendChild(sectorEmpleado);
+    RowEmpleado.appendChild(sueldoEmpleado);
+};
+
+// Creamos la fila para el promedio y la anexamos a tablebody
+rowPromedio = document.createElement('tr');
+tableBody.appendChild(rowPromedio);
+// Creamos los td (pero solo vamos a llenar el ultimo)
+td1 = document.createElement('td');
+td2 = document.createElement('td');
+td3 = document.createElement('td');
+tdPromedio = document.createElement('td');
+// Llenamos el 'td'
+tdPromedio.textContent = promedioSueldos;
+// anecamos los 'td'
+rowPromedio.appendChild(td1);
+rowPromedio.appendChild(td2);
+rowPromedio.appendChild(td3);
+rowPromedio.appendChild(tdPromedio);
+
 
 
-body.appendChild(tabla); 
-body.appendChild(parrafo);
 
 
-let arraySueldoEmpleados = empleados.map((empleado) => empleado.sueldo);
-let sumatoriaSueldos = arraySueldoEmpleados.reduce((acumulador, numeroActual) => acumulador + numeroActual, 0); // similar  al metodo sum() de python
-let promedioSueldos = sumatoriaSueldos / empleados.length
 
-console.log(promedioSueldos);
-parrafo.textContent = 'promedio de sueldos: ' + promedioSueldos

ejercicio7/ejercicio7.js

@@ -1 +1,50 @@
 // Agregar aquí el código javascript
+
+// ## Ejercicio 7: Formulario con validación
+
+// Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo,
+// validar:
+
+// - Que ningún campo esté vacío.
+// - Que la edad contenga números enteros entre 0 y 100.
+// - Que la contraseña tenga al menos 8 caracteres.
+
+// Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido,
+// ocultar los errores y mostrar un mensaje de éxito.
+
+//creamos las variables
+let formulario = document.querySelector('form');
+let inputNombre = document.querySelector('#input-nombre');
+let inputEdad = document.querySelector('#input-edad');
+let inputPassword = document.querySelector('#input-password');
+let mensajeErrorNombre = document.querySelector('#nombre-error');
+let mensajeErrorEdad = document.querySelector('#edad-error');
+let mensajeErrorPassword = document.querySelector('#password-error');
+
+//creamos el listener que se activara al enviar el form
+formulario.addEventListener('submit' ,(e)=>{
+    e.preventDefault();
+    // una vez activado el listener empezamos a validar los valores recibidos
+    if(inputNombre.value === ''){   //si el nombre esta vacio, llenamos el mensaje de error
+        mensajeErrorNombre.textContent = 'Ingresa tu nombre'
+    } else {mensajeErrorNombre.textContent = ''} // Si el nombre NO esta vacio, borramos el mensaje de error
+    if(inputEdad.value === ''){
+        mensajeErrorEdad.textContent = 'Ingresa tu edad'
+    } else if(inputEdad.value < 0 || inputEdad.value > 100 ){ // si es menor a 0 o mayor a 100 llenamos el mensaje de error
+        mensajeErrorEdad.textContent = 'Edad fuera de limites'
+    } else {mensajeErrorEdad.textContent = ''} // si nunguno de los errores surge, vaciamos el mensaje de error
+    if(inputPassword.value === ''){
+        mensajeErrorPassword.textContent = 'Ingrese la password'
+    } else if (inputPassword.value.length < 8){     // si tiene menos de 8 caracteres llenamos el mensaje de error
+        mensajeErrorPassword.textContent =  'Password corta'
+    }
+        else {mensajeErrorPassword.textContent = ''}
+
+    // Si los 3 mensajes de error estan vacios, damos el formulario por valido (importante que esta condicion este en el final del listener)    
+    if (mensajeErrorNombre.textContent == '' && mensajeErrorEdad.textContent == '' && mensajeErrorPassword.textContent == ''){
+        alert('Formulario enviado con exito'); // informamos el envio del formulario
+        inputNombre.value = ''; // y vaciamos los inputs
+        inputEdad.value = '';
+        inputPassword.value = '';
+    }
+})

ejercicio7/index.html

@@ -8,7 +8,21 @@
     </head>
     <body>
         <h1>Ejercicio 7</h1>
-
+        <form action="">
+            <label for="input-nombre">Nombre</label>
+            <input type="text" name="input-nombre" id="input-nombre">
+            <label for="input-nombre" id="nombre-error" style="color: rgba(238, 21, 21, 0.971);"></label>
+            <br>
+            <label for="input-edad">Edad</label>
+            <input type="number" name="input-edad" id="input-edad">
+            <label for="input-edad" id="edad-error" style="color: rgba(238, 21, 21, 0.971);"></label>
+            <br>
+            <label for="input-password">Password</label>
+            <input type="password" name="input-password" id="input-password">
+            <label for="input-password" id="password-error" style="color: rgba(238, 21, 21, 0.971);"></label>
+            <br>
+            <input type="submit" value="Enviar">
+        </form>
         <script src="ejercicio7.js"></script>
     </body>
 </html>

ejercicio8/ejercicio8.js

@@ -1 +1,36 @@
 // Agregar aquí el código javascript
+
+// Construir dinámicamente una lista de productos en la página, donde cada ítem
+// tenga un botón "Agregar al carrito". Al hacer clic, el producto se agrega a
+// una sección "Carrito" visible en la página, junto con su precio. Al pie del
+// carrito, mostrar el total actualizado.
+
+// Si el mismo producto se agrega más de una vez, no duplicarlo: incrementar su
+// cantidad y actualizar el total.
+
+
+// Lista de prodcutos
+let ArrayProductos = ['arroz', 'aceite', 'fideos', 'azucar', 'avena'];
+
+// asignamos las variables NO dinamicas y anexamos al body
+let body = document.querySelector('body');
+let listaProductos = document.createElement('ul');
+body.appendChild(listaProductos);
+
+// Creamos la lista dinamica recorriendo el array con los productos
+for (producto of ArrayProductos){
+    let liProducto = document.createElement('li');
+    liProducto.innerHTML = `<li> ${producto} <button type="button" id='boton-carrito'>+</button></li>`;
+    listaProductos.appendChild(liProducto);
+}
+// creamos un listener en la 'ul' que solo muestra console.log si se toca el boton (esta logica nos servira mas adelante)
+listaProductos.addEventListener('click', (e) => {
+    if (e.target.id === 'boton-carrito'){
+        console.log('el boton + fue clickeado')
+    }
+})
+
+// obervaciones para el siguiente commit: no fue la mejor decicion hacer un array en simple 
+// en arrayProductos, ya que cada producto debe tener un precio asociado. 
+// se debe modificar arrayProductos y hacerla 
+// un array de objetos con las propiedades 'nombre' y 'precio'

ejercicio8/index.html

@@ -8,7 +8,7 @@
     </head>
     <body>
         <h1>Ejercicio 8</h1>
-
+<button></button>
         <script src="ejercicio8.js"></script>
     </body>
 </html>