Skip to content

Commit 5a60f19

Browse files
juangralargjuangralarg
committed
20240621_0001
1 parent 2ff2081 commit 5a60f19

File tree

3 files changed

+201
-99
lines changed

3 files changed

+201
-99
lines changed

‎Entregas/PruebasEntrega/index copy.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Login Proyecto CoderHouse</title>
6+
<link rel="stylesheet" href="css/estilosMain.css">
7+
</head>
8+
<body>
9+
<div class="contenedor-form">
10+
<div class="toggle">
11+
<span> Crear Cuenta</span>
12+
</div>
13+
14+
<div class="formulario">
15+
<h2>Iniciar Sesión</h2>
16+
<form action="#">
17+
<input type="text" id="GetUsuario" placeholder="Usuario" required>
18+
<input type="password" id="GetPass" placeholder="Contraseña" required>
19+
<input type="submit" id="login" value="Iniciar Sesión" onclick="validacion()">
20+
<div id="mensajeLogin"></div>
21+
</form>
22+
</div>
23+
24+
<div class="formulario">
25+
<h2>Crea tu Cuenta</h2>
26+
<form action="#">
27+
<input type="text" id="SetNombre" placeholder="Nombre" required>
28+
29+
<input type="text" id="SetApellido" placeholder="Apellido" required>
30+
31+
<input type="email" id="SetMail" placeholder="Correo Electronico" required>
32+
33+
<input type="text" id="SetUsuario" placeholder="Usuario" required>
34+
35+
<input type="password" id="SetPassword" placeholder="Contraseña" required>
36+
37+
<input type="submit" id="register" value="Registrarse" onclick="registro()" >
38+
</form>
39+
</div>
40+
<div class="reset-password">
41+
<a href="#">Olvide mi Contraseña?</a>
42+
</div>
43+
</div>
44+
<script src="js/jquery-3.1.1.min.js"></script>
45+
<script src="js/main.js"></script>
46+
</body>
47+
</html>

‎Entregas/PruebasEntrega/index.html‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,46 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Login Proyecto CoderHouse</title>
6-
<link rel="stylesheet" href="css/estilosMain.css">
6+
<link rel="stylesheet" href="../../css/estilosMain.css">
7+
<script src="js/jquery-3.1.1.min.js"></script>
8+
<script src="./js/main.js"></script>
79
</head>
810
<body>
9-
<div class="contenedor-form">
10-
<div class="toggle">
11-
<span> Crear Cuenta</span>
11+
<div class="formContainer">
12+
<div class="menu">
13+
<button id="login" class="btnLogin" onclick="mostrarLogin()"> Login </button>
14+
<button id="register" class="btnRegistro" onclick="mostrarRegistro()">Registro</button>
1215
</div>
13-
14-
<div class="formulario">
15-
<h2>Iniciar Sesión</h2>
16-
<form action="#">
17-
<input type="text" id="GetUsuario" placeholder="Usuario" required>
18-
<input type="password" id="GetPass" placeholder="Contraseña" required>
19-
<input type="submit" id="login" value="Iniciar Sesión" onclick="validacion()">
20-
<div id="mensajeLogin"></div>
21-
</form>
22-
</div>
23-
24-
<div class="formulario">
25-
<h2>Crea tu Cuenta</h2>
26-
<form action="#">
27-
<input type="text" id="SetNombre" placeholder="Nombre" required>
28-
29-
<input type="text" id="SetApellido" placeholder="Apellido" required>
30-
31-
<input type="email" id="SetMail" placeholder="Correo Electronico" required>
32-
33-
<input type="text" id="SetUsuario" placeholder="Usuario" required>
16+
<div id="contenido">
3417

