Skip to content

Commit d2dbe4f

Browse files
juangralargjuangralarg
committed
20240624_001
1 parent 10731a0 commit d2dbe4f

File tree

7 files changed

+285
-0
lines changed

7 files changed

+285
-0
lines changed

‎Entregas/Entrega3/carrito.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<!-- <script async src="./registro.js"></script> -->
8+
<title>PRINCIPAL</title>
9+
</head>
10+
11+
<body>
12+
13+
<div id="contenedor">
14+
<div id="central">
15+
<div id="login">
16+
<div class="titulo">
17+
BUSQUEDA DE EQUIPOS <BR> (DATOS DESDE BASE DE DATOS)
18+
<div class="inferior">
19+
<a href="./index.html">Inicio</a>
20+
</div>
21+
</div>
22+
</div>
23+
24+
<script src="js/jquery-3.1.1.min.js"></script>
25+
<script src="js/main.js"></script>
26+
</body>
27+
</html>

‎Entregas/Entrega3/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/Entrega3/css/estilosMain.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-size: cover;
9+
background-attachment: fixed;
10+
font-family: sans-serif;
11+
font-weight: normal;
12+
font-size: 100%;
13+
color: #a6d6ef;
14+
margin: 0;
15+
background-color: #0f4c75;
16+
}
17+
#mensajeRegistro {
18+
text-transform: uppercase;
19+
font-family: 'Times New Roman';
20+
color: greenyellow;
21+
}
22+
23+
.formuser {
24+
display: none;
25+
}
26+
27+
.btnLogin, .btnRegistro {
28+
border: 5px solid #eeeff1; /*anchura, estilo y color borde*/
29+
padding: 10px; /*espacio alrededor texto*/
30+
background-color: #2e518b; /*color botón*/
31+
color: #ffffff; /*color texto*/
32+
text-decoration: none; /*decoración texto*/
33+
text-transform: uppercase; /*capitalización texto*/
34+
font-family: 'Helvetica', sans-serif; /*tipografía texto*/
35+
border-radius: 50px; /*bordes redondos*/
36+
}
37+

‎Entregas/Entrega3/img/bg2.jpg‎

2.1 MB
Loading

‎Entregas/Entrega3/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
<script src="./js/jquery-3.1.1.min.js"></script>
8+
<script src="./js/main.js"></script>
9+
</head>
10+
<body>
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>
15+
</div>
16+
<div id="contenido">
17+
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>
42+
</div>
43+
44+
45+
46+
47+
</body>
48+
</html>

