Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Proyecto: Crea una red social

43/55
Recursos

Aportes 48

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Cabe destacar, que si este proyecto te resulta retante o no sabes como hacerlo solo **no te preocupes!** Es normal, y es que hacer codigo desde cero es muchas veces un reto, y es algo a lo que debes acostumbrarte ya que en muchas pruebas tecnicas, te pediran crear cosas desde cero. Ahora bien, si te pasa eso almenos intentalo, aunque no lo logres. Ademas, cuando sucede eso (almenos en mi caso) lo que hago es dar una breve repasada a los conceptos que necesito usar, leyendo la documentacion y pidiendo ideas de que metodo puedo usar (ya que como ves, por ejemplo algunos usaron find para comprobar si el user y password eran correctos, otros usaron el ciclo for) al pedir esas ideas puedo enfocarme en una. Una vez lo intente y avanzo hasta donde puedo, usualmente antes de ver el video uso alguna IA como copilot para que me ayude con el resto y trato de comprender bien que errores cometi y que me falto. Una ultima cosa **(la que mas recomiendo)** es que mucho antes de cada proyecto en un curso de platzi, busques dicho proyecto para ver que cosas necesita y asi enfocarte en aprender esas cosas, busca modelos o bocetos, code etc, para asi ya estes mas adaptado y te vaya mejor a la hora de hacer ese proyecto. Pero en resumen: si te pasa, **descuida!** les pasa a todos, solamente repasa, prueba o intenta, y hasta donde llegues, busca ayuda y comprende que te falto. Espero que te sea util!
Hola! Les comparto mi solución al reto. ![](https://static.platzi.com/media/user_upload/Code-aa185729-65f0-4930-a024-c6a69d797b7e.jpg)
```js class Usuario{ constructor(username, password){ this.username = username this.password=password } validacion(userDataBase, userTimeLine) { let bandera = 0 for(const user of userDataBase){ if(user.username === this.username && user.password === this.password){ bandera ++ console.log("Bienvenido "+ this.username) for(const linetime of userTimeLine){ if(linetime.username === this.username){ console.log(linetime.timeLine) } } } } if(bandera === 0){ console.log("Error Usuario o contraseña incorrecto") } } } const userDataBase = [ { username: "Estefany", timeLine: "123" }, { username: "Andres", password: "123" }, { username: "Oscar", password: "123" }, { username: "Mariana", password: "123" }, ] const userTimeLine = [ { username: "Estefany", timeLine: "Me encanta JavaScript" }, { username: "Oscar", timeLine: "Debeloper es lo mejor!" }, { username: "Mariana", timeLine: "A mi me gusta mas el cáfe que el té" }, { username: "Andres", timeLine: "Ya no quiero trabajar" }, ] const userId = prompt("Igrese su usuario") const password = prompt("Ingrese su contraseña") const usuario = new Usuario(userId, password) usuario.validacion(userDataBase,userTimeLine) ```
Mi solución: ![](https://static.platzi.com/media/user_upload/image-547275dc-79cf-47c4-a244-484172b64e32.jpg)
```js const usersDatabase=[ { username:"andres", password:"123" }, { username:"caro", password:"456" }, { username:"mariana", password:"789" } ]; const usersTimeline=[ { username:"Estefany", timeline:"Me encata Javascript!" }, { username:"Oscar", timeline:"Bebeloper es lo mejor!" }, { username:"Mariana", timeline:"A mi me gusta más el café que el té" }, { username:"Andres", timeline:"Yo hoy no quiero trabajar" } ]; let password; let user; let response = false; function check(user, pass){ for(let i = 0; i < usersDatabase.length; i++){ if(usersDatabase[i].username == user && usersDatabase[i].password == pass){ response = true; } } if(response == false){ console.log('¡ERROR! usuario o contraseña incorrectos.'); } else if(user == 'andres'){ return 3; } else if(user == 'caro'){ return 1; } else if(user == 'mariana'){ return 2; } } function print(id){ console.log( `Bienvenido de nuevo ${usersTimeline[id].username}!!! timeline: ---${usersTimeline[id].timeline}---`) } user = prompt('Ingrese su usuario:'); password = prompt('Ingrese su contraseña:'); print(check(user, password)); ```
Este es mi código realizado. `const usersDatabase``=[` ` {` ` username:"andres",password:"123"` ` },` ` {` ` username:"caro",password:"456"` ` },` ` {` ` username:"mariana",password:"789"` ` },` ` {` ` username:"Pedro",password:"15623"` ` }` ` ];` `const usersTimeline``=[` ` {` ` username:"Estefany",timeline:"Me encata Javascript!"` ` },` ` {` ` username:"Oscar",timeline:"Bebeloper es lo mejor!"` ` },` ` {` ` username:"Mariana",timeline:"A mi me gusta más el café que el té"` ` },` ` {` ` username:"Andres",timeline:"Yo hoy no quiero trabajar"}` `];` `const USERLOGIN ``= prompt('Ingresa tu nobre de usuario');` `const USERPASS ``= prompt('Ingresa tu contraseña');` `let contador ``= 0;` `let ``verifyUserLogin = () => {` ` ``while ``(``contador ``< ``usersDatabase``.length) {` ` ``if ``(``USERLOGIN ``=== ``usersDatabase``[``contador``].username && ``USERPASS ``== ``usersDatabase``[``contador``].password) {` `` alert(`Bienvenido ${```USERLOGIN``}, tu line time es: \n\ ${``usersTimeline``[``contador``].username}: ${``usersTimeline``[``contador```].timeline}`);`` ` ``break` ` ``}` ` ``contador``++;` ` }` `}` `verifyUserLogin();`
```js function enviarDatos() { const nombreUsuario = document.getElementById("inputNomUsuario").value; const contraseña = document.getElementById("inputContraseña").value; const usuarioValido = usersDatabase.find(user => user.username === nombreUsuario && user.password === contraseña ); if (usuarioValido) { console.log(usersTimeline); } else { console.log("Nombre de usuario o contraseña incorrectos"); } } const usersDatabase = [ { username:"andres", password:"123", }, { username:"caro", password:"456", }, { username:"mariana", password:"789", }, ]; const usersTimeline = [ { username:"Estefany", timeline:"Me encata Javascript!", }, { username:"Oscar", timeline:"Bebeloper es lo mejor!", }, { username:"Mariana", timeline:"A mí me gusta más el café que el té", }, { username:"Andres", timeline:"Yo hoy no quiero trabajar", }, ]; ```function enviarDatos() {    const nombreUsuario = document.getElementById("inputNomUsuario").value;    const contraseña = document.getElementById("inputContraseña").value;     const usuarioValido = usersDatabase.find(user =>         user.username === nombreUsuario && user.password === contraseña    );     if (usuarioValido) {        console.log(usersTimeline);            } else {        console.log("Nombre de usuario o contraseña incorrectos");    }} const usersDatabase = \[    {        username:"andres",        password:"123",    },    {        username:"caro",        password:"456",    },    {        username:"mariana",        password:"789",    },];     const usersTimeline = \[        {            username:"Estefany",            timeline:"Me encata Javascript!",        },        {            username:"Oscar",            timeline:"Bebeloper es lo mejor!",        },        {   username:"Mariana",            timeline:"A mí me gusta más el café que el té",         },        {            username:"Andres",            timeline:"Yo hoy no quiero trabajar",        },    ];![]()![]()
Abajo pongo mi código con el cual creo haber resuelto el ejercicio. No se ve estético en la pantalla ni en la consola, pero se producen los efectos.
Y este es mi HTML: ```js <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>

Te damos la bienvenida a nuestra red social. <input type="text" id="inputNomUsuario" placeholder="Escribe el nombre de usuario"> <input type="text" id="inputContraseña" placeholder="Escribe tu contraseña"> <button onclick="enviarDatos()">Enviar</button>

<script src="red_social.js"></script> </body> </html> ```\\<html>\<head>    \<meta charset="UTF-8">    \<meta name="viewport" content="width=device-width, initial-scale=1.0">    \<title>Document\</title>\</head>\<body>    \

Te damos la bienvenida a nuestra red social.     \<input type="text" id="inputNomUsuario" placeholder="Escribe el nombre de usuario">    \<input type="text" id="inputContraseña" placeholder="Escribe tu contraseña">    \<button onclick="enviarDatos()">Enviar\</button>\

    \<script src="red\_social.js">\</script>\</body>\</html>
```js <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login con Timeline</title> </head> <body>

Iniciar sesión

<form id="loginForm"> <label for="username">Usuario:</label> <input type="text" id="username" required>

<label for="password">Contraseña:</label> <input type="password" id="password" required>

<button type="submit">Ingresar</button> </form>

Bienvenido a tu timeline

<script> // Base de datos simulada de usuarios y timelines const usersDatabase = [ { username: "andres", password: "123" }, { username: "andrew", password: "456" }, { username: "mariana", password: "789" }, ]; const usersTimeline = [ { username: "andrew", timeline: "Me encanta Javascript!" }, { username: "Oscar", timeline: "Bebeloper es lo mejor!" }, { username: "Mariana", timeline: "A mí me gusta más el café que el té" }, { username: "Andres", timeline: "Yo hoy no quiero trabajar" }, ]; // Función para verificar si el usuario y contraseña son correctos function usuarioExistente(username, password) { return usersDatabase.some(user => user.username.toLowerCase() === username.toLowerCase() && user.password === password); } // Función para mostrar el timeline del usuario function mostrarTimeline(username) { const userPosts = usersTimeline.filter(post => post.username.toLowerCase() === username.toLowerCase()); const userTimeline = document.getElementById('userTimeline'); userTimeline.innerHTML = ''; if (userPosts.length > 0) { userPosts.forEach(post => { const postElement = document.createElement('p'); postElement.textContent = post.timeline; userTimeline.appendChild(postElement); }); } else { userTimeline.textContent = 'No tienes publicaciones en tu timeline.'; } } // Manejo del formulario de inicio de sesión document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // Obtener valores de usuario y contraseña const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Verificar si el usuario existe y mostrar su timeline if (usuarioExistente(username, password)) { document.getElementById('message').innerText = Bienvenido a tu cuenta, ${username}!; document.getElementById('timeline').style.display = 'block'; mostrarTimeline(username); } else { document.getElementById('message').innerText = 'Uuups, usuario o contraseña incorrectos!'; document.getElementById('timeline').style.display = 'none'; } // Limpiar formulario document.getElementById('loginForm').reset(); }); </script> </body> </html> ```\ \<html lang="es"> \<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<title>Login con Timeline\</title> \</head> \<body> \

Iniciar sesión\

\<form id="loginForm"> \<label for="username">Usuario:\</label> \<input type="text" id="username" required> \
\
\<label for="password">Contraseña:\</label> \<input type="password" id="password" required> \
\
\<button type="submit">Ingresar\</button> \</form> \
\
\
\

Bienvenido a tu timeline\

\
\
\
\<script> // Base de datos simulada de usuarios y timelines const usersDatabase = \[ { username: "andres", password: "123" }, { username: "andrew", password: "456" }, { username: "mariana", password: "789" }, ]; const usersTimeline = \[ { username: "andrew", timeline: "Me encanta Javascript!" }, { username: "Oscar", timeline: "Bebeloper es lo mejor!" }, { username: "Mariana", timeline: "A mí me gusta más el café que el té" }, { username: "Andres", timeline: "Yo hoy no quiero trabajar" }, ]; // Función para verificar si el usuario y contraseña son correctos function usuarioExistente(username, password) { return usersDatabase.some(user => user.username.toLowerCase() === username.toLowerCase() && user.password === password); } // Función para mostrar el timeline del usuario function mostrarTimeline(username) { const userPosts = usersTimeline.filter(post => post.username.toLowerCase() === username.toLowerCase()); const userTimeline = document.getElementById('userTimeline'); userTimeline.innerHTML = ''; if (userPosts.length > 0) { userPosts.forEach(post => { const postElement = document.createElement('p'); postElement.textContent = post.timeline; userTimeline.appendChild(postElement); }); } else { userTimeline.textContent = 'No tienes publicaciones en tu timeline.'; } } // Manejo del formulario de inicio de sesión document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // Obtener valores de usuario y contraseña const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Verificar si el usuario existe y mostrar su timeline if (usuarioExistente(username, password)) { document.getElementById('message').innerText = Bienvenido a tu cuenta, ${username}!; document.getElementById('timeline').style.display = 'block'; mostrarTimeline(username); } else { document.getElementById('message').innerText = 'Uuups, usuario o contraseña incorrectos!'; document.getElementById('timeline').style.display = 'none'; } // Limpiar formulario document.getElementById('loginForm').reset(); }); \</script> \</body> \</html> //no se si estara bien de esta manera lo probe y me aparecio el mensaje cumpli con los 4 requerimientos, lo unico es que use html y js
Hola profe, yo lo pensé validando usuario y luego validando contraseña para ese usuario y me quedo una cosa medio loca, por otra parte, estoy perdido con lo de correr el codigo en navegador, asi que lo estoy corriendo en consola no mas, por eso no me funciona el comando prompt y bueno, me toco hacer mis experimentos de otra forma, por aca va mi respuesta ![](https://static.platzi.com/media/user_upload/image-59928d84-4320-42c6-98b7-c66a1604e155.jpg)![](https://static.platzi.com/media/user_upload/image-61c599be-b6e1-40f4-85ab-7160cc7e517c.jpg)
me costo 1 semana hehehehe
encontre 2 formas de hacerlo, una con .find() y la otra con funciones,
## Algoritmo para una Red Social * El objetivo es construir un algoritmo para una red social que permita el ingreso de usuarios y la validación de credenciales. * Se requerirán cuatro pasos básicos para lograr esta implementación. ## Requerimientos del sistema * El usuario debe poder ingresar su nombre de usuario y contraseña. * El sistema debe validar si las credenciales ingresadas existen en la base de datos. * Si las credenciales son correctas, se mostrará un mensaje de bienvenida y el timeline del usuario. * Si las credenciales son incorrectas, se mostrará un mensaje de error. ## Implementación de ingreso de usuario y contraseña * Utilizar prompts para obtener el nombre de usuario y la contraseña. * Ejemplo de código:const username = prompt("¿Cuál es tu usuario?"); const password = prompt("¿Cuál es tu contraseña?"); console.log(username); // Ejemplo: Diego console.log(password); // Ejemplo: abc ## Validación de credenciales * Crear una función para validar las credenciales ingresadas contra la base de datos. * Ejemplo de código:const userDatabase = \[ { username: "Diego", password: "abc" }, { username: "Andrés", password: "123" }, { username: "Alice", password: "xyz" } ]; function usuarioExistente(username, password) { for (let i = 0; i < userDatabase.length; i++) { if (userDatabase\[i].username === username && userDatabase\[i].password === password) { console.log("Es correcto"); return true; } } console.log("No es correcto"); return false; } usuarioExistente(username, password); ## Mostrar el timeline del usuario * Si las credenciales son correctas, mostrar el timeline. * Utilizar una base de datos simplificada para el timeline. * Ejemplo de código:const timelineDatabase = \[ { username: "Diego", messages: \["Mensaje 1", "Mensaje 2"] }, { username: "Andrés", messages: \["Mensaje 3", "Mensaje 4"] }, { username: "Alice", messages: \["Mensaje 5", "Mensaje 6"] } ]; function mostrarTimeline(username) { const userTimeline = timelineDatabase.find(user => user.username === username); if (userTimeline) { console.log(`Bienvenido, ${username}`); console.log("Tu timeline:"); userTimeline.messages.forEach(message => console.log(message)); } } if (usuarioExistente(username, password)) { mostrarTimeline(username); } ## Manejo de errores * Si las credenciales son incorrectas, mostrar un mensaje de error. * Ejemplo de código:function usuarioExistente(username, password) { for (let i = 0; i < userDatabase.length; i++) { if (userDatabase\[i].username === username && userDatabase\[i].password === password) { console.log("Es correcto"); return true; } } console.log("No es correcto"); return false; } if (!usuarioExistente(username, password)) { console.log("Lo siento, tu usuario o contraseña no existen."); } ## Próximos pasos * Implementar la interfaz de usuario para el ingreso de credenciales. * Mejorar la validación y manejo de errores para una mayor seguridad. * Ampliar la base de datos y el sistema de timeline para incluir más funcionalidades. * Continuar aprendiendo y practicando con proyectos más complejos en desarrollo de software.
Yo no use un for, use un find, de la siguiente forma: let usario = 'caro' let contraseña = '456' const usersDatabase = \[    {        username: 'andres',        password: '123'    },    {        username: 'caro',        password: '456'    },    {        username: 'mariana',        password: '789'    } ] const usersTimeLine = \[    {        username: 'Estefany',        timeline: 'Me encanta Javascript'    },    {        username: 'Oscar',        timeline: 'Bebeoper es lo mejor'    },    {        username: 'Mariana',        timeline: 'A mi me gusta mas el cafe que el te'    },    {        username: 'Andres',        timeline: 'Yo no quiero trabajar'    }] function validarUsuarioYContraseña(username, password, arrayTimeLine) {    if (usersDatabase.find((obj) => obj.username === username) && usersDatabase.find((obj) => obj.password === password)) {        console.log(`Hola ${username}, bienvenido`) arrayTimeLine.forEach(element => {  console.log(`Tu amigo: ${element.username}`)            console.log(`Escribio: ${element.timeline}`)        });     } else {        console.log('Usuario o constraseña incorrecta')    }} validarUsuarioYContraseña(usario, contraseña, usersTimeLine)
1. Me cree una pagina con un pequeño formulario donde se ingresen el usuario y contraseña con un botón que dispare la funcion de comprobar desde mi script. 2. `/*Base de datos de usuarios */` 3. `const userDatabase = [` 4. ` {` 5. ` username : "usuario1",` 6. ` password : "123456"` 7. ` },` 8. ` {` 9. ` username : "usuario2",` 10. ` password : "654321"` 11. ` },` 12. ` {` 13. ` username : "usuario3",` 14. ` password : "951357"` 15. ` },` 16. ` {` 17. ` username : "usuario4",` 18. ` password : "753159"` 19. ` },` 20. `]` 21. `/*Base de datos timeline */` 22. `const usersTimeline = [` 23. ` {` 24. ` username : "usuario1",` 25. ` timeline : "Aprendiendo Javascrit"` 26. ` },` 27. ` {` 28. ` username : "usuario2",` 29. ` timeline : "Parchando bici"` 30. ` },` 31. ` {` 32. ` username : "usuario3",` 33. ` timeline : "Cocinando"` 34. ` },` 35. ` {` 36. ` username : "usuario4",` 37. ` timeline : "Usando coca"` 38. ` }` 39. `]` 40. 41. `/*Funcion para realizar las validaciones del usuario y pass que se ingresan */` 42. `function comprobar(){` 43. ` /*Declarando variables que se obtienen de inputs en una pagina html */` 44. ` let usu = document.getElementById("usuario").value;` 45. ` let pass = document.getElementById("clave").value;` 46. 47. ` /*usando el metodo SOME para ver si hay algun elemento dentro del array` 48. ` de usuarios, aunque tambien se puede usar FIND pero lo use en la linea de en medio. */` 49. ` if (userDatabase.some((usuario) => usuario.username === usu.toLowerCase()) && userDatabase.some((usuario) => usuario.password === pass)) {` 50. ` ` 51. ` let u = usersTimeline.find((usuario1) => usuario1.username === usu.toLowerCase());` 52. 53. `` alert(`Bienvenido ${u.username}, ${u.timeline}`);`` 54. ` ` 55. ` } else {` 56. ` alert('Usuario u contraseña incorrecto!');` 57. ` }` 58. 59. ` ` 60. `}`
👋 Hola a todos, les comparto mi solución!![](https://static.platzi.com/media/user_upload/proyecto-login-60c9bc21-694f-42a7-a084-62c26d1e7c92.jpg)
Mi codigo corre directamente el VS Code: * Utiliza bucles para preguntarte nuevamente si: * User not found * User found but Incorrect password * Funciones para separar logica y hacer mas mantenible y escalable el codigo a futuro. Estoy abierto a feedback si observan algun tipo de mejora :) ```js const prompt = require("prompt-sync")({sigint:true}); /* Requirements: 1. The user should be able to insert it's name and password 2. The system must be able to validate if those name and password exist in the database 3. If so, the system should be able to display a welcome message and print the user timeline 4. If not, the system should display an error message and don't print any timeline */ const usersDatabase = [ {username:"andres",password:"123",}, {username:"caro",password:"456",}, {username:"mariana",password:"789",}, ]; const usersTimeline = [ {username:"estefany",timeline:"Me encata Javascript!",}, {username:"oscar",timeline:"Bebeloper es lo mejor!",}, {username:"mariana",timeline:"A mi me gusta mas el cafe que el tee",}, {username:"andres",timeline:"Yo hoy no quiero trabajar",}, ]; // Retorna el objeto del usuario logueado en caso de ser exitoso el loggin function loginProcess(usersDB) { let isLoggedIn = false; let user = ''; do { const userName = prompt('Username: '); const password = prompt('Password: '); // Search user for(let i=0; i < usersDB.length; i++) { if (usersDB[i].username == userName) { // User exists user = usersDB[i]; } } if (user) { // Validate user == password if (user.password == password) { // Used successfully logged in! console.log('correct pass! '); isLoggedIn = true; } else { console.log('Incorrect password'); isLoggedIn = false; user = ''; } } else { console.log('User not found'); isLoggedIn = false; user = ''; } } while(isLoggedIn == false); return user; } function showTimeLine(userLoggedIn){ let userTimeLine = ''; // Search the timeline for user logged in for(let i=0; i < usersTimeline.length; i++) { if (usersTimeline[i].username == userLoggedIn.username) { userTimeLine = usersTimeline[i].timeline; } } console.log(`Welcome ${userTimeLine.username}! your timeline is: ${userTimeLine}`); } // loginProcess(usersDatabase); const userLoggedInObject = loginProcess(usersDatabase); showTimeLine(userLoggedInObject); ```const prompt = require("prompt-sync")({sigint:true}); */\*    Requirements:*     *1. The user should be able to insert it's name and password        2. The system must be able to validate if those name and password exist in the database*     *3. If so, the system should be able to display a welcome message and print the user timeline*     *4. If not, the system should display an error message and don't print any timeline* *\*/* const usersDatabase = \[    {username:"andres",password:"123",},    {username:"caro",password:"456",},    {username:"mariana",password:"789",},];    const usersTimeline = \[    {username:"estefany",timeline:"Me encata Javascript!",},    {username:"oscar",timeline:"Bebeloper es lo mejor!",},    {username:"mariana",timeline:"A mi me gusta mas el cafe que el tee",},    {username:"andres",timeline:"Yo hoy no quiero trabajar",},]; *// Retorna el objeto del usuario logueado en caso de ser exitoso el loggin*function loginProcess(*usersDB*) {     let isLoggedIn = false;    let user = '';        do {         const userName = prompt('Username: ');        const password = prompt('Password: ');                    *// Search user*        for(let i=0; i < *usersDB*.length; i++) {            if (*usersDB*\[i].username == userName) {                *// User exists*                user = *usersDB*\[i];            }        }                if (user) {            *// Validate user == password*            if (user.password == password) {                *// Used successfully logged in!*                console.log('correct pass! ');                isLoggedIn = true;            } else {                console.log('Incorrect password');                isLoggedIn = false;                user = '';            }        } else {            console.log('User not found');            isLoggedIn = false;            user = '';        }    } while(isLoggedIn == false);        return user;} function showTimeLine(*userLoggedIn*){     let userTimeLine = '';        *// Search the timeline for user logged in*     for(let i=0; i < usersTimeline.length; i++) {        if (usersTimeline\[i].username == *userLoggedIn*.username) {            userTimeLine = usersTimeline\[i].timeline;        }    }        console.log(`Welcome ${userTimeLine.username}! your timeline is: ${userTimeLine}`);    } *// loginProcess(usersDatabase);*const userLoggedInObject = loginProcess(usersDatabase);showTimeLine(userLoggedInObject);
const usersDatabase = \[ { username: "Estefany", password: "password", }, { username: "Oscar", password: "Pass", }, { username: "Mariana", password: "contra", }, { username: "Andres", password: "superPass", }, ]; // Programa implementación const username = prompt("Ingrese su usuario"); const password = prompt("Ingrese su contraseña"); function usuarioExistente(username, password) { for (let i = 0; i < usersDatabase.length; i++) { console.log(`Comparando ${usersDatabase\[i].username} con ${username} y ${usersDatabase\[i].password} con ${password}`); if ( usersDatabase\[i].username === username && usersDatabase\[i].password === password ) { console.log("Es correcto."); return true; } } console.log("Es incorrecto."); return false; } usuarioExistente(username, password);
```js /* Requirements: 1. The user should be able to insert it's name and password 2. The system must be able to validate if those name and password exist in the database 3. If so, the system should be able to display a welcome message and print the user timeline 4. If not, the system should display an error message and don't print any timeline */ const usersDatabase=[ { username:"andres", password:"123", }, { username:"caro", password:"456", }, { username:"mariana", password:"789", }, ] const usersTimeline=[ { username:"Estefany", timeline:"Me encata Javascript!", }, { username:"Oscar", timeline:"Bebeloper es lo mejor!", }, { username:"Mariana", timeline:"A mi me gusta mas el cafe que el te", }, { username:"Andres", timeline:"Yo hoy no quiero trabajar", }, ] const username = prompt("What's your username?") const userPassword = prompt("What's your password?") function validateData(userName, userPassword, usersDataBase, usersTimeline) { const condition = usersDataBase.some(user => userName == user.username && userPassword == user.password) if (!condition){ console.log(`Sorry! ${username} is not registered in the system`) return } const timelineMessage = usersTimeline.find(user => userName == user.username.toLowerCase()) if (timelineMessage == undefined) { console.log(`Sorry! ${userName} does not have any records yet in the system`) return } console.log(`${timelineMessage.timeline}`) return } validateData(username, userPassword, usersDatabase, usersTimeline) ```# Solucion
![](https://static.platzi.com/media/user_upload/image-37462122-481b-4531-b3dd-6a5af0d25d88.jpg) Aca les comparto mi solucion
Mi pequeño aporte: ![](https://static.platzi.com/media/user_upload/image-85aa0507-dcea-4162-90f9-bc2313af9414.jpg) ![](https://static.platzi.com/media/user_upload/image-1113747f-0f07-492b-ab16-936586db21d2.jpg) Lo que intente, (ya que estoy con Node.js) fue simular los inputs, y a partir de ahí, manejar de forma "sincrona" (no se si sea la manera correcta de decirlo), para simular el tiempo de espera en la solicitud con el setTimeOut. :)
```js // mi solución (debes usar html) const usersDatabase = [ { username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", }, ]; const usersTimeline = [ { username: "Estefany", timeline: "Me encata Javascript!", }, { username: "Oscar", timeline: "Bebeloper es lo mejor!", }, { username: "Mariana", timeline: "A mi me gusta más el café que el té", }, { username: "Andres", timeline: "Yo hoy no quiero trabajar", }, ]; const usuario = document.getElementById('usuario') const contraseña = document.getElementById('contraseña') const boton = document.getElementById('boton') const respuesta = document.getElementById('respuesta') boton.addEventListener('click', usuarioExiste) function usuarioExiste() { const usuarioIngresado = usuario.value const contraseñaIngresada = contraseña.value const comprobaciondeusuario = usersDatabase.find(usuario => usuario.username === usuarioIngresado && usuario.password === contraseñaIngresada) if (comprobaciondeusuario) { const comprobaciondemensaje = usersTimeline.find(usuario => usuario.username.toLowerCase() === comprobaciondeusuario.username.toLowerCase()) if (comprobaciondemensaje) { respuesta.innerHTML = comprobaciondemensaje.timeline } else { respuesta.innerHTML = 'no hay mensajes publicados' } } else { respuesta.innerHTML = ' usuario y/o contraseña incorreta' } } ```const usersDatabase = \[  {    username: "andres",    password: "123",  },  {    username: "caro",    password: "456",  },  {    username: "mariana",    password: "789",  },]; const usersTimeline = \[  {    username: "Estefany",    timeline: "Me encata Javascript!",  },  {    username: "Oscar",    timeline: "Bebeloper es lo mejor!",  },  {    username: "Mariana",    timeline: "A mi me gusta más el café que el té",  },  {    username: "Andres",    timeline: "Yo hoy no quiero trabajar",  },]; const usuario = document.getElementById('usuario')const contraseña = document.getElementById('contraseña')const boton = document.getElementById('boton')const respuesta = document.getElementById('respuesta')boton.addEventListener('click', usuarioExiste) function usuarioExiste() {    const usuarioIngresado = usuario.value    const contraseñaIngresada = contraseña.value     const comprobaciondeusuario = usersDatabase.find(usuario => usuario.username === usuarioIngresado && usuario.password === contraseñaIngresada)     if (comprobaciondeusuario) {        const comprobaciondemensaje = usersTimeline.find(usuario => usuario.username.toLowerCase() === comprobaciondeusuario.username.toLowerCase())        if (comprobaciondemensaje) {            respuesta.innerHTML = comprobaciondemensaje.timeline        } else {            respuesta.innerHTML = 'no hay mensajes publicados'        }              } else {        respuesta.innerHTML = ' usuario y/o contraseña incorreta'    } }
// mi solución (debes usar html) const usersDatabase = \[  {    username: "andres",    password: "123",  },  {    username: "caro",    password: "456",  },  {    username: "mariana",    password: "789",  },]; const usersTimeline = \[  {    username: "Estefany",    timeline: "Me encata Javascript!",  },  {    username: "Oscar",    timeline: "Bebeloper es lo mejor!",  },  {    username: "Mariana",    timeline: "A mi me gusta más el café que el té",  },  {    username: "Andres",    timeline: "Yo hoy no quiero trabajar",  },]; const usuario = document.getElementById('usuario')const contraseña = document.getElementById('contraseña')const boton = document.getElementById('boton')const respuesta = document.getElementById('respuesta')boton.addEventListener('click', usuarioExiste) function usuarioExiste() {    const usuarioIngresado = usuario.value    const contraseñaIngresada = contraseña.value     const comprobaciondeusuario = usersDatabase.find(usuario => usuario.username === usuarioIngresado && usuario.password === contraseñaIngresada)     if (comprobaciondeusuario) {        const comprobaciondemensaje = usersTimeline.find(usuario => usuario.username.toLowerCase() === comprobaciondeusuario.username.toLowerCase())        if (comprobaciondemensaje) {            respuesta.innerHTML = comprobaciondemensaje.timeline        } else {            respuesta.innerHTML = 'no hay mensajes publicados'        }              } else {        respuesta.innerHTML = ' usuario y/o contraseña incorreta'    } }
Como recomendación, tengan presente lo de la sesión de funciones puras sobre funciones puras e impuras: La función usuarioExistente no es pura dado que imprime en consola. Sería mejor que dicha función retorne un valor, digamos un booleano. Y ya afuera de dicha función se hace lo que se tenga que hacer al respecto... ```js function usuarioExistente(username, password) { for (let i = 0; i < usersDatabase.length; i++) { if ( usersDatabase[i].username === username && usersDatabase[i].password === password ) { // Si lo encontró, no es necesario // seguir dentro de la funcion return true; } } // Si sale del for, entonces no encontró return false; } // Este if podría ir dentro de otra función if (usuarioExistente("caro", "456")) { console.log("Se encontró") } else { console.log("No se encontró") } ```La gracia de hacerlo así, es separar en dos, de acuerdo con el modelo vista-controlador: (MVC) * el "controlador", la lógica de validación en sí del usuario, en este caso, la función * la "vista", la lógica de visualización de los datos, en este caso, por consola (Nota: El Modelo Vista-Controlador "MVC" es una forma de modelar una solución informática, en vistas (interfaz de usuario) y modelos (lógica). Erróneamente se dice que el "modelo" es un elemento aparte y no lo es, eso es un efecto mandela, un error de traducción, por lo que no lo mencioné antes de esta nota)
Esta es mi solución: ```js /* Requerimientos del reto: 1. El usuario debe poder ingresar su usuario y contraseña. 2. El sistema debe de ser capaz de validar si el usuario y contraseña existen en la base de datos.} 3. Si el usuario y contraseña son correctos, el sistema debe de mostrar un mensaje de bienvenida y mostrar el timeline del usuario. 4. Si el usuario y contraseña son incorrectos, el sistema debe de mostrar un mensaje de error y no mostrar ningún timeline. */ const usersDatabase=[ { username:"andres", password:"123" }, { username:"caro", password:"456" }, { username:"mariana", password:"789" } ]; const usersTimeline=[ { username:"Estefany", timeline:"Me encata Javascript!" }, { username:"Oscar", timeline:"Bebeloper es lo mejor!" }, { username:"Mariana", timeline:"A mi me gusta más el café que el té" }, { username:"Andres", timeline:"Yo hoy no quiero trabajar" } ]; const login= (username) => { const user = usersDatabase.reduce((accumulator, currentValue) => { if (currentValue.username === username) { accumulator = true; } return accumulator; }, {}); return user; } const password = (username, password) => { const user = usersDatabase.reduce((accumulator, currentValue) => { if (currentValue.username === username && currentValue.password === password) { accumulator = true; } return accumulator; }, {}); return user; } const showTimeline = (username) => { const timeline = usersTimeline.reduce((accumulator, currentValue) => { if (currentValue.username.toLowerCase() === username) { accumulator = currentValue.timeline; } return accumulator; }, {}); return timeline; } const nombreUsuario = prompt('Ingresa tu nombre de usuario'); const contrasena = prompt('Ingresa tu contrasena'); if (login(nombreUsuario) && password(nombreUsuario, contrasena)) { console.log(`Bienvenido ${nombreUsuario}`); console.log(showTimeline(nombreUsuario)); } else { if (!login(nombreUsuario)) { console.log('Usuario incorrecto'); } else { console.log('Contrasena incorrecta'); } } ```Espero les ayude a inspirarse a alguna persona. No era necesario, pero quería usar el "reduce" ya que siento que tiene mucha aplicabilidad y a veces se olvida.
![]()![]()![](file:///C:/Users/Jona/Pictures/Screenshots/Captura%20de%20pantalla%202024-09-14%20144549.png)Aqui mi solución al porblema: Ademas aplique los conocimientos aprendidos en los cursos de html y css para darle un toque mas interactivo. HTML: ```html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <style> @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); </style> <link rel="stylesheet" href="./css/main.css"> </head> <body> <section id="content" class="content"> </section> <section id="modal-approved" class="access-approved">

ACCESS APPROVED

WELCOME

</section> <section id="modal-denied" class="access-denied">

ACCESS DENIED

WRONG PARAMETERS

</section> <button id="retry" class="primary-botton retry "> RETRY </button> </body> <script src="./main.js"></script> </html> ``````css @import './reset.scss'; body { position: relative; display: grid; place-items: center; background-image: url(../assets/820cff50cb608fb5321461b275b72ab1.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100vw; height: 100vh; } .content { display: flex; justify-content: center; align-items: center; gap: 2rem; background-color: #ffffff; padding: 6rem; width: 90%; max-width: 100rem; height: 60rem; border-radius: 6px; box-shadow: -5px 1px 29px 0px lightslategrey; .girl-work { width: 60%; min-height: auto; max-height: 100%; } } .login { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; width: 40%; height: 100%; padding: 3rem; border-radius: 6px; box-shadow: -5px 1px 29px 0px #9099a2; } .login-tittle { font-size: 2.4rem; } .login-subtitle-text { display: flex; justify-content: space-between; align-items: center; } .login-subtitle { font-size: 1.4rem; font-weight: 300; color: rgb(192, 191, 191); } .strong-color { color: #9870fb; text-decoration: underline; font-size: 1.3rem; cursor: pointer; &:hover { text-decoration: none; } } .forgot-password { position: absolute; right: 0; font-size: 1.2rem; } .login-form { display: flex; flex-direction: column; gap: 2rem; width: 100%; } .login-label { position: relative; display: flex; flex-direction: column; font-size: 1.4rem; font-weight: 500; gap: 0.6rem; .input-login { height: 4.4rem; padding: 1.4rem; border: 1px solid #c0bfbf; border-radius: 4px; outline: #9870fb; } } .remeber-me { display: flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; list-style: none; color: #c0bfbf; width: auto; cursor: pointer; & input { cursor: pointer; } } .primary-botton { background-color: #9870fb; border: solid 1px #9870fb; color: #ffffff; border-radius: 4px; height: 4.4rem; cursor: pointer; &:hover { background-color: transparent; color: #9870fb; } } .or-login-with { position: relative; margin: 1rem 0; display: flex; font-size: 1.2rem; justify-content: center; border-top: 1px solid #c0bfbf; p { position: absolute; top: -8px; background-color: #ffffff; color: rgb(192, 191, 191); padding: 0 1rem; } } //Social-networks Buttons .social-networks-login-buttons { display: flex; justify-content: space-between; } .secundary-button { display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: 49%; height: 5rem; background-color: #ffffff; border-radius: 4px; font-weight: 500; cursor: pointer; .icon-button { height: 50%; } } .google-botton { border: solid 1px #dc6561; color: #dc6561; } .facebook-botton { border: solid 1px #3d6ad6; color: #3d6ad6; } //ACCESS .access-approved, .access-denied { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; width: 50rem; height: 30rem; background-color: #ffffff; border-radius: 6px; box-shadow: -5px 1px 29px 0px #9099a2; z-index: 20; img { width: 30%; } } .display-flex { display: flex; } .display-none { display: none; } //RETRY .retry { position: absolute; bottom: 30%; color: #ffffff; width: 12rem; &:hover { color: #ffffff; } } ```JavaScript: ```js const content = document.getElementById('content') const modalApproved = document.getElementById('modal-approved') const modalDenied = document.getElementById('modal-denied') const retry = document.getElementById('retry') const nameModal = document.getElementById('name') let access = false retry.addEventListener('click', () => {location.reload()}) retry.classList.add('display-none') class UsersDataBase { constructor(name, username, password) { this.name = name this.username = username this.password = password } } const user1 = new UsersDataBase ('Jonathan', '[email protected]', 'user1.12345') const user2 = new UsersDataBase ('Juan', '[email protected]', 'user2.12345') const user3 = new UsersDataBase ('Diego', '[email protected]', 'user3.12345') const user4 = new UsersDataBase ('Maria', '[email protected]', 'user4.12345') const user5 = new UsersDataBase ('Merelin', '[email protected]', 'user5.12345') const users = [user1, user2, user3, user4, user5] const loginButton = document.getElementById('login-button') loginButton.addEventListener('click', findUser) function findUser (event) { event.preventDefault() console.log(users) const inputEmail = document.getElementById('input-email').value const inputPassword = document.getElementById('input-password').value for (let i = 0; i < users.length; i++) { if(users[i].username === inputEmail && users[i].password === inputPassword) { nameModal.innerHTML = users[i].name.toUpperCase() access = true break } else { if(i == 4) { modalDenied.classList.add('display-flex') } } } if(access == true) { retry.innerHTML = 'HOME' modalApproved.classList.add('display-flex') } content.classList.add('display-none') retry.classList.toggle('display-none') } ```
les comparto como yo lo hice, estuve un buen rato matandome la cabeza queriendolo hacer con *some* pero no pude asi que mire la respuesta y vi que era simplemente habia que usar if jaja ```js const username = prompt("Cuál es tu usuario?").toLowerCase(); const password = prompt("Cuál es tu contraseña?"); let existUsername = 0 for( i = 0 ; i < usersDatabase.length ; i ++ ){ if ( username === usersDatabase[i].username && password === usersDatabase[i].password){ console.log(`Bienvenido ${username}`) let existTimeline = 0 for( i = 0 ; i < usersTimeline.length ; i ++ ){ if(username == usersTimeline[i].username){ console.log(`Timeline: ${usersTimeline[i].timeline}`) existTimeline ++ } } if(existTimeline === 0){ console.log ("No hay Timeline") } existUsername ++ } } if (existUsername === 0){ console.log ("Error, usuario o contraseña incorrectos") } ```
mi solución, de un novato, pude haber mejores obviamente, lo importante es que llegue a una solución ```js const usersDatabase = [ { username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", }, ]; const usersTimeline = [ { username: "Estefany", timeline: "Me encata Javascript!", }, { username: "Oscar", timeline: "Bebeloper es lo mejor!", }, { username: "Mariana", timeline: "A mi me gusta más el café que el té", }, { username: "Andres", timeline: "Yo hoy no quiero trabajar", }, ]; const username = 'enter the username'; const password = 'enter this password'; const textOfSystem = ['Welcome to the better social network', 'enter the data request in the window emerget', 'for enter to the social network', 'Retrum to home system'] textOfSystem.l function startSocialNedwork (showsText, username, password, nextFuntion) { for (let i = 0; i < showsText.length; i++) { if (i < 3) {console.log(showsText[i]);} if (i === 2) { username = prompt('enter the username:'); password = prompt('enter this password:'); } } nextFuntion(username, password, usersTimeline); } function selectionUserOfSocialNetwork (username, password, usersTimeline) { let userFind = false; for (getUser of usersDatabase) { if (getUser.username === username && getUser.password === password) { console.info('------------------------------------------------------') console.log('Welcome to the social nedwook') userFind = true ; for (showsTimeline of usersTimeline) { console.log(' ' + showsTimeline.username) console.log(' ' + showsTimeline.timeline) } } } if (userFind !== true) { console.log('The user no find') console.log('Try again 😅🫤😃☹️😃') console.info('------------------------------------------------------') } } startSocialNedwork(textOfSystem, username, password, selectionUserOfSocialNetwork) ```
Comparto mi solución ![](https://static.platzi.com/media/user_upload/image-e45f83a5-83f2-4ca4-8ea9-22271512c5cc.jpg)
Aqui les dejo el codigo con los comentarios para que puedan entender mejor el código y tengan una idea que hace cada función, ciclo y condicional ```js // mini base de datos para ejercicio de confimarciones const usersDatabase=[ {username:"andres",password:"123",}, {username:"caro",password:"456",}, {username:"mariana",password:"789",}, ]; const usersTimeline=[ {username:"Estefany",timeline:"Me encata Javascript!",}, {username:"Oscar",timeline:"Bebeloper es lo mejor!",}, {username:"Mariana",timeline:"A mi me gusta más el café que el té",}, {username:"Andres",timeline:"Yo hoy no quiero trabajar",}, ]; // se crea las constantes para solicitar al usuario sus datos const username=prompt("Cual es tu usuario?"); const password=prompt("Cual es tu contraseña?"); //se crea una función para validar de que el usuario se encuentre en la mini base de datos function usuarioExistente(username,password){ //se itera en la base de datos para verificar si el usuario y contraseña coinciden for(let i=0;i<usersDatabase.length;i++){ //si coinciden, se retorna true y se termina la función if(usersDatabase[i].username===username&&usersDatabase[i].password===password){ return true; } } return false; } //se crea una función para iniciar sesión al sistema function signIn(username,password){ //por medio del if se valida si existe if(usuarioExistente(username,password)){ //si es correcto, se muestra un mensaje de bienvenida y se imprime el timeline del usuario alert(`Bienvenido a tu cuenta ${username}`); console.log(usersTimeline); //de lo contrario se muestra una alerta y no permite que continue con el proceso }else{ alert("Uuups, usuario o contraseña incorrectos!"); } } signIn(username,password); ```
Mi pequeño aporte: ```js let nombre = prompt('* Digite userName: ') let contrasena = prompt('* Coloque su Password: ') for (let element = 0; element < usersDatabase.length; element++) { if (nombre == usersDatabase[element].username && contrasena == usersDatabase[element].password) { let userMayucula = usersDatabase[element].username.charAt(0).toUpperCase() let residuoString = usersDatabase[element].username.slice(1) const nombreMayuscula = userMayucula + residuoString for (let key in usersTimeline) { if(nombreMayuscula == usersTimeline[key].username){ alert(`OK. User Name: ${usersTimeline[key].username} Time Line: ${usersTimeline[key].timeline}`) break } } break }else{ alert("Valide su contraseña y password") break } } ```let nombre = prompt('\* Digite userName: ')let contrasena = prompt('\* Coloque su Password: ') for (let element = 0; element < usersDatabase.length; element++) {     if (nombre == usersDatabase\[element].username  && contrasena == usersDatabase\[element].password) {                let userMayucula = usersDatabase\[element].username.charAt(0).toUpperCase()        let residuoString = usersDatabase\[element].username.slice(1)        const nombreMayuscula = userMayucula + residuoString         for (let key in usersTimeline) {                                   if(nombreMayuscula == usersTimeline\[key].username){                alert(`OK. User Name: ${usersTimeline\[key].username} Time Line: ${usersTimeline\[key].timeline}`)                break            }                         }        break    }else{                alert("Valide su contraseña y password")          break          } }
Así logré cumplir el reto yo 😅 ```js //Base de Datos de los usuarios const usersDataBase = [ { username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", } ] // Timeline de los usuarios const usersTimeline = [ { username: "Estefany", timeline: "Me encanta JavaScript", }, { username: "Oscar", timeline: "Bebeloper es lo mejor!", }, { username: "Mariana", timeline: "A mi me gusta más el café que el té", }, { username: "Andres", timeline: "Yo hoy no quiero trabajar", }, ] // Petición de datos del usuario const userName = prompt("¿Cuál es tu usuario?"); const userPass = prompt("¿Cuál es tu contraseña"); //Declaración de la variable a comprobar let userExists = false; // Comprobando si el usuario y contraseña coinciden con algún usuario en la base de datos for (i = 0; i < usersDataBase.length; i++) { if (userName === usersDataBase[i].username && userPass === usersDataBase[i].password) { userExists = true; break; } } // Función para mostrar el timeline function showTimeline () { for (i = 0; i < usersTimeline.length; i++) { console.log("Usuario: " + usersTimeline[i].username); console.log("Mensaje: " + usersTimeline[i].timeline); } } // Alerta de bienvenida o datos incorrectos if (userExists) { alert("Bienvenido!"); showTimeline (); } else { alert("Usuario o contraseña incorrecto") } ```//*Base de Datos de los usuarios*const usersDataBase = \[    {        username: "andres",        password: "123",    },    {        username: "caro",        password: "456",    },    {        username: "mariana",        password: "789",    }] // *Timeline de los usuarios*const usersTimeline = \[    {        username: "Estefany",        timeline: "Me encanta JavaScript",    },    {        username: "Oscar",        timeline: "Bebeloper es lo mejor!",    },    {        username: "Mariana",        timeline: "A mi me gusta más el café que el té",    },    {        username: "Andres",        timeline: "Yo hoy no quiero trabajar",    },] // *Petición de datos del usuario*const userName = prompt("¿Cuál es tu usuario?");const userPass = prompt("¿Cuál es tu contraseña"); //*Declaración de la variable a comprobar*let userExists = false; // *Comprobando si el usuario y contraseña coinciden con algún usuario en la base de datos*for (i = 0; i < usersDataBase.length; i++) {    if (userName === usersDataBase\[i].username && userPass === usersDataBase\[i].password) {        userExists = true;        break;    }} // *Función para mostrar el timeline*function showTimeline () {    for (i = 0; i < usersTimeline.length; i++) {        console.log("Usuario: " + usersTimeline\[i].username);        console.log("Mensaje: " + usersTimeline\[i].timeline);            }} // *Alerta de bienvenida o datos incorrectos*if (userExists) {    alert("Bienvenido!");    showTimeline ();} else {    alert("Usuario o contraseña incorrecto")}
Yo lo hice usando el ciclo **for...of** para iterar en el arreglo de objetos y a la condicional le agregué el método **toLowerCase( )** para que al comparar el usuario no importe si está en mayusculas o en minusculas. Sin embargo, viendo los comentarios te das cuenta lo cierto cuando dicen que hay varias maneras de llegar al mismo resultado cómo los que usaron el método find( ) que también es una muy buena opción. Recuerden que lo importante aquí es haberlo intentado y haber pensado en una solución. Si van empezando puede que entren como en un bloqueo y no saben como empezar, es normal tómense su tiempo, vean paso a paso que es lo que necesitan. Pueden buscar en apuntes en clases pasadas cuál método o condicional te sirve o incluso apoyarte con IA si tienes un error. :DD ```js const usersDatabase=[ ... ]; const usersTimeline=[ ... ]; function logIn(user, pwd){ for (element of usersDatabase){ if(user.toLowerCase() === element.username.toLowerCase() && pwd == element.password){ return infoUser(user) } } return console.log("No se ha encontrado este usuario y", "contraseña"); } function infoUser(user){ for(element of usersTimeline){ if(user.toLowerCase() === element.username.toLowerCase()){ return console.log(`Hola ${element.username},`, `tu mensaje es: "${element.timeline}"`); } } } const user = prompt("¿Cuál es tú usuario?") const pwd = prompt("¿Cuál es tú contraseña?") logIn(user, pwd) ```
```js const UsersDatabase = [ { username:"Luis", password:"Mimosa" }, { username:"Paco", password:"Paco1234" } ]; const UsersTimeLine = [ { username:"Luis", timeline:"Estoy en vista" }, { username:"Paco", timeline:"Estoy viajando en este momento" } ]; function UserValidation (User,pass) { let Estado = 0 let Mensaje = "" for(let i = 0; i < UsersDatabase.length ;i ++) { if(UsersDatabase[i].username === User && UsersDatabase[i].password === pass) { Estado = 1 alert(Estado.toString()) for(let p = 0 ;p < UsersTimeLine.length;p++) { if(UsersTimeLine[p].username === User) { Mensaje = UsersTimeLine[i].timeline; } } } else{ } } if(Estado !== 1) { alert("No se encontro alguna coincidencia 😒") } else if(Estado === 1) { alert(`fetebook : Bienvenid@ ${User} tu timeLine es ${Mensaje}`); Estado = 0 } } const User = prompt("Ingresa tu usuario"); const pass = prompt("Ingresa tu contraseña"); UserValidation(User,pass); ```
![](https://static.platzi.com/media/user_upload/image-744ea86d-d340-4b0a-b7ca-883c19226895.jpg)
![](https://static.platzi.com/media/user_upload/code-bb073909-d940-4a1b-92a7-68eb776ac548.jpg)
![](https://static.platzi.com/media/user_upload/Screenshot%20from%202024-08-06%2020-50-51-b09174f7-3766-49e9-a322-01dccbc3a8da.jpg)
Buenas noches, aquí les comparto mi solución implementando tambien html y js. HTML ```js <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Red-Social</title> </head> <body>

Validation User

<form id="search_user"> <label for="value">Enter you User</label> <input type="text" id="value" placeholder="Enter_user"> <label for="password_validate">Enter Password</label> <input type="password" id="password_validate" placeholder="******" > <input type="submit" value="submit" id="submit_validate"> <button id="back_two">Back</button> </form>
<script src="scripts.js"></script> </body> </html> ```Js ```js let name_User = document.getElementById("name_User"); let password_User = document.getElementById("password"); let disguise_menu = document.getElementById("menuDiv"); let containerDiv = document.getElementById("containerDiv"); let user_open = document.getElementById("user_open"); let back_two = document.getElementById("back_two"); //let submit_validate = document.getElementById("submit_validate"); let value_enter = document.getElementById("value"); let password_validate = document.getElementById("password_validate"); user_open.style.display = "none"; containerDiv.style.display = "none"; console.log(name_User, password_User, disguise_menu, containerDiv); if (!name_User || !password_User || !disguise_menu || !containerDiv) { console.error('¡Faltan uno o más elementos!'); } document.getElementById("menuForm").addEventListener("submit", (event) => { event.preventDefault() const selectedMenu = document.getElementById("menu").value; if (selectedMenu === "new-User") { disguise_menu.style.display = "none"; containerDiv.style.display = "block"; }else if (selectedMenu === "User") { user_open.style.display = "block"; disguise_menu.style.display = "none"; } }) class NewUser{ constructor(name, password) { this.name = name.trim(); this.password = password; } static enterDat(name, password){ return new NewUser(name, password); } } let userList = [] document.getElementById("select-enter").addEventListener("submit", (event) => { event.preventDefault() const name = name_User.value; // Get the value of the input const password = password_User.value; // Get the value of the input let enter_User = NewUser.enterDat(name, password) userList.push(enter_User) console.log(enter_User) }) let back = document.getElementById("back") document.getElementById("search_user").addEventListener("submit", (event) => { event.preventDefault(); const enteredName = value_enter.value.trim(); // Remove extra spaces const enteredPassword = password_validate.value; console.log("Entered Name:", enteredName); console.log("Entered Password:", enteredPassword); let userFound = userList.some(user => { console.log("Checking user:", user.name); // Debug information return user.name.toLowerCase() === enteredName.toLowerCase() && user.password === enteredPassword; }); if (userFound) { console.log("Correct"); } else { console.log("Invalid credentials"); } }) back.addEventListener("click", (event) => { event.preventDefault() disguise_menu.style.display = "block"; containerDiv.style.display = "none"; }); back_two.addEventListener("click", (event) => { event.preventDefault() disguise_menu.style.display = "block"; user_open.style.display = "none"; }) ```
¡Hola! Comparto mi solución antes de ver la clase. Añadí funciones adicionales como crear usuario e ingresar: ```js const usersDatabase = [ { username: 'Diego', password: '123', }, { username: 'Juan', password: '123' }, { username: 'Pedro', password: '123' } ] const usersTimeline = [ { username: "Pablo", timeline: "Este es el timeline de Pablo" }, { username: "Juan", timeline: "Este es el timeline de Juan" }, { username: "Pedro", timeline: "Este es el timeline de Pedro" }, { username: "Diego", timeline: "Este es el timeline de Diego" } ] class User { constructor(user, pass) { this.username = user; this.password = pass; } } class UserTimeline extends User { constructor(user, timeline) { super(user, ''); this.timeline = timeline; } } function createUser() { // Crear un usuario y su timeline const userName = prompt('Ingrese el nombre de usuario a crear: ') const password = prompt('Ingrese una contraseña: ') const newUser = new User(userName, password); const timeline = prompt(`Ingrese un timeline para el usuario ${userName}`) const newTimeline = new UserTimeline(userName, timeline); usersDatabase.push(newUser) usersTimeline.push(newTimeline) alert(`Usuario ${newUser.username} creado con éxito`) app() } function logIn() { // Ingresar y mostrar el timeline const userEntry = prompt('Ingrese su usuario: ') const isValidUser = usersDatabase.some(user => user.username.toLowerCase() === userEntry.toLowerCase()) if (isValidUser) { const passEntry = prompt('Ingrese su contraseña: ') const isValidPass = usersDatabase.some(user => user.password === passEntry) if (isValidPass) { const userTimeline = usersTimeline.find(user => user.username.toLowerCase() === userEntry.toLowerCase()).timeline alert(`Bienvenido ${userEntry}, tu timeline es '${userTimeline}'`) } else { alert('Contraseña incorrecta') } } else { alert('Usuario no encontrado') } app() } function app() { // Ejecucion de la app while (true) { const menu = Number(prompt(`Hola!, bienvenido. \n ¿Desea crear un usuario o iniciar sesión? \n Escriba el numero que corresponda a la opción deseada \n 1. Crear 2. Iniciar sesión 3. Salir`)) switch (menu) { case 1: createUser(); break; case 2: logIn(); break; case 3: alert('Nos vemos pronto!') break; default: alert('Ingrese una opción válida'); continue; } return } } ```
```js const usuario = prompt('Introduce un nombre:') const contraseña = prompt('Introduce una contraseña:') const resultadoValidado = validarUsuario(usuario, contraseña) mensaje(resultadoValidado) function validarUsuario(usuario, contraseña) { let resultado = ''; for (let userDB of usersDatabase) { if (usuario === userDB.username && contraseña === userDB.password) { resultado = true break } else { resultado = false } } return resultado } function mensaje(resultado) { if (resultado) { for (userTL of usersTimeline) { if (usuario === userTL.username.toLowerCase()) { console.log('Hola', userTL.username, ', Bienvenido a la red social Z!'); console.log('Timeline: ', userTL.timeline); } } } else { console.log('Error de inicio de sesion :('); } } ```
mi código no pongo la base de datos para no saturar la imagen ![](https://static.platzi.com/media/user_upload/image-5a172094-8f07-4658-9f9e-4ec3fe04af76.jpg)![](https://static.platzi.com/media/user_upload/image-479943b3-69bb-4dde-8d15-90770a64f6d0.jpg)
## Mi solución Hola! Les comparto [mi código](https://codepen.io/Yareaj/pen/LYaRWqo?editors=0012) antes de la clase: ```js // Sample Data const usersDatabase = [ { username: "andres", password: "123" }, { username: "caro", password: "456" }, { username: "mariana", password: "789" } ]; const usersTimeline = [ { username: "Estefany", timeline: "Me encata Javascript!" }, { username: "Oscar", timeline: "Bebeloper es lo mejor!" }, { username: "Mariana", timeline: "A mi me gusta mas el cafe que el te" }, { username: "Andres", timeline: "Yo hoy no quiero trabajar" } ]; function userLogin() { let needsToInputCredentials = true; while (needsToInputCredentials) { const username = prompt("Please input your username").toLowerCase(); const validUsername = existingUsername(username); if (!validUsername) { alert("Username not found in the database, please try again!"); continue; } const password = prompt("Please input your password"); const validCredentials = validatePassword(username, password); if (!validCredentials) { alert("Invalid credentials provided, please try again!"); continue; } alert(`Welcome ${validCredentials.username}\nYour timeline: "${validCredentials.timeline}"`) needsToInputCredentials = false; } } function existingUsername(username) { const usernameList = usersDatabase.map((userObject) => { return userObject.username }); return usernameList.includes(username); } function validatePassword(username, password) { let foundInformation = false; for (let crendentialsIterator = 0; crendentialsIterator < usersDatabase.length; crendentialsIterator++) { if (usersDatabase[crendentialsIterator].username == username && usersDatabase[crendentialsIterator].password == password) { for (let timelineExplorer = 0; timelineExplorer < usersTimeline.length; timelineExplorer++) { if (usersTimeline[timelineExplorer].username.toLowerCase() == username) { foundInformation = usersTimeline[timelineExplorer]; break; } } break; } } return foundInformation; } userLogin(); ```
```js const currentUser = {} function userAuth({username, password}) { const isUserValid = usersDatabase.find( user => user.username === currentUser.username && user.password ===currentUser.password); const userIndex = usersTimeline.findIndex(user => user.username.toLowerCase() === currentUser.username); if (isUserValid){ let timeline = usersTimeline[userIndex] ? usersTimeline[userIndex].timeline : 'cuando quieras puedes agregar un timeline'; console.warn( `bienvenido ${currentUser.username} timeline: ${timeline}`) }else{ console.error(`mamaste ${currentUser.username}, el usuario o contrasenha son incorrectos`) } //me costo un poco solo por recordar bien que devolvian los metodos de las funciones xd } function getUserData() { currentUser.username = prompt('cual es tu usuario?'); currentUser.password = prompt('cual es tu contrasenha?') } getUserData() userAuth(currentUser) ```
`const usersDatabase = [{ username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", }]const usersTimeline=[{username:"Estefany",timeline:"Me encata Javascript!",},{username:"Oscar",timeline:"Bebeloper es lo mejor!",},{username:"Mariana",timeline:"A mi me gusta más el café que el té",},{username:"Andres",timeline:"Yo hoy no quiero trabajar",},]` `class userInput {    constructor(user, pass){        this.username = user        this.password = pass    }    signIn() {        const userDB = usersDatabase.find(userDB => userDB.username === this.username.toLowerCase() )        if (userDB){            if(userDB.password !== this.password){                console.log('Contrasena incorrecta');                return            }               console.log('Iniciando Sesion');            console.log('Bienvenido '+ this.username);            const userFeed = usersTimeline.find(usersFeed => usersFeed.username.toUpperCase() === this.username.toUpperCase())            if (userFeed) {                console.log('Resumen de tu actividad '+ this.username);                console.log('Post: ' + userFeed.timeline);            }        } else {            console.log('El usuario no existe');        }    }}` `const andres = new userInput('AnDres', '123')` `andres.signIn()` Esta fu'e mi solucion antes de ver el video completo.
![](https://static.platzi.com/media/user_upload/image-a411520c-4089-4d96-a5c2-428df0cc3673.jpg)
Esta es mi solución, antes de ver la respuesta correcta: ```js function logIn(usernameInput, passwordInput) { if (usersDatabase.find((credential) => credential.username === usernameInput && credential.password === passwordInput )) { console.log(`Access granted. Welcome back ${usernameInput}.`); displayTimeline(); } else { console.log('Access denied. The authorities are on their way.') }; }; function displayTimeline() { usersTimeLine.forEach((user) => { console.log(`Your friend ${user.username} says: [${user.timeline}]`); }); }; ```
Buenas a todos, quiero mostrar lo que hice antes de iniciar la clase: ```javascript constusersDatabase = \[    { username: "andres", password: "123" },    { username: "caro", password: "456" },    { username: "mariana", password: "789" },  ];const username = prompt('Digita tu nombre de usuario').toLocaleLowerCase()const password = prompt('Digita tu contraseña') class timeline{    constructor(nombreUsuario, publicaciones, fotos, videos, compartidos ){        this.nombreUsuario = nombreUsuario        this.publicaciones = publicaciones        this.fotos = fotos        this.videos = videos        this.compartidos = compartidos    }     timelineCompleto(){        console.log(`Hola ${this.nombreUsuario}, ahora te mostraremos tu timeline:        -Tu numero de publicaciones son ${this.publicaciones}        -Tu cantidad de fotos es ${this.fotos}        -Tu cantidad de videos es ${this.videos}        -Tus videos compartidos son ${this.compartidos}            `)    }} function verificacionDeUsuario(username, password) {    const user = usersDatabase.find(user => username === user.username && password === user.password)    if(user){        const timelineDeUsuario = new timeline(username, 17, 5, 2, 8)        timelineDeUsuario.timelineCompleto()    }else{        console.log('Usuario o contraseña incorrecta')    }} verificacionDeUsuario(username, password) ```