35-
<input type="password" id="SetPassword" placeholder="Contraseña" required>
36-
37-
<input type="submit" id="register" value="Registrarse" onclick="registro()" >
38-
</form>
39-
</div>
40-
<div class="reset-password">
41-
<a href="#">Olvide mi Contraseña?</a>
42-
</div>
18+
<!-- USADO PARA PUEBAS -->
19+
20+
<!-- <div id="formlogin">
21+
<h2>Iniciar Sesión</h2>
22+
<form action="#">
23+
<input type="text" id="GetUsuario" placeholder="Usuario" required>
24+
<input type="password" id="GetPass" placeholder="Contraseña" required>
25+
<input type="submit" id="login" value="Iniciar Sesión" onclick="validacion()">
26+
<div id="mensajeLogin"></div>
27+
</form>
28+
</div>
29+
<div class="formregistro">
30+
<h2>Crea tu Cuenta</h2>
31+
<form action="#">
32+
<input type="text" id="SetNombre" placeholder="Nombre" required>
33+
<input type="text" id="SetApellido" placeholder="Apellido" required>
34+
<input type="email" id="SetMail" placeholder="Correo Electronico" required>
35+
<input type="text" id="SetUsuario" placeholder="Usuario" required>
36+
<input type="password" id="SetPassword" placeholder="Contraseña" required>
37+
<input type="submit" id="register" value="Registrarse" onclick="registro()" >
38+
</form>
39+
</div>
40+
-->
41+
</div>
4342
</div>
44-
<script src="js/jquery-3.1.1.min.js"></script>
45-
<script src="js/main.js"></script>
43+
44+
45+
46+
4647
</body>
4748
</html>

‎Entregas/PruebasEntrega/js/main.js‎

Lines changed: 118 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,123 @@
1-
/**
2-
* CODIGO PARA TOGGLE ENTRE LOGIN Y REGISTRO
3-
*/
4-
$('.toggle').click(function(){
5-
$('.formulario').animate({
6-
height: "toggle",
7-
'padding-top': 'toggle',
8-
'padding-bottom': 'toggle',
9-
opacity: 'toggle'
10-
}, "slow");
11-
});
121

