Merge pull request #14 from maru33luc/main

gchaldu · web-flow · commit 43370805eec1 · 2023-10-12T08:01:12.000-03:00
Tp validaciones y asincronia - Marina Lucero
diff --git a/Marina Lucero/TP - Callback/codigo.js b/Marina Lucero/TP - Callback/codigo.js
@@ -0,0 +1,97 @@
+// Ejercicio 1: Función Callback Básica
+// Escribe una función llamada `mostrarMensaje` que acepte un mensaje como argumento y una función de callback. La función `mostrarMensaje` debe mostrar el mensaje y luego llamar a la función de callback.
+
+
+function mostrarMensaje(mensaje, callback) {
+    console.log(mensaje);
+    callback();
+}
+
+mostrarMensaje("Hola Mundo", function () {
+    console.log("Este mensaje se muestra después del mensaje original");
+}
+);
+
+// Ejercicio 2: Callback con Retorno de Datos
+// Crea una función llamada `sumarAsync` que acepte dos números y una función de callback. Esta función debe sumar los números y luego llamar a la función de callback con el resultado.
+
+
+function sumarAsync(num, num1, callback) {
+    let suma = num + num1;
+    callback(suma);
+}
+
+function mostrarResultado(mensaje) {
+    console.log(mensaje);
+}
+
+sumarAsync(2, 3, mostrarResultado);
+
+// Ejercicio 3: Uso de setTimeout
+// Escribe una función llamada `retrasarEjecucion` que acepte una función de callback y un número de milisegundos. La función debe llamar al callback después de la cantidad especificada de tiempo utilizando `setTimeout`.
+
+
+const retrasarEjecucion = (num, callback) => {
+    setTimeout(callback, num);
+}
+
+retrasarEjecucion(4000, () => console.log("Se ejecuto el callback"));
+
+// Ejercicio 4: Callback Anidado
+// Crea una función llamada `obtenerDatosUsuario` que simule una solicitud HTTP para obtener datos de usuario. Esta función debe aceptar un ID de usuario y una función de callback. Luego, dentro de la función, debes simular una solicitud a una API y, cuando se complete, llamar a la función de callback con los datos del usuario.
+
+const datosUsuario = [
+    {
+        id: 1,
+        nombre: "Juan",
+        edad: 33
+    },
+    {
+        id: 2,
+        nombre: "Maria",
+        edad: 25
+    },
+    {
+        id: 3,
+        nombre: "Pedro",
+        edad: 40
+    },
+    {
+        id: 4,
+        nombre: "Ana",
+        edad: 20
+    }
+]
+
+const obtenerDatosUsuario = (id, callback) => {
+    let usuario;
+    setTimeout(function () {
+        usuario = datosUsuario.find(elem => elem.id == id);
+        if (usuario) callback(null, usuario);
+        else callback("No se encontro un usuario con ese id");
+    }, 5000)
+
+}
+
+let id = 3;
+
+obtenerDatosUsuario(id, (err, usuario) => {
+    if (err) console.log(err);
+    else console.log(`El usuario con id ${id} se llama ${usuario.nombre}`);
+})
+
+// Ejercicio 5: Promesas y Callbacks
+// Modifica el ejercicio 4 para que en lugar de utilizar callbacks, utilice promesas para manejar la solicitud de datos de usuario.
+
+const obtenerDatosUsuario2 = (id)=>{
+
+    let usuario2 = datosUsuario.find(elem => elem.id == id);
+
+    return new Promise ((resolve, reject)=>{
+        if (usuario2) resolve (usuario2.nombre);
+        else reject("No existe el id");
+    })
+}
+
+obtenerDatosUsuario2(1).then(nombre=> console.log(nombre)).catch(error=>console.log(error));
+
diff --git a/Marina Lucero/TP - Callback/index.html b/Marina Lucero/TP - Callback/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>TP Callback</title>
+</head>
+<body>
+    
+    <script src="codigo.js"></script>
+</body>
+</html>
diff --git a/Marina Lucero/TP - Callback/style.css b/Marina Lucero/TP - Callback/style.css
diff --git a/Marina Lucero/TP-Validacion-Promises-Async/index.html b/Marina Lucero/TP-Validacion-Promises-Async/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    
+    <form action="" id="form">
+
+        <label for="nombre">Nombre</label>
+        <input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre">
+        <div id="nombreError" class="error"></div>
+
+        <label for="apellido">Apellido</label>
+        <input type="text" id="apellido" name="apellido" placeholder="Ingrese su apellido">
+        <div id="apellidoError" class="error"></div>
+
+        <label for="edad">Edad</label>
+        <input type="number" id="edad" name="edad" placeholder="Ingrese su edad">
+        <div id="edadError" class="error"></div>
+
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" placeholder="Ingrese su email">
+        <div id="emailError" class="error"></div>
+
+        <label for="password">Contraseña</label>
+        <input type="password" id="password" name="password" placeholder="Ingrese su contraseña">
+        <div id="passwordError" class="error"></div>
+
+        <button type="submit">Enviar</button>
+    </form>
+
+
+<script src="promise.js"></script>
+    <!-- <script src="tp2.js"></script> -->
+</body>
+</html>
diff --git a/Marina Lucero/TP-Validacion-Promises-Async/promise.js b/Marina Lucero/TP-Validacion-Promises-Async/promise.js
@@ -0,0 +1,120 @@
+// "use strict";
+
+// Ejercicio 1: Crea una Promise que se resuelva después de 2 segundos y muestra un mensaje cuando se resuelva.
+
+const promise = new Promise((resolve) => {
+    setTimeout(() => {
+        resolve('Se resuelve después de 3 segundos');
+    }, 3000);
+});
+
+promise.then((message) => {
+    console.log(message);
+}).catch((message) => {
+    console.log(message);
+});
+
+
+// Otra forma
+let nombre = "Juan";
+
+
+const promise1 = new Promise ((resolve, reject)=>{
+    if (nombre=="Juan") resolve(nombre)
+    else reject("Error en el nombre")
+});
+
+promise1.then((nombre)=>console.log(nombre)).catch((err)=>console.log(err));
+
+
+// Misma forma con temporizador
+const promise2 = new Promise ((resolve, reject)=>{
+    setTimeout(()=>{
+        if (nombre=="Juan") resolve(nombre)
+        else reject("Error en el nombre")
+    },4000)
+});
+
+promise2.then((nombre)=>console.log(nombre)).catch((err)=>console.log(err)); 
+
+
+// Ejercicio 2: Crea una función que acepte un número y devuelva una Promise que se resuelva con el doble del número después de 1 segundo.
+
+
+function aceptarNumero(numero){
+    return new Promise ((resolve)=>setTimeout(()=>resolve(numero*2),2000))
+};
+
+function aceptarNumero2 (numero){
+    return new Promise ((resolve, reject)=>{
+        if (typeof numero === "number") resolve(numero*2)
+        else reject("Error en el tipo de dato")
+    })
+};
+
+aceptarNumero(2).then((num)=>console.log(num + " primera funcion"))
+.catch((err)=>console.log(err));
+
+aceptarNumero2("sd").then((num)=>console.log(num)).catch((err)=>console.log(err));
+
+// Ejercicio 3: Crea dos Promises que se resuelvan después de 3 segundos cada una. Combina ambas Promises para mostrar un mensaje cuando ambas se hayan resuelto. (Pista: usar Promise.all)
+
+const prom1= new Promise ((resolve)=> setTimeout(()=>resolve ("Resuelta la prom1"),3000));
+
+const prom2= new Promise ((resolve)=> setTimeout(()=>resolve ("Resuelta la prom2"),3000));
+
+Promise.all([prom1,prom2]).then((msj)=>console.log(msj)); 
+
+
+
+// Ejercicio 4: Crea una función que simule una solicitud HTTP asincrónica utilizando setTimeout y devuelva una Promise que se resuelva con un objeto JSON después de 2 segundos.
+
+const objeto = {
+    nombre: "Juan",
+    apellido: "Lopez",
+    edad: 33
+}
+
+function obtenerJSON (){
+    return new Promise((resolve)=> setTimeout(()=>resolve(objeto), 2000))
+}
+
+obtenerJSON().then((nombre)=>console.log(nombre))
+
+// Ejercicio 5: Crea una función que acepte un arreglo de números y devuelva una Promise que se
+// resuelva con la suma de los números después de 1 segundo. (Usar reduce)
+
+let arreglo = [1,2,3,4,5];
+
+function sumaArreglo (){
+    return new Promise ((resolve)=>{
+        setTimeout(()=> resolve(arreglo),1000);
+    })
+}
+
+sumaArreglo().then((msj)=>console.log(msj));
+
+// Ejercicio 6: Crea una función asincrónica que haga una solicitud HTTP a una API de tu elección
+// utilizando la función fetch y devuelva el resultado en formato JSON. Maneja los errores
+// posibles.
+
+    
+fetch("https://reqres.in/api/users/2")
+.then((res)=>res.json())
+.then((data)=>console.log(data))
+.catch((err)=>console.log(err));
+
+// Ejercicio 7: Investigar una Api que se pueda paginar. Crea una función asincrónica que haga una serie de solicitudes HTTP secuenciales para obtener datos de una API paginada. Utiliza async/await para manejar la paginación hasta que todos los datos se hayan recuperado.
+
+
+async function obtenerPagina (...pagina){
+
+    for(let i=0; i<pagina.length; i++){
+        let respuesta = await fetch(`https://reqres.in/api/users?page=${pagina[i]}`);
+        let data = await respuesta.json();
+        console.log(data);
+    }
+    
+}
+
+obtenerPagina(1,2);
diff --git a/Marina Lucero/TP-Validacion-Promises-Async/style.css b/Marina Lucero/TP-Validacion-Promises-Async/style.css
@@ -0,0 +1,23 @@
+
+label, input{
+    display: block;
+    
+}
+
+label{
+    margin-top: 15px;
+    margin-bottom: 5px;
+    color: aliceblue;
+}
+
+button{
+    margin-top: 15px;
+}
+
+.error{
+    display: none;
+}
+
+body{
+    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+}
diff --git a/Marina Lucero/TP-Validacion-Promises-Async/tp2.js b/Marina Lucero/TP-Validacion-Promises-Async/tp2.js