‎Entregas/Entrega3/js/jquery-3.1.1.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Entregas/Entrega3/js/main.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
2+
3+
/**
4+
* FUNCION REGISTRO DE USUARIOS
5+
* @returns usuarios registrados
6+
*/
7+
8+
let registro = function () {
9+
10+
let nom=document.querySelector('#SetNombre').value;//
11+
let ape=document.querySelector('#SetApellido').value;//
12+
let mai=document.querySelector('#SetMail').value;//
13+
let usu=document.querySelector('#SetUsuario').value;//
14+
let pas=document.querySelector('#SetPassword').value;//
15+
16+
const datosU=[{
17+
nombre: nom,
18+
apellido: ape,
19+
email: mai,
20+
usuario: usu,
21+
pass: pas
22+
}]
23+
24+
/**
25+
* PRUEBAS JSON
26+
*/
27+
28+
// Obtener los datos existentes en localStorage (si existen)
29+
let usuarios = JSON.parse(localStorage.getItem('usuarios')) || [];
30+
31+
// Agregar el nuevo usuario al array de usuarios
32+
usuarios.push(datosU);
33+
34+
// Guardar el array actualizado en localStorage
35+
localStorage.setItem('usuarios', JSON.stringify(usuarios));
36+
37+
// Limpiar los campos del formulario
38+
document.querySelector('#SetNombre').reset();
39+
document.querySelector('#SetApellido').reset();
40+
document.querySelector('#SetMail').reset();
41+
document.querySelector('#SetUsuario').reset();
42+
document.querySelector('#SetPassword').reset();
43+
44+
//Envia mensaje a DIV con ID "mensajeRegistro" en el documento
45+
document.querySelector('#SetPassword').innerText = "Usuario y password REGISTRADO";
46+
47+
48+
49+
return registroUsuarios;
50+
}
51+
52+
53+
/**
54+
* EFECTO EN FORMULARIOS CON BOTONES
55+
*/
56+
function mostrarLogin() {
57+
let docuLogin = document.getElementById('contenido');
58+
document.getElementById('contenido').innerHTML =`
59+
<div id="formlogin">
60+
<h2>Iniciar Sesión</h2>
61+
<form action="#">
62+
<input type="text" id="GetUsuario" placeholder="Usuario" required>
63+
<input type="password" id="GetPass" placeholder="Contraseña" required>
64+
<input type="submit" id="login" value="Iniciar Sesión" onclick="validacion()">
65+
<div id="mensajeLogin"></div>
66+
</form>
67+
</div>
68+
`;
69+
70+
/*
71+
* OPERADOR TERNARIO
72+
*/
73+
(docuLogin!=null)
74+
?document.getElementById('formlogin').style.display = 'block'
75+
: document.getElementById('formregistro').style.display = 'none';
76+
77+
78+
79+
}
80+
81+
82+
function mostrarRegistro() {
83+
let docuRegister= document.getElementById('contenido');
84+
85+
document.getElementById('contenido').innerHTML = `
86+
<div id="formregistro">
87+
<h2>Crea tu Cuenta</h2>
88+
<form action="#">
89+
<input type="text" id="SetNombre" placeholder="Nombre" required>
90+
<input type="text" id="SetApellido" placeholder="Apellido" required>
91+
<input type="email" id="SetMail" placeholder="Correo Electronico" required>
92+
<input type="text" id="SetUsuario" placeholder="Usuario" required>
93+
<input type="password" id="SetPassword" placeholder="Contraseña" required>
94+
<input type="submit" id="register" value="Registrarse" onclick="registro()" >
95+
</form>
96+
</div>
97+
`;
98+
event.preventDefault()
99+
/*
100+
* OPERADOR TERNARIO
101+
*/
102+
(docuRegister!=null)
103+
? document.getElementById('formregistro').style.display = 'block'
104+
:document.getElementById('formlogin').style.display = 'none';
105+
106+
107+
}
108+
109+
110+
/**
111+
* FUNCION PARA VALIDACIONES USUARIO
112+
*/
113+
let validacion = function(){
114+
115+
let usr=document.querySelector('#GetUsuario').value;//Toma valor ingresado en campo Usuario
116+
let pas=document.querySelector('#GetPass').value;//Toma valor ingresado en campo PAssword
117+
118+
let usuarios = JSON.parse(localStorage.getItem('usuarios')) || [];//Lee localstorage para tomar informacion de USR y PASS
119+
event.preventDefault()
120+
let [[{ usuario, pass }]]= usuarios; //Desestructura informacion para tomar valores USR Y PASS
121+
122+
// VARIFICACION: Imprime para corrobar los valores de usuario y pass
123+
console.log('Usuario:', usuario); //
124+
console.log('Contraseña:', pass); //
125+
126+
127+
if (usr==usuario && pas==pass){
128+
//Envia mensaje a <DIV> con ID "mensajeLogin" en el documento
129+
document.querySelector('#mensajeLogin').innerText = "Usuario y password correcto";
130+
131+
//localStorage.removeItem('usuarios');//boorar localstorage
132+
console.log('LocalStorage borrado.');
133+
window.location.href="./principal.html";//redirecciona a pagina. NO FUNCIONA AUN
134+
}
135+
else{document.querySelector('#mensajeLogin').innerText = "Datos incorrectos";}
136+
137+
}
138+

0 commit comments

Comments
 (0)