13-
/**
2+
3+
/**
144
* FUNCION REGISTRO DE USUARIOS
155
* @returns usuarios registrados
166
*/
17-
let registro = function () {
18-
let registroUsuarios=[];
19-
20-
21-
let nom=document.querySelector('#SetNombre').value;//
22-
let ape=document.querySelector('#SetApellido').value;//
23-
let mai=document.querySelector('#SetMail').value;//
24-
let usu=document.querySelector('#SetUsuario').value;//
25-
let pas=document.querySelector('#SetPassword').value;//
26-
const datosU={
27-
nombre: nom,
28-
apellido: ape,
29-
email: mai,
30-
usuario: usu,
31-
pass: pas
32-
}
33-
registroUsuarios.push(datosU);
34-
35-
return registroUsuarios;
36-
}
37-
38-
/**
39-
* FUNCION PARA VALIDACIONES USUARIO
40-
*/
41-
let validacion = function(){
42-
//Informacion del registro de Usuario
43-
let reg = registro();
44-
let usuario = reg[0]["usuario"];
45-
let pass= reg[0]["pass"];
46-
47-
//Datos que ingresa usuario desde login page
48-
let usr=document.querySelector('#GetUsuario').value;//Toma valor ingresado en campo Usuario
49-
let pas=document.querySelector('#GetPass').value;//Toma valor ingresado en campo PAssword
50-
51-
console.log("Validado Usuario: "+usuario);
52-
console.log("Validado Usuario: "+pass);
53-
console.log(registro());
54-
55-
if (usr==usuario && pas==pass){
56-
//Envia mensaje a DIV con ID "mensajeLogin" en el documento
57-
document.querySelector('#mensajeLogin').innerText = "Usuario y password correcto";
58-
window.location.href='https://juangralarg.github.io/CoderHouse/Entregas/PruebasEntrega/principal.html';//redirecciona a pagina. NO FUNCIONA AUN
59-
}else{
60-
document.querySelector('#mensajeLogin').innerText = "Datos incorrectos";
61-
}
62-
}
63-
64-
let listadoUsuarios = function () {
65-
let reg = registro();
66-
console.log(reg)
67-
7+
let registro = function () {
688

69-
}
9+
let nom=document.querySelector('#SetNombre').value;//
10+
let ape=document.querySelector('#SetApellido').value;//
11+
let mai=document.querySelector('#SetMail').value;//
12+
let usu=document.querySelector('#SetUsuario').value;//
13+
let pas=document.querySelector('#SetPassword').value;//
14+
15+
const datosU=[{
16+
nombre: nom,
17+
apellido: ape,
18+
email: mai,
19+
usuario: usu,
20+
pass: pas
21+
}]
22+
23+
/**
24+
* PRUEBAS JSON
25+
*/
26+
27+
// Obtener los datos existentes en localStorage (si existen)
28+
let usuarios = JSON.parse(localStorage.getItem('usuarios')) || [];
29+
30+
// Agregar el nuevo usuario al array de usuarios
31+
usuarios.push(datosU);
32+
33+
// Guardar el array actualizado en localStorage
34+
localStorage.setItem('usuarios', JSON.stringify(usuarios));
35+
36+
// Limpiar los campos del formulario
37+
document.querySelector('#SetNombre').reset();
38+
document.querySelector('#SetApellido').reset();
39+
document.querySelector('#SetMail').reset();
40+
document.querySelector('#SetUsuario').reset();
41+
document.querySelector('#SetPassword').reset();
42+
43+
//Envia mensaje a DIV con ID "mensajeRegistro" en el documento
44+
// document.querySelector('#SetPassword').innerText = "Usuario y password REGISTRADO";
45+
46+
47+
48+
return registroUsuarios;
49+
}
50+
51+
52+
/**
53+
* EFECTO EN FORMULARIOS CON BOTONES
54+
*/
55+
function mostrarLogin() {
56+
57+
document.getElementById('contenido').innerHTML =`
58+
<div id="formlogin">
59+
<h2>Iniciar Sesión</h2>
60+
<form action="#">
61+
<input type="text" id="GetUsuario" placeholder="Usuario" required>
62+
<input type="password" id="GetPass" placeholder="Contraseña" required>
63+
<input type="submit" id="login" value="Iniciar Sesión" onclick="validacion()">
64+
<div id="mensajeLogin"></div>
65+
</form>
66+
</div>
67+
`;
68+
69+
document.getElementById('formlogin').style.display = 'block';
70+
document.getElementById('formregistro').style.display = 'none';
71+
}
72+
73+
74+
function mostrarRegistro() {
75+
document.getElementById('contenido').innerHTML = `
76+
77+
<div class="formregistro">
78+
<h2>Crea tu Cuenta</h2>
79+
<form action="#">
80+
<input type="text" id="SetNombre" placeholder="Nombre" required>
81+
<input type="text" id="SetApellido" placeholder="Apellido" required>
82+
<input type="email" id="SetMail" placeholder="Correo Electronico" required>
83+
<input type="text" id="SetUsuario" placeholder="Usuario" required>
84+
<input type="password" id="SetPassword" placeholder="Contraseña" required>
85+
<input type="submit" id="register" value="Registrarse" onclick="registro()" >
86+
</form>
87+
</div>
88+
`;
89+
90+
document.getElementById('formuser').style.display = 'block';
91+
document.getElementById('formregistro').style.display = 'none';
92+
}
93+
94+
95+
/**
96+
* FUNCION PARA VALIDACIONES USUARIO
97+
*/
98+
let validacion = function(){
99+
//Informacion del registro de Usuario
100+
let reg = registro();
101+
let{usuario, pass} = reg;
102+
//let usuario = reg[0]["usuario"];
103+
//let pass= reg[0]["pass"];
104+
console.log(usuario);
105+
console.log(pass);
106+
107+
//Datos que ingresa usuario desde login page
108+
let usr=document.querySelector('#GetUsuario').value;//Toma valor ingresado en campo Usuario
109+
let pas=document.querySelector('#GetPass').value;//Toma valor ingresado en campo PAssword
110+
111+
console.log("Validado Usuario: "+usuario);
112+
console.log("Validado Usuario: "+pass);
113+
console.log(registro());
114+
115+
if (usr==usuario && pas==pass){
116+
//Envia mensaje a DIV con ID "mensajeLogin" en el documento
117+
document.querySelector('#mensajeLogin').innerText = "Usuario y password correcto";
118+
window.location.href='https://juangralarg.github.io/CoderHouse/Entregas/PruebasEntrega/principal.html';//redirecciona a pagina. NO FUNCIONA AUN
119+
}else{
120+
document.querySelector('#mensajeLogin').innerText = "Datos incorrectos";
121+
}
122+
}
123+

0 commit comments

Comments
 (0)