Skip to content

Commit 2ff2081

Browse files
juangralargjuangralarg
committed
zz
1 parent 2e2523a commit 2ff2081

File tree

12 files changed

+362
-40
lines changed

12 files changed

+362
-40
lines changed

‎Clase 10 - Eventos/estilos.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
html{
2+
font-family: Tahoma;
3+
}
4+
5+
body {
6+
font-family: sans-serif;
7+
font-weight: normal;
8+
font-size: 100%;
9+
color: #a6d6ef;
10+
margin: 0;
11+
background-color: #0f4c75;
12+
box-sizing: border-box;
13+
}
14+
/* .divP{
15+
align-items: center;
16+
justify-content: center;
17+
text-align: center;
18+
padding: 0px;
19+
border: 20px;
20+
text-align: center;
21+
} */
22+
23+
.PTitulo {
24+
justify-content: center;
25+
padding: 0px;
26+
border: 20px;
27+
text-align: center;
28+
background-color: black;
29+
color: whitesmoke;
30+
font-weight: bold;
31+
font-size:150%;
32+
padding-top: 10px;
33+
padding-bottom: 10px;
34+
width: auto;
35+
border-radius: 35px 0px 35px 0px;
36+
}
37+
.PSubTitulo {
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
text-align: center;
42+
padding: 50px;
43+
border: 20px;
44+
text-align: center;
45+
background-color: rgba(130, 127, 127, 0.62);
46+
color: whitesmoke;
47+
font-weight: bold;
48+
font-size:150%;
49+
padding-top: 10px;
50+
padding-bottom: 10px;
51+
width: 90%;
52+
border-radius: 35px 0px 35px 0px;
53+
}

‎Clase 10 - Eventos/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./estilos.css" type="text/css">
7+
8+
<title>CLASE 7 </title>
9+
</head>
10+
<body>
11+
<div class="divP">
12+
<p class="PTitulo">CLASE 10 - EVENTOS </p>
13+
<div class="PSubTitulo"><P> Evento addEventListener() usando boton</P>
14+
</div><br>
15+
<div class="boton01">input</div>
16+
17+
18+
</div>
19+
20+
<script async src="./index.js"></script>
21+
</body>
22+
</html>

‎Clase 10 - Eventos/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
/**
3+
* CLASE 10
4+
*/
5+
function EventoOnClic() {
6+
7+
}

‎Clase 11 - Local Sorage y JSON/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<script>
10+
localStorage.setItem('nombre', 'Juan');
11+
localStorage.setItem('edad', 27);
12+
let personaje = {
13+
nombre: localStorage.getItem('nombre'),
14+
edad: localStorage.getItem('edad')
15+
}
16+
17+
console.log(personaje);
18+
</script>
19+
</body>
20+
</html>

‎Entregas/PruebasEntrega/css/estilosGeneral.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
-webkit-box-sizing: border-box;
5+
-moz-box-sizing: border-box;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
background-size: cover;
11+
background-attachment: fixed;
12+
font-family: sans-serif;
13+
font-weight: normal;
14+
font-size: 100%;
15+
color: #a6d6ef;
16+
margin: 0;
17+
background-color: #0f4c75;
18+
}
19+
20+
.contenedor-form {
21+
background: rgba(16, 0, 63, 0.7);
22+
max-width: 500px;
23+
width: 100%;
24+
margin: 48px auto;
25+
border-radius: 5px;
26+
color: #fff;
27+
position: relative;
28+
/*padding: 40px;*/
29+
}
30+
31+

Entregas/PruebasEntrega/css/estilos.css renamed to Entregas/PruebasEntrega/css/estilosMain.css

File renamed without changes.

‎Entregas/PruebasEntrega/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Login Proyecto CoderHouse</title>
6-
<link rel="stylesheet" href="css/estilos.css">
6+
<link rel="stylesheet" href="css/estilosMain.css">
77
</head>
88
<body>
99
<div class="contenedor-form">

‎Entregas/PruebasEntrega/indicePruebas.html‎

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

‎Entregas/PruebasEntrega/js/main copy.js‎

Lines changed: 53 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/**
2+
* CODIGO PARA TOGGLE ENTRE LOGIN Y REGISTRO
3+
*/
14
$('.toggle').click(function(){
25
$('.formulario').animate({
36
height: "toggle",
@@ -7,34 +10,58 @@ $('.toggle').click(function(){
710
}, "slow");
811
});
912

10-
class LoginSystem{
11-
12-
constructor(nombre, apellido, cedula, usuario,pass){
13-
this.nombre= nombre;
14-
this.apellido= apellido;
15-
this.cedula= cedula;
16-
this.usuario= usuario;
17-
this.pass=pass ;
18-
this.datosU={
19-
nombre: this.nombre,
20-
apellido: this.apellido,
21-
cedula:this.cedula,
22-
usuario: this.usuario,
23-
pass: this.pass
24-
}
25-
}
13+
/**
14+
* FUNCION REGISTRO DE USUARIOS
15+
* @returns usuarios registrados
16+
*/
17+
let registro = function () {
18+
let registroUsuarios=[];
19+
let nom=document.querySelector('#SetNombre').value;//
20+
let ape=document.querySelector('#SetApellido').value;//
21+
let mai=document.querySelector('#SetMail').value;//
22+
let usu=document.querySelector('#SetUsuario').value;//
23+
let pas=document.querySelector('#SetPassword').value;//
24+
const datosU={
25+
nombre: nom,
26+
apellido: ape,
27+
email: mai,
28+
usuario: usu,
29+
pass: pas
30+
}
31+
registroUsuarios.push(datosU);
32+
33+
return registroUsuarios;
34+
}
35+
36+
// /**
37+
// * FUNCION PARA VALIDACIONES USUARIO
38+
// */
39+
// let validacion = function(){
40+
// //Informacion del registro de Usuario
41+
// let reg = registro();
42+
// let usuario = reg[0]["usuario"];
43+
// let pass= reg[0]["pass"];
2644

27-
validacion(){
28-
//Datos que ingresa usuario desde login page
29-
let usr=document.querySelector('#GetUsuario').value;//Toma valor ingresado en campo Usuario
30-
let pas=document.querySelector('#GetPass').value;//Toma valor ingresado en campo Contraseña
45+
// //Datos que ingresa usuario desde login page
46+
// let usr=document.querySelector('#GetUsuario').value;//Toma valor ingresado en campo Usuario
47+
// let pas=document.querySelector('#GetPass').value;//Toma valor ingresado en campo PAssword
3148

32-
console.log("Metodo en LoginSystem "+usr);
49+
// console.log("Validado Usuario: "+usuario);
50+
// console.log("Validado Usuario: "+pass);
51+
// console.log(registro());
3352

34-
}
35-
36-
}//fin clase loginSystem
53+
// if (usr==usuario && pas==pass){
54+
// //Envia mensaje a DIV con ID "mensajeLogin" en el documento
55+
// document.querySelector('#mensajeLogin').innerText = "Usuario y password correcto";
56+
// window.location.href='https://juangralarg.github.io/CoderHouse/Entregas/PruebasEntrega/principal.html';//redirecciona a pagina. NO FUNCIONA AUN
57+
// }else{
58+
// document.querySelector('#mensajeLogin').innerText = "Datos incorrectos";
59+
// }
60+
// }
3761

38-
const l=new LoginSystem(nombre, apellido, cedula, usuario,pass);
62+
// let listadoUsuarios = function () {
63+
// let reg = registro();
64+
// console.log(reg)
65+
3966

40-
let log=l.validacion();
67+
// }

0 commit comments

Comments
 (0)