Introducción a JavaScript
Fundamentos de JavaScript para Principiantes
Instalación y Configuración de JavaScript en Visual Studio Code
Instalación y configuración de Visual Studio Code y Node.js en Windows
Variables y Buenas Prácticas en JavaScript
Tipos de Datos en JavaScript: Primitivos y Complejos
Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings
Números y Operaciones Matemáticas en JavaScript
Conversión de Tipos en JavaScript: Implícita y Explícita
Conversión de Tipos en JavaScript: Explícita e Implícita
Estructuras de Control y Lógica
Operadores de Comparación en JavaScript: Igualdad y Desigualdad
Operadores Lógicos en Programación: AND, OR y NOT
Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript
Juego de Adivinanza: Programación con Estructuras Condicionales
Estructura y uso del condicional Switch en programación
Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript
Iteración con for-of en JavaScript para arrays y strings
Iteración sobre Objetos con forIn en JavaScript
Uso del ciclo while para iteración en programación
Ciclos doWhile: Estructura y Diferencias con While
Funciones y This
Funciones en JavaScript: Cómo Calcular Precios con Descuentos
Diferencias entre Funciones y Métodos en JavaScript
Funciones Puras e Impuras en Programación: Conceptos y Ejemplos
Arrow Functions y Enlace Léxico en JavaScript
Scope y Contextos de Ejecución en JavaScript
Closures y Ámbito Léxico en JavaScript
Fundamentos del Desarrollo Web: Frontend y Backend
Manipulación de Arrays
Arrays: Propiedades, Acceso y Creación en Programación
Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos
Métodos push y pop para modificar arrays en JavaScript
Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos
Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos
Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos
Uso del método slice para extraer porciones de un array en JavaScript
Uso del Spread Operator en JavaScript: Copia, Combinación y Más
Programación Orientada a Objetos
Programación Orientada a Objetos en JavaScript: Conceptos y Práctica
Creación y Manipulación de Objetos en JavaScript
Función constructora y gestión de instancias en JavaScript
Clases en JavaScript: Creación y Uso de Objetos con Sintaxis Moderna
Programación Orientada a Objetos en JavaScript: Clases y Prototipos
Prototipos y Herencia en JavaScript: Construcción y Uso Práctico
Métodos y herencia prototípica en JavaScript
Uso de "this" en Clases y Funciones Constructoras
Validación de Usuarios en una Red Social: Algoritmo Básico
Implementación de la Función Sign-In y Validación de Usuario
Asincronía en JavaScript
Programación Síncrona y Asíncrona en JavaScript
Promesas en JavaScript: Asincronía y Manejo de Estados
Uso de Async/Await para Promesas Asíncronas en JavaScript
Peticiones asíncronas con for await en JavaScript
Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición
Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network
Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE
Envío de Datos al Servidor con JavaScript y Fetch API
Eliminar Posts con JavaScript y Delegación de Eventos
Manejo de IDs en JavaScript para eliminar artículos del DOM
Actualizaciones y Nuevas Funciones en JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Validación de Usuarios en una Red Social: Algoritmo Básico
43/55Recursos
¿Cómo construimos una red social sencilla?
Construir una red social desde cero puede parecer una tarea complicada, pero con la guía correcta, puedes lograr grandes avances. Hoy, nos centraremos en un reto propuesto: crear un algoritmo que permita desarrollar una red social básica. Aquí exploraremos los pasos necesarios para lograr este objetivo, desde la autenticación de usuario hasta la validación de contraseñas y el manejo de datos para presentar un "timeline".
¿Cómo autenticar a un usuario mediante usuario y contraseña?
Primero, debemos permitir que el usuario ingrese sus credenciales. Lo haremos capturando el nombre de usuario y la contraseña a través de la consola utilizando prompt. Luego, guardaremos estos valores en variables que posteriormente usaremos para comprobar la autenticidad del usuario en nuestra base de datos.
const username = prompt("¿Cuál es tu usuario?");
const password = prompt("¿Cuál es tu contraseña?");
¿Cómo validar las credenciales del usuario ingresado con la base de datos?
Seguidamente, el sistema debe verificar si el usuario y contraseña ingresados existen en una base de datos. Para ello, simulamos nuestra base de datos como un array de objetos. Crear una función que recorra este array y compare las credenciales ingresadas por el usuario.
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");
break;
}
}
console.log("No es correcto");
}
La función usuarioExistente utiliza un bucle que itera sobre cada objeto de nuestro userDatabase, y verifica si la información se corresponde con el input del usuario.
¿Qué hacer tras la validación de credenciales?
Si el usuario y la contraseña coinciden con los registros de la base de datos, el sistema debe mostrar un mensaje de bienvenida y el "timeline" del usuario, similar al concepto de redes sociales como Twitter o Facebook. Si no coinciden, se muestra un mensaje de error y se gestiona el acceso denegado.
usuarioExistente(username, password);
Por lo tanto, el acceso seguro a los datos es crítico y es importante tener en cuenta que este ejemplo es una simplificación, ideal para entender los conceptos básicos de autenticación. Pero en un desarrollo en producción, sería necesario implementar protocolos de seguridad más avanzados.
Recomendaciones para continuar aprendiendo
A medida que avances en la construcción de tu propia red social, considera aprender más sobre:
- Cifrado de contraseñas: proteger los datos sensibles del usuario.
- Manipulación de DOM: para mejorar la interfaz de usuario.
- Programación orientada a objetos: estructura de código escalable y eficiente.
- Bases de datos NoSQL vs SQL: distinguir entre diferentes tipos de bases de datos para adaptarse a las necesidades de almacenamiento.
Este reto es solo el comienzo. La práctica y la curiosidad te ayudarán a continuar desarrollando tus habilidades de programación. ¡Ánimo! Cada línea de código que escribes es un paso hacia el dominio del arte de la programación.
Aportes 96
Preguntas 3
Ordenar por:
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!
```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)
```
Hola!
Les comparto mi solución al reto.
```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", }, ];![]()![]()
Mi 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"
}
];
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();`
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>
<label for="password">Contraseña:</label> <input type="password" id="password" required>
<button type="submit">Ingresar</button> </form>
<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>
\
\
\<label for="password">Contraseña:\</label> \<input type="password" id="password" required> \
\
\<button type="submit">Ingresar\</button> \</form> \
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
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> \
\
\
\
\<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 Bienvenido a tu timeline\
\\
\
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
Esta fue mi solución:
```js
const username = prompt('Username').toLocaleLowerCase().trim()
const password = prompt('Password').trim()
function handleLogin(username, password){
const users = usersDatabase.some((user) => user.username === username && user.password === password)
if(!users){
console.error('Please check the information, something migth be wrong, try again.');
}else{
console.log(`Welcome ${username} !!`)
return usersTimeline.forEach((user) => console.log(user))
}
}
handleLogin(username, password)
```
El método prompt en JavaScript se utiliza para solicitar información al usuario a través de un cuadro de diálogo. Permite ingresar un valor, que luego puede ser almacenado en una variable y utilizado en el código. Por ejemplo, en el contexto de la clase, se usa para que el usuario ingrese su nombre de usuario y contraseña para validar su acceso. Es una herramienta fundamental para interactuar con el usuario en aplicaciones web.
Hola! Así fue como logré crear un programa que pide el usuario y contraseña para verificar si existen dentro de las bases de datos. Me basé en el programa que hicimos antes de juego donde se pedía un número del 1 al 10.
No sé si sea lo más correcto usar for e ifs anidados pero fue la manera que se me ocurrió, gran ejercicio! Debo admitir que la ia me ayudó a resolver una cuestión (estaba escribiendo `userDatabase.username[i]` en vez de `userDatabase[i].username` y la ia de Cursor me ayudó a corregirlo pero el razonamiento para llegar a esta solución fue mío!
```js
const userDatabase = [
{
username: "Juan",
password: "123",
},
{
username: "Ana",
password: "456",
},
{
username: "Pedro",
password: "789",
}
]
const usersTimeline = [
{
username: "Juan",
timeline: "Hola, ¿cómo están? Soy Juan",
},
{
username: "Ana",
timeline: "Hola mundo! ¡Soy Ana!",
},
{
username: "Pedro",
timeline: "¡Hola! Soy Pedro",
}
]
function login(username, password) {
const user = username;
const pass = password;
for (let i = 0; i < userDatabase.length; i++) {
if (user === userDatabase[i].username && pass === userDatabase[i].password) {
return true;
} else {
}
}
}
const username = prompt("Ingrese su usuario");
const password = prompt("Ingrese su contraseña");
console.log("El usuario es: ", username, "dato de tipo: ", typeof username);
console.log("La contraseña es: ", password, "dato de tipo: ", typeof password);
function validation() {
if(login(username, password)){
console.log("Bienvenido/A,", username);
console.log("Timeline del usuario: ");
for(let i = 0; i < usersTimeline.length; i++){
if(username === usersTimeline[i].username){
console.log("Tu timeline: ", usersTimeline[i].timeline);
}
else {}
}
} else {
console.log("Usuario o contraseña incorrectos. Por favor, inténtalo de nuevo.");
}
}
validation();
```
esta es la forma en la que yo resolví
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: "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 validar Usuario y Contraseña function validateUsers(usuario, contraseña) { // Buscar el usuario en la base de datos const Usuarioencontrado = usersDatabase.find(user => user.username === usuario); // Verificar si el usuario existe if (!Usuarioencontrado) { return "Usuario no encontrado"; } // Verificar si la contraseña es correcta if (Usuarioencontrado.password !== contraseña) { return "Contraseña incorrecta"; } // Buscar el timeline del usuario const usuarioTimeliner = usersTimeline.find(user => user.username.toLowerCase() === usuario.toLowerCase());
// Verificar si el usuario tiene un timeline if (usuarioTimeliner) { return `Bienvenido, ${usuario}! Tu timeline es: "${usuarioTimeliner.timeline}"`; } else { return `Bienvenido, ${usuario}! No cuentas con un timeline.`; }} console.log(validateUsers("andres", "123")); console.log(validateUsers("caro", "456")); console.log(validateUsers("sergio", "123")); console.log(validateUsers("mariana", "789"));
```js
const usuarios = [
{ "nombre": "juan", "password": "123456" },
{ "nombre": "pepe", "password": "123456" },
{ "nombre": "maria", "password": "123456" },
{ "nombre": "luis", "password": "123456" },
]
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
boton.addEventListener("click", () => {
let user = false;
for (const usuario of usuarios) {
if (usuario.nombre === username) {
if (usuario.password === password) {
alert("Bienvenido " + username);
user = true;
break;
}
}
}
if (!user) {
alert(`Usuario ${username} no existe`);
}
})
```const usuarios = \[ { "nombre": "juan", "password": "123456" }, { "nombre": "pepe", "password": "123456" }, { "nombre": "maria", "password": "123456" }, { "nombre": "luis", "password": "123456" },]
const username = document.getElementById("username").value;const password = document.getElementById("password").value;
boton.addEventListener("click", () => { let user = false; for (const usuario of usuarios) { if (usuario.nombre === username) { if (usuario.password === password) { alert("Bienvenido " + username); user = true; break; } } } if (!user) { alert(`Usuario ${username} no existe`); }})
```js
/*
Requerimientos del reto:
1. El usuario debe poder ingresar su usuario y contraseña
2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos
3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
*/
const login = (usr,pass)=>{
return usuarios.find(datos=> datos.username===usr && datos.password===pass)
}
class user{
constructor(Password, Username){
this.Password=Password;
this.Username = Username;
}
timeline(){
console.log("iniciaste sesion correctamente",this.Username)
}
}
const usuarios = [
{
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 Username = "andres" //prompt("ingresa tu usuario");
let Password = "123" //prompt("ingrese su contrasena");
const usuarioencontrado= login(Username, Password);
console.log(usuarioencontrado)
if(usuarioencontrado){
const usuario1 = new user(Password, Username)
const lineadetiempo=usersTimeline.find(dato=>dato.username.toLowerCase()===Username.toLowerCase())
usuario1.timeline();
console.log(lineadetiempo);
} else {
console.log("Credenciales invalidas")
}
```/\* Requerimientos del reto:
1\. El usuario debe poder ingresar su usuario y contraseña2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
\*/
const login = (usr,pass)=>{ return usuarios.find(datos=> datos.username===usr && datos.password===pass) }
class user{ constructor(Password, Username){ this.Password=Password; this.Username = Username;
} timeline(){ console.log("iniciaste sesion correctamente",this.Username) }
}
const usuarios = \[ { 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 Username = "andres" //prompt("ingresa tu usuario");let Password = "123" //prompt("ingrese su contrasena");
const usuarioencontrado= login(Username, Password);console.log(usuarioencontrado)if(usuarioencontrado){const usuario1 = new user(Password, Username) const lineadetiempo=usersTimeline.find(dato=>dato.username.toLowerCase()===Username.toLowerCase()) usuario1.timeline(); console.log(lineadetiempo);} else { console.log("Credenciales invalidas")
}
**Comparto mi solución, algo distinta a la solución de los demás compañeros, espero estar en lo correcto...**
Heeey! Esta fue mi solución, lo único es que en el console.log aparecen las otras dos validaciones porque lo hice con for, pero fue lo más acertado que logré
```js
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: "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 user = prompt('Ingrese su nombre de usuario: ');
let contrasena = prompt('Ingrese su contraseña: ');
const iniciarSesion = () => {
for (let index = 0; index < usersDatabase.length; index++) {
if (user === usersDatabase[index].username && contrasena === usersDatabase[index].password) {
console.log(`¡Bienvenida/o devuelta ${usersDatabase[index].username}!`);
console.log(usersTimeline[index].timeline);
} else {
console.log("Los datos son incorrectos, intente de nuevo");
}
}
}
iniciarSesion(user, contrasena);
```
Hola, cómo es que se ejecuta el programa en consola y no en terminal, anteriormente le daba click en el código html y "ejecutar en servidor en vivo" ahora no me sale =( estoy abrumada, de antemano agradezco su ayuda
La solucion al challenge
```js
const usersDatabase=[
{
username:"andres",
password:"123"
},
{
username:"caro",
password:"456"
},
{
username:"mariana",
password:"789"
}
];
const usersTimeline=[
{
username:"Estefany",
timeline:"Me encata Javascript!"
},
{
username:"caro",
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 user = prompt('Ingresa tu usuario');
const password = prompt('Ingresa tu contraseña')
const userFound = usersDatabase.find(u => u.username === user)
const timelineFound = usersTimeline.find(u => u.username === user)
if(!userFound || !timelineFound) {
console.log("Error: User not found")
} else {
console.log("Bienvenido ", timelineFound.timeline)
}
```
"Quiero compartir algo que me pasa al entender cualquier lenguaje de programación. En la parte donde se construye la función `usuarioExistente`, se pasan dos parámetros (`username`, `password`), pero estos parámetros son parte de la función y no tienen nada que ver con las constantes `username` y `password` que solicitan los `prompt`.
Los parámetros de la función `usuarioExistente` sirven para guardar esos valores. Luego, cuando se crea la función `signIn`, los datos almacenados se usan, y cuando llamamos a la función `signIn(username, password)`, es ahí donde las constantes `username` y `password` se comparan con la función `usuarioExistente`.
No sé si logré explicarme, pero para quienes estamos empezando, es complicado cuando se repiten los mismos nombres en diferentes funciones y no se logra comprender cómo se relacionan. Por eso, es recomendable entender bien cómo se conectan cada función con las constantes o variables.
Les comparto una posible solución:
const usersDatabase = \[ { username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", }, ]; const usersTimeline = \[{ username: "caro", timeline: "Me encata Javascript!",},
{ username: "mariana", timeline: "A mi me gusta más el café que el té",},{ username: "andres", timeline: "Yo hoy no quiero trabajar",},];
const readline=require('readline')
// Crear una interfaz para leer entrada y salidaconst rl = readline.createInterface({input: process.stdin,output: process.stdout});
rl.question('Digite su usuario: ', (usuario) => { let usuarioIngresado = usuario.trim(); // Normalizar el input
// Preguntar por la contraseña rl.question('Digite su contraseña: ', (passwordUser) => { let usuarioDb = usersDatabase.find(user => user.username === usuarioIngresado && user.password === passwordUser);
if (usuarioDb) { console.log("✅ Acceso permitido. Bienvenid@,", usuarioIngresado); const perfil=usersTimeline.find(user => user.username === usuarioIngresado) console.log(perfil.timeline)
} else { console.log("❌ Usuario o contraseña incorrectos."); }
rl.close(); // Cerrar la interfaz });});
por que cuando intento usar la función prompt() sale error? justamente no pude realizar el reto porque de ninguna manera pude solicitar información del usuario
```js
const readlineSync = require('readline-sync');
class Usuario {
constructor(nombre, contraseña) {
this.nombre = nombre;
this.contraseña = contraseña;
}
}
let usuarios = [];
let opciones;
do {
opciones = readlineSync.question('Si queres crear un usuario 1, si queres eliminar 2, entrar a un usuario 3, ver usuarios disponibles 4, salir 5: ');
if (opciones == 1) {
let cuantos = readlineSync.questionInt('Cuantos usuarios quieres crear? ');
for (let i = 0; i < cuantos; i++) {
let nombre = readlineSync.question('Nombre: ');
let contraseña = readlineSync.question('Contraseña: ');
usuarios.push(new Usuario(nombre, contraseña));
console.log('Usuario creado');
}
} else if (opciones == 2) {
let eliminar = readlineSync.question('Que usuario queres eliminar? ');
for (let i = 0; i < usuarios.length; i++) {
if (usuarios[i].nombre == eliminar) {
usuarios.splice(i, 1);
console.log('Usuario eliminado');
break;
}
}
} else if (opciones == 3) {
let entrar = readlineSync.question('Nombre: ');
let contraseña = readlineSync.question('Contraseña: ');
let usuarioEncontrado = false;
for (let i = 0; i < usuarios.length; i++) {
if (usuarios[i].nombre == entrar && usuarios[i].contraseña == contraseña) {
console.log('Bienvenido ' + usuarios[i].nombre);
usuarioEncontrado = true;
opciones = 5;
break;
}
}
if (!usuarioEncontrado) {
console.log('Usuario o contraseña incorrecta');
}
} else if (opciones == 4) {
console.log('Usuarios disponibles:');
usuarios.forEach((usuario, index) => {
console.log(`Usuario ${index + 1}: Nombre - ${usuario.nombre}`);
});
}
} while (opciones != 5);
console.log('Programa terminado');
```const readlineSync = require('readline-sync');
class Usuario { constructor(nombre, contraseña) { this.nombre = nombre; this.contraseña = contraseña; }}
let usuarios = \[];let opciones;
do { opciones = readlineSync.question('Si queres crear un usuario 1, si queres eliminar 2, entrar a un usuario 3, ver usuarios disponibles 4, salir 5: ');
if (opciones == 1) { let cuantos = readlineSync.questionInt('Cuantos usuarios quieres crear? '); for (let i = 0; i < cuantos; i++) { let nombre = readlineSync.question('Nombre: '); let contraseña = readlineSync.question('Contraseña: '); usuarios.push(new Usuario(nombre, contraseña)); console.log('Usuario creado'); } } else if (opciones == 2) { let eliminar = readlineSync.question('Que usuario queres eliminar? '); for (let i = 0; i < usuarios.length; i++) { if (usuarios\[i].nombre == eliminar) { usuarios.splice(i, 1); console.log('Usuario eliminado'); break; } } } else if (opciones == 3) { let entrar = readlineSync.question('Nombre: '); let contraseña = readlineSync.question('Contraseña: '); let usuarioEncontrado = false; for (let i = 0; i < usuarios.length; i++) { if (usuarios\[i].nombre == entrar && usuarios\[i].contraseña == contraseña) { console.log('Bienvenido ' + usuarios\[i].nombre); usuarioEncontrado = true; opciones = 5; break; } } if (!usuarioEncontrado) { console.log('Usuario o contraseña incorrecta'); } } else if (opciones == 4) { console.log('Usuarios disponibles:'); usuarios.forEach((usuario, index) => { console.log(`Usuario ${index + 1}: Nombre - ${usuario.nombre}`); }); }} while (opciones != 5);
console.log('Programa terminado');
```js
/*
Requerimientos del reto:
1. El usuario debe poder ingresar su usuario y contraseña
2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos
3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun 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",
},
];
function signIn() {
const username = prompt('Type your username');
const password = prompt('Type your password');
const verify = usersDatabase.filter(user => (user.username === username && user.password === password));
if (verify.length === 0) {
alert('Data not found');
} else {
alert(`Welcome ${username}`);
showTimeline(username);
}
return verify[0];
}
function showTimeline(username) {
const timeline = usersTimeline.filter(timeline => timeline.username.toLowerCase() === username.toLowerCase());
if (timeline[0]) {
alert(`Timeline: ${timeline[0].timeline}`);
}
}
signIn();
```
```js
const username = prompt("Ingrese su usuario");
const password = prompt("Ingrese su contraseña");
const user = usersDatabase.find(
(user) => user.username === username && user.password === password
);
if (user) {
const timeline = usersTimeline.find(
(timeline) => timeline.username === username
);
console.log(`Bienvenido ${username}`);
console.log(timeline.timeline);
} else {
console.log("Usuario o contraseña incorrectos");
}
```
```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 { readlink } = require("fs");
const readline = require("readline");
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
console.log("Welcome to Social Network!");
console.log("Please log in to continue");
rl.question("Username: ", (username) => {
rl.question("Password: ", (password) => {
const user = usersDatabase.find(user => user.username === username && user.password === password);
if (user) {
console.log(`welcome ${username}!, this is your timeline: `);
console.log(usersTimeline)
rl.close();
} else {
console.log("Invalid credentials");
rl.close();
}
})});
```
```js
// Solicitar datos de consola
const userName = prompt('Ingrese el usuario')
const userPass = prompt('Ingrese la contraseña')
let FoundUser = false;
//Envío el timeLine en caso de que exista
function validateTimeLine(name){
for (elem of usersTimeline){
// la función toLowerCase(), convierte el texto en minúscula.
let nameMinus = elem.username.toLowerCase();
if(name == nameMinus){
console.log(elem.timeline)
return;
}
}
}
// En caso de que el usuario y contraseña coincidan,
// llamo a la función validateTimeLine.
function validateUser(name, pass){
nameMinu = name.toLowerCase();
for(elem of usersDatabase){
if(elem.username == nameMinu && elem.password == pass){
console.log(`Bienvenido(a) ${elem.username}`)
validateTimeLine(elem.username)
FoundUser = true;
return;
}
}
if(!FoundUser){
console.error('Usuario o contraseña incorrectas')
}
}
validateUser(userName, userPass);
```Comparto mi solución, espero no sea muy confusa :)
let username, password;
function validarDatos (usuario, contrasena) { const userFound = userDatabase.find(user => user.username === usuario && user.password === contrasena ); if (userFound) { console.log(`Bienvenido ${usuario}`) console.log(usersTimeLine) } else { console.log(`Usuario: ${usuario} y/o contraseña incorrectos.`) }}
usuarioIngresado = prompt('Ingresa tu usuario:')passwordIngresada = prompt('Ingresa tu contraseña')
validarDatos(usuarioIngresado, passwordIngresada)
```js
const userName = prompt("Ingrese su usuario");
const userPassword = prompt("Ingrese su contraseña");
function validationUser(userName, userPassword) {
for (let i in usersDatabase) {
if (
usersDatabase[i].username === userName &&
usersDatabase[i].password === userPassword
) {
return true;
}
}
return false;
}
function logIn(userName, userPassword) {
if (validationUser(userName, userPassword)) {
document.write(`
` ); } } else { document.write("
Bienvenido ${userName}!
`); document.write(`TimeLine:
`); for (let key in usersTimeline) { document.write( ` ${usersTimeline[key].username}:
${usersTimeline[key].timeline}
` ); } } else { document.write("
Usuario o contraseña incorrectos
"); } } logIn(userName, userPassword); ```
No sabia que podia ponerlo en un formato de codigo JSJS mb, aca dejo mi codigo: /\* Requerimientos del reto:
1\. El usuario debe poder ingresar su usario y contraseña.
2\. El sistema debe er capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos.
3\. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
4\. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
\*/
const userDataBase = \[ { username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", },];
const usersTimeLine = \[ { username: "Estefany", timeline: "Me encanta 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", }, ]
let usuario = *prompt*("Ingresa tu usuario");let contraseña = *prompt*("Ingresa tu contraseña");let i = 1;
*for*(persona of userDataBase){ *if*(usuario === persona\["username"]){ *confirmarContraseña*(); *break*; }*else* *if*(usuario !== persona\["username"] && i == userDataBase.length){ console.*log*("Usuario inexistente"); }; i++;};
*function* *confirmarContraseña* (){ i = 1; *for*(persona of userDataBase){ *if*(contraseña === persona\["password"]){ *bienvenido*(); *break*; }*else* *if*(contraseña !== persona\["password"] && i == userDataBase.length){ console.*log*("Contraseña incorrecta"); }; i++; };};
*function* *bienvenido* (){ i = 1; *for*(persona of usersTimeLine){ *if*(usuario === persona\["username"].*toLowerCase*()){ console.*log*(`Hola ${usuario}`) console.*log*(persona\["timeline"]); }*else* *if*(usuario === persona\["username"].*toLowerCase*().toLowerCase && i == usersTimeLine.length){ console.*log*(`Hola ${usuario}`); } i++ };}
```js
/*
Requerimientos del reto:
1. El usuario debe poder ingresar su usario y contraseña.
2. El sistema debe er capaz de validar si el usuario y
contraseña ingresados por el usuario existen en la base de
datos.
3. Si el usuario y contraseña son correctos, el sistema
debe mostrar un mensaje de bienvenida y mostrar el
timeline del usuario.
4. Si el usuario y contraseña son incorrectos,
el sistema debe mostrar un mensaje de error y no mostrar
ningun timeline.
*/
const userDataBase = [
{
username: "andres",
password: "123",
},
{
username: "caro",
password: "456",
},
{
username: "mariana",
password: "789",
},
];
const usersTimeLine = [
{
username: "Estefany",
timeline: "Me encanta 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",
},
]
let usuario = prompt("Ingresa tu usuario");
let contraseña = prompt("Ingresa tu contraseña");
let i = 1;
for(persona of userDataBase){
if(usuario === persona["username"]){
confirmarContraseña();
break;
}else if(usuario !== persona["username"] && i == userDataBase.length){
console.log("Usuario inexistente");
};
i++;
};
function confirmarContraseña (){
i = 1;
for(persona of userDataBase){
if(contraseña === persona["password"]){
bienvenido();
break;
}else if(contraseña !== persona["password"] && i == userDataBase.length){
console.log("Contraseña incorrecta");
};
i++;
};
};
function bienvenido (){
i = 1;
for(persona of usersTimeLine){
if(usuario === persona["username"].toLowerCase()){
console.log(`Hola ${usuario}`)
console.log(persona["timeline"]);
}else if(usuario === persona["username"].toLowerCase().toLowerCase && i == usersTimeLine.length){
console.log(`Hola ${usuario}`);
}
i++
};
}
```
Dejo mi codigo:
`/* Requerimientos del reto:`
`1. El usuario debe poder ingresar su usario y contraseña.`
`2. El sistema debe er capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos.`
`3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.`
`4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.`
`*/`
`const userDataBase = [ { username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", },];`
`const usersTimeLine = [ { username: "Estefany", timeline: "Me encanta 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", }, ]`
`let usuario = ``prompt``("Ingresa tu usuario");let contraseña = ``prompt``("Ingresa tu contraseña");let i = 1;`
`for``(persona of userDataBase){ ``if``(usuario === persona["username"]){ ``confirmarContraseña``(); ``break``; }``else`` ``if``(usuario !== persona["username"] && i == userDataBase.length){ console.``log``("Usuario inexistente"); }; i++;};`
`function`` ``confirmarContraseña`` (){ i = 1; ``for``(persona of userDataBase){ ``if``(contraseña === persona["password"]){ ``bienvenido``(); ``break``; }``else`` ``if``(contraseña !== persona["password"] && i == userDataBase.length){ console.``log``("Contraseña incorrecta"); }; i++; };};`
`function`` ``bienvenido`` (){ i = 1; ``for``(persona of usersTimeLine){ ``if``(usuario === persona["username"].``toLowerCase``()){ console.``log```(`Hola ${usuario}`) console.```log``(persona["timeline"]); }``else`` ``if``(usuario === persona["username"].``toLowerCase``().toLowerCase && i == usersTimeLine.length){ console.``log```(`Hola ${usuario}`); } i++ };}``
Esta es mi solución, aún le falta bastante, pero la funcionalidad básica está hecha. El código se puede mejorar bastante, pero es mejor tener algo funcional que terminar desarrollando una red social completa:
```js
/*
Requerimientos del reto:
1. El usuario debe poder ingresar su usuario y contraseña.
2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos.
3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuraio.
4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningún timeline.
*/
// DataBase
const userDatabase = [
{
id: 1,
username: "andres",
email: "[email protected]",
password: "123"
},
{
id: 2,
username: "caro",
email: "[email protected]",
password: "456"
},
{
id: 3,
username: "mariana",
email: "[email protected]",
password: "789"
}
]
const userTimeline = [
{
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 matcha"
}
];
function newID() {
let ID = 0;
return {
next: () => ID++,
reset: () => ID = 0
}
}
class Database {
#data = [];
constructor(name) {
this.name = name;
}
insertData(obj) {
if (Array.isArray(obj)) {
obj.forEach(element => {
this.#data.push(element);
});
} else if (typeof obj === "object") {
this.#data.push(obj);
}
}
deleteData(obj) {
this.#data = this.#data.filter(data => data !== obj)
}
getData(fromUser) {
const hasUser = this.#data.some(user => user.username === fromUser.username && user.email === fromUser.email)
return hasUser
}
getAllData() {
return this.#data
}
}
class Login {
#username = "";
#password = "";
#email = "";
#rememberSession = false;
constructor() {
}
signIn(email, username, password, rememberSession) {
this.#email = email;
this.#username = username;
this.#password = password;
this.#rememberSession = rememberSession;
if (!this.checkCredentials()) {
console.log(this.checkCredentials())
console.warn("This account doesn't exist")
} else {
console.log(`
Hello, ${this.username}
You're in.
`)
const user = new Timeline();
user.loadTimeline()
}
}
signUp(email, username, password) {
this.email = email.toLowerCase();
this.username = username.toLowerCase();
this.password = password.toLowerCase();
usersDatabase.insertData({
email,
username,
password
})
console.log(`
Welcome, ${this.username}!
This is the best terminal community! :)
`)
}
checkCredentials() {
/* const check = userDatabase.find((user) => (user.email === this.email && user.password === this.password))
return check !== undefined ? true : false; */
return usersDatabase.getData({
username: this.#username,
email: this.#email
})
}
}
class Timeline {
data = timeLineDB.getAllData()
constructor() {
timeLineDB.insertData(userTimeline);
}
loadTimeline() {
this.data.map(post => console.log(`
${post.username}
${post.timeline}
`))
}
}
const usersDatabase = new Database("Usuarios");
const usersID = newID();
const postsID = newID();
const timeLineDB = new Database("Timeline");
```
Me tardé algo menos de un día, jajajaj hice muchas pruebas, sé que no es el código más optimizado pero funciona
Así hice el reto
```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 usuario = prompt("ingresar Usuario");
const constra = prompt("ingrese contraseña");
function ValidarUsuario(usuario,constra) {
const objeto = usersDatabase.find(a => a.username == usuario && a.password == constra);
if(objeto != null){
console.log(`Biembenido a su cuenta ${objeto.username}`);
MostrarTimeline(objeto.username.toLowerCase());
}else{
console.log("usuario no existe o contraseña incorrecta");
}
}
function MostrarTimeline (usuario) {
console.log("TimeLine");
usersTimeline.forEach(element => {
if(element.username.toLowerCase() == usuario){
console.log(element.timeline);
}
});
}
ValidarUsuario(usuario,constra);
```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 = prompt("ingresar Usuario"); const constra = prompt("ingrese contraseña");
function ValidarUsuario(usuario,constra) { const objeto = usersDatabase.find(a => a.username == usuario && a.password == constra); if(objeto != null){ console.log(`Biembenido a su cuenta ${objeto.username}`);
MostrarTimeline(objeto.username.toLowerCase()); }else{ console.log("usuario no existe o contraseña incorrecta"); } }
function MostrarTimeline (usuario) { console.log("TimeLine"); usersTimeline.forEach(element => { if(element.username.toLowerCase() == usuario){ console.log(element.timeline); } }); }
ValidarUsuario(usuario,constra);
les dejo mi código y el ss de la ejecución:
```js
const usersDB = [
{
user: 'Elber',
pass: 'qwe'
},
{
user: 'Zara',
pass: 'qwe'
},
{
user: 'Alma',
pass: 'qwe'
}
];
const timeLine = [
{
user: 'Elber',
timeline: 'Gonzuela es mi apellido',
},
{
user: 'Zara',
timeline: 'Me apellido es Goza',
},
{
user: 'Alma',
timeline: 'Me apellido es Rico y mi segundo nombre es Marcela',
}
];
class User {
constructor(userName, pass) {
this.userName = userName;
this.pass = pass;
}
login() {
const exists = usersDB.findIndex(usr => usr.user === this.userName && usr.pass === this.pass);
if(exists < 0) return console.error('No te quieras medir los tenis');
this.#showTimeLine();
}
#showTimeLine() {
const posts = timeLine.reduce((list, post) => {
if (post.user === this.userName) list.push(post.timeline);
return list;
}, []);
console.log(posts);
}
}
const userUno = new User('Elber', 'qwe');
userUno.login();
const UserFake = new User('Hacker', 'bad word');
UserFake.login();
```
Les comparto la manera en que lo hice para poder realizar la validacion sin tener que hacer un for loop. Hacer un for loop para una base de datos realmente no es buena idea pero para este caso usamos metodos como lo es find para buscar en arreglos y el destructuring para poder acceder a los valores de los elementos de un arreglo en una sola lina (como lo muestor en la linea de const { password:pass } = userFound; )
const userDatabase = \[ { username: 'Jaime', password: '123' }, { username: 'Ramon', password: '456' }, { username: 'Marin', password: '789' },];
const userTimeLine = \[
];
const username = prompt('¿Cual es tu usuario?');const password = prompt('Escribe tu contraseña:');
try { const userFound = userDatabase.find(element => { return element.username === username; }); if(!userFound) { throw new Error("El usuario no existe"); }
const { password:pass } = userFound;
if(password !== pass) { throw new Error("La contraseña no es correcta!"); } console.log('Acceso correcto!');} catch (error) { alert(error);}
**Hola, yo intente algo diferente completamente, tomando un poco de las ultimas clases, use una clase y sus respectivos métodos... no estoy seguro si esto es correcto, pero quise intentarlo, denle un ojo y comenten que les parece...**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 Login { constructor() { this.usuario = ""; this.password = ""; } solicitarCredenciales() { this.usuario = prompt("¿Cuál es tu usuario?"); this.password = prompt("¿Cuál es tu contraseña?"); } validarDatos() { for (let user of usersDatabase){ if(user.username===this.usuario && user.password===this.password){ return true } else{ continue; } } } mostrarTimeLine (){ let mensaje = "Hola Bienvenido este es el Timeline que te perdiste mientras estabas fuera..\n\n"; usersTimeline.forEach((item) => { mensaje += `Usuario: ${item.username}\nTimeline: ${item.timeline}\n\n`; }); alert(mensaje); }}const milogin = new Login();milogin.solicitarCredenciales();if(milogin.validarDatos()){milogin.mostrarTimeLine();}
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 Login { constructor() { this.usuario = ""; this.password = ""; } solicitarCredenciales() { this.usuario = prompt("¿Cuál es tu usuario?"); this.password = prompt("¿Cuál es tu contraseña?"); } validarDatos() { for (let user of usersDatabase){ if(user.username===this.usuario && user.password===this.password){ return true } else{ continue; } } } mostrarTimeLine (){ let mensaje = "Hola Bienvenido este es el Timeline que te perdiste mientras estabas fuera..\n\n"; usersTimeline.forEach((item) => { mensaje += `Usuario: ${item.username}\nTimeline: ${item.timeline}\n\n`; }); alert(mensaje); }}const milogin = new Login();milogin.solicitarCredenciales();if(milogin.validarDatos()){milogin.mostrarTimeLine();}
```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",
},
];
class Login {
constructor() {
this.usuario = "";
this.password = "";
}
solicitarCredenciales() {
this.usuario = prompt("¿Cuál es tu usuario?");
this.password = prompt("¿Cuál es tu contraseña?");
}
validarDatos() {
for (let user of usersDatabase){
if(user.username===this.usuario && user.password===this.password){
return true
}
else{
continue;
}
}
}
mostrarTimeLine (){
let mensaje = "Hola Bienvenido este es el Timeline que te perdiste mientras estabas fuera..\n\n";
usersTimeline.forEach((item) => {
mensaje += `Usuario: ${item.username}\nTimeline: ${item.timeline}\n\n`;
});
alert(mensaje);
}
}
const milogin = new Login();
milogin.solicitarCredenciales();
if(milogin.validarDatos()){milogin.mostrarTimeLine();}
```
yo sé que los alertas no son para eso, pero quería mostrarlo de otra forma, deje los mensajes tal cual, obviamente se muestran con errores.
/\* Requerimientos del reto:
1\. El usuario debe poder ingresar su usuario y contraseña --2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos --3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario. --4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline. --
\*/
// array usuario contraseñaconst usersDatabase = \[ { username: "andres", password: "123", }, { username: "caro", password: "456", }, { username: "mariana", password: "789", }, ];
// array de cronologia de usuarios 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", }, ];
while (true) { // varaibles de usuario y contraseña const userName = prompt('Ingresa tu nombre de usuario:'); const userPassword = prompt('Ingresa tu contraseña:');
// find() nos permite buscar y validar, al momento de comparar la informacion el primer elemento del array que coincida lo arroja const validandoUsuario = usersDatabase.find(usuario => userName === usuario.username && userPassword === usuario.password);
if (validandoUsuario) { console.log(`Bienvenido!! ${validandoUsuario.username}`); // imprimiendo el nombre del usuario
usersTimeline.forEach (cronologiaUsuario => { // imprime cada uno de los objetos dentro de cada elemento del array 'usersTimeLine let nombreUsuario = cronologiaUsuario.username; let lineaTiempo = cronologiaUsuario.timeline; console.log(`${nombreUsuario} `); console.log(`${lineaTiempo}`); console.log(''); }); break; // finaliza el bucle while } else { console.log(`usuario y/o contraseña incorrectos.`) }}
Hola les comparto mi solución del ejercicio.
```js
const BdUssers = [
{ username: "kevin", pasword: "1234" },
{ username: "juana", pasword: "2345" },
{ username: "joseph", pasword: "3456" },
];
let userPrompt = prompt("Escribe tu usuario:");
let paswordPrompt = prompt("Escriba su contraseña");
let userPerson = BdUssers.filter((element) => element.username === userPrompt && element.pasword === paswordPrompt);
if (userPerson.length > 0) {
console.log("Bienvenido", userPerson[0].username);
} else {
console.log("El usuario o la contraseña son incorrectos");
}
```
Les comparto mi solución al reto antes de ver la clase:
cada vez se esta poniendo bueno las cosas practicar const baseDeDatos = \[
{ username: "carlos", password: "1234", },
{ username: "andres", password: "1234", },
{ username: "esteban", password: "1234", }]
const userTimeline = \[ { username: "estefania", timeLine: " me encanta el cafe ", }, { username: "oscar", timeLine: " me encanta el jugo", }, { username: "marina", timeLine: " me encanta la gaciosa ", }, { username: "esteban", timeLine: "yo no quiero trabajar" }]
const lastname = prompt("por favor ingrese su nombre");const password = prompt("por favor ingrese su contraseña");
function usuarioExistente(username, password) { for (let i = 0; i < baseDeDatos.length; i++) {
if (baseDeDatos\[i].username === username && baseDeDatos\[i].password === password) { console.log(" el usuario y contraseña es corecto"); return true; } else { console.log("el username y contraseña es incorecto"); return false; } }}usuarioExistente (lastname, password);
Creo que usare un poco de doom para hacer el reto
Me tarde pero lo logre, ahora a ver como lo resuelve un senior jaja
```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",
date: '11/12/2024'
},
];
//Guardamos en variables los datos que pedimos por una ventana emergente
const usuario = prompt('Escriba su nombre de usuario')
const contraseña = prompt('Escriba su contraseña')
//Funciín que se escargara de verificar si las credenciales coinciden con algun objeto de nuestro arrays(base de datos)
function credenciales(usuario,contraseña) {
const datos = usersDatabase.find(h => h.username === usuario && h.password === contraseña)
return datos
}
//Functión que se encargara de validar si hay publicaciones existentes del usuario
function showTimeLine(usuario){
const timeline = usersTimeline.find(user => user.username === usuario);
if (timeline) {
console.log(`${timeline.username} ha comentado ${timeline.timeline} el día ${timeline.date}`);
} else {
console.log(`${usuario} aún no ha publicado nada`)
}
}
//Iniciamos una variable donde esten inyectados los datos del usuario y contraseña
const user = credenciales(usuario,contraseña)
//Condicional de si los datos ingresados son correctos
if(user) {
showTimeLine(usuario) //llamada a la función showTime la cual verifica si hay o no timeLines
} else {
console.log('Credenciales incorrectas, por favor ingresa usuario y contraseña validos')
}
```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", date: '11/12/2024' },];
*//Guardamos en variables los datos que pedimos por una ventana emergente* const usuario = prompt('Escriba su nombre de usuario') const contraseña = prompt('Escriba su contraseña')
*//Funciín que se escargara de verificar si las credenciales coinciden con algun objeto de nuestro arrays(base de datos)* function credenciales(usuario,contraseña) { const datos = usersDatabase.find(h => h.username === usuario && h.password === contraseña) return datos }
*//Functión que se encargara de validar si hay publicaciones existentes del usuario* function showTimeLine(usuario){ const timeline = usersTimeline.find(user => user.username === usuario); if (timeline) { console.log(`${timeline.username} ha comentado ${timeline.timeline} el día ${timeline.date}`); } else { console.log(`${usuario} aún no ha publicado nada`) } }
*//Iniciamos una variable donde esten inyectados los datos del usuario y contraseña* const user = credenciales(usuario,contraseña)
*//Condicional de si los datos ingresados son correctos* if(user) { showTimeLine(usuario) *//llamada a la función showTime la cual verifica si hay o no timeLines* } else { console.log('Credenciales incorrectas, por favor ingresa usuario y contraseña validos') }
Les comparto mi solución del ejercicio, he aplicado algunas cosas que hemos visto en clases anteriores como lo es `.map() , .filter(), .find()`
Aquí el código completo (no subiré la base de datos 😊):```js
const login = (username, password) => {
const user = usersDatabase.find(user => user.username === username && user.password === password)
if (user) {
console.log(`Welcome, ${user.username}!`)
const timelineMessage = userdTimeline.filter(message => message.username === user.username)
console.log(`Your timeline: ${timelineMessage.map(message => message.message)}`)
} else {
console.log('Invalid credentials')
}
}
login('guest', 'guest1')
```
Tengo una pequeña duda, cuando hice el if dentro del for, por error coloqué llaves dentro del paréntesis:
if ({
usersDatabase\[i].username === username })
Y me generaba un error diciendo que se esperaba una coma , entre usersDatabase y \[i].
¿Eso a qué se debe?
Les comparto mi solucion a este problema la verdad estuve un buen rato tratando de intentarlo. XD
Esta es mi solución:*// 1. El usuario debe poder ingresar su usuario y contraseña*const user = prompt("Ingresa tu usuario:").toLowerCase();const pass = prompt("Ingresa tu contraseña:").toLowerCase();
*// 2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos*const findedName = usersDatabase.find(*username* => *username*.username === user && *username*.password === pass);
*//3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.//4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.if* (findedName != undefined){ console.log("Bienvenido!") const findedTimeline = usersTimeline.find(*timeline* => *timeline*.username.toLowerCase() === user); *if*(findedTimeline != undefined ){ console.log(findedTimeline.timeline) } *else*{ console.log("El usuario no tiene timeline") }}*else* { console.log("Error de loggueo.")}
```js
// 1. El usuario debe poder ingresar su usuario y contraseña
const user = prompt("Ingresa tu usuario:").toLowerCase();
const pass = prompt("Ingresa tu contraseña:").toLowerCase();
// 2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos
const findedName = usersDatabase.find(username => username.username === user && username.password === pass);
//3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
//4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
if (findedName != undefined){
console.log("Bienvenido!")
const findedTimeline = usersTimeline.find(timeline => timeline.username.toLowerCase() === user);
if(findedTimeline != undefined ){
console.log(findedTimeline.timeline)
}
else{
console.log("El usuario no tiene timeline")
}
}
else {
console.log("Error de loggueo.")
}
```
Les comparto mi solucion del ejercicio:
Este es lo que yo hice por si les sirve:
Hola Les comparto mi solución, me gusta el código simple así que la optimice lo máximo posible. Espero les guste!
Este es mi código, busque usar clases para que quedara mejor estructurado, ademas de poner en practica lo aprendido en las ultimas clases
projectWithClass.js
```js
/*
Requerimientos del reto:
1. El usuario debe poder ingresar su usuario y contraseña
2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos
3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
*/
const usersDatabase = [
{
username: "andres",
password: "123",
},
{
username: "caro",
password: "456",
},
{
username: "mariana",
password: "789",
},
];
const usersTimeline = [
{
username: "andres",
timeline: "Me encata Javascript!",
},
{
username: "caro",
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 User {
constructor(username, password) {
this.timeLine = [];
this.username = username;
this.password = password;
}
validatePassword(password) {
return password === this.password ? true : false;
}
validateName(name) {
return name === this.username ? true : false;
}
validateUser(name, password) {
if (this.validateName(name)) {
if (this.validatePassword(password)) {
return true;
}
}
return false;
}
sayHiToTheUser() {
let element = document.getElementById("hi");
element.innerHTML = `
<button onclick="login()">Login</button>
</body>
</html>
```
Hello ${this.username}!!!
`; } addToTimeLine(post) { this.timeLine.push(post); } initTimeLine(posts) { let post; for (post of posts) { if (post.username === this.username) { this.addToTimeLine(post.timeline); } } } showTimeLine() { let i; let list = document.getElementById("myList"); let ul = `- ${this.timeLine.map((data) => `
- ${data} `).join("")}
Username
<input type="text" id="username">Password
<input type="password" id="password">
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!
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
Aca les comparto mi solucion
Mi pequeño aporte:
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)
```js
const usuarios = [
{ "nombre": "juan", "password": "123456" },
{ "nombre": "pepe", "password": "123456" },
{ "nombre": "maria", "password": "123456" },
{ "nombre": "luis", "password": "123456" },
]
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
boton.addEventListener("click", () => {
let user = false;
for (const usuario of usuarios) {
if (usuario.nombre === username) {
if (usuario.password === password) {
alert("Bienvenido " + username);
user = true;
break;
}
}
}
if (!user) {
alert(`Usuario ${username} no existe`);
}
})
```
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.
![]()![]()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">
<h1 class="login-tittle">Login
<form class="login-form">
<label class="login-label" for=""> Email Address
<input id="input-email" class="input-login" type="text" placeholder="[email protected]">
</label>
<label class="login-label" for=""> Password
Forgot Password?
<input id="input-password" class="input-login" type="text" placeholder="Enter 6 character or more">
</label>
<label class="remeber-me">
<input type='checkbox'>
Remember me
</label>
<button id="login-button" type="submit" class="primary-botton">LOGIN</button>
</form>
</section>
<section id="modal-approved" class="access-approved">
Does't have an accouunt yet?
Sign Upor login with
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
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);
```
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>
<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";
})
```
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>
¡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 
## 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.
Saludos compañeros;
Adjunto mi solución de este ejercicio, éxitos.
```js
//Base de datos
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",
},
];
//Ingreso de usuario y contraseña
const user = prompt("Ingrese su usuario: ");
const userPassword = prompt("Ingrese su contraseña: ");
//Solucion
function validation(userName, passWord) {
let isValid = false;
for (let i = 0; i < usersDatabase.length; i++) {
if (usersDatabase[i].username === userName && usersDatabase[i].password === passWord) {
isValid = true
}
}
if (isValid === true) {
console.log("---> ACCESO PERMITIDO <---")
console.log(usersTimeline)
} else {
console.log("---> ACCESO DENEGADO <---")
}
};
//Ejecucion:
validation(user, userPassword);
```
const usuario = prompt('Coloca tu usuario');const contrasena = prompt('Coloca tu contraseña');
function iniciarSesion(*usuario*, *contrasena*) { const usuarioEncontrado = usersDatabase.find(*user* => user.username === usuario);
if (!usuarioEncontrado) { console.log("Usuario incorrecto. Intente de nuevo."); return; }
if (usuarioEncontrado.password === contrasena) { console.log("Inicio de sesión exitoso."); mostrarTimeline(usuario); } else { console.log("Contraseña incorrecta. Intente de nuevo."); }}
function mostrarTimeline(*usuario*) { console.log(`Bienvenido, ${usuario}. Aquí está tu timeline:`); usersTimeline .filter(*post* => post.username.toLowerCase() === usuario.toLowerCase()) .forEach(*post* => console.log(`- ${post.timeline}`));}
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: "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" }];
iniciarSesion(usuario, contrasena);
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)
```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?