unsocial javascript b00tc4mp#182

JCEXCELSIOR · Oct 7, 2024 · 58b92d6 · 58b92d6
1 parent 1537445
commit 58b92d6
Show file tree

Hide file tree

Showing 3 changed files with 473 additions and 9 deletions.
diff --git a/staff/josue-cano/unsocial/index.html b/staff/josue-cano/unsocial/index.html
@@ -53,7 +53,7 @@ <h1>UNSOCIAL</h1>
     <section id="login">
       <h2>Login</h2>
       <form action="">
-        <label for="Name">UserName</label>
+        <label for="Name" id="password">UserName</label>
         <input type="text" />
         <br />
         <label for="password">Password</label>
@@ -70,17 +70,17 @@ <h2>Login</h2>
     <section id="register">
       <h2>Register</h2>
       <form action="">
-        <label for="name">Name</label>
-        <input type="text" id="name" />
+        <label for="name">Name</label >
+        <input type="text" id="name" required />
         <br />
         <label for="email">E-mail</label>
-        <input type="email" id="email" />
+        <input type="email" id="email" required />
         <br />
         <label for="username">Username</label>
-        <input type="text" id="username" />
+        <input type="text" id="username" required />
         <br />
         <label for="password">Password</label>
-        <input type="password" id="password" />
+        <input type="password" id="password" required />
         <br /><br />
         <button type="submit">Register</button>
         <!-- anchors[1] -->
@@ -219,18 +219,20 @@ <h3>Hello, User!</h3>
           loginSection.style.display = "none";
           var h3 = homeSection.querySelector("h3");
           h3.innerText ="Hello, "+ loggedInUser.name;
-        } else {
+        } else  {
           alert("Username or Password incorrect");
-
+          passwordInput.value = "";
+          // registerLogin.reset();
         }
       });
 
 
       var logout = sections[2];
 
       logout.addEventListener("click", function (event) {
+        //no usar, se considera mala experiencia.
         window.location.reload()
-
+        //    loggedInUser = null;
         //   homeSection.style.display = "none";
         //   registerSection.style.display = "none";
         //   loginSection.style.display = "";

diff --git a/staff/josue-cano/unsocial/index2.html b/staff/josue-cano/unsocial/index2.html
@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unsocial</title>
+
+    <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
+
+    <style>
+        @import url("https://fonts.cdnfonts.com/css/antisocial");
+
+body {
+  background-color: black;
+  font-family: "Antisocial", sans-serif;
+  color: #ffffff;
+}
+h1 {
+
+margin-top: 2em;
+  text-align: center;
+}
+section {
+
+  width: 300px; 
+  padding: 20px; 
+  background-color: #585656; 
+  border: 2px solid #ccc; /* Borde del div */
+  border-radius: 10px; /* Bordes redondeados */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra del div */
+  margin: 20px auto; 
+  text-align: center;
+
+}
+form {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+a {
+  color: inherit; /* Mantiene el color del texto padre */
+  text-decoration: none; 
+  }
+
+a:hover {
+      color: #f31212; 
+      }
+
+input{
+        margin-bottom: 20px;
+      }
+button{
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 10px;
+    margin-bottom: 20px;
+
+}
+
+    </style>
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+
+    <script>
+       var users = [
+            {
+                name: "Josue",
+                email: "[email protected]",
+                username: "jc",
+                password: "0000"
+            }
+        ];
+
+        var loggedInUser = null;
+
+        // Creación de la sección de login
+        var loginSection = document.createElement("section");
+        var loginTitle = document.createElement("h2");
+        loginTitle.innerText = "Login";
+        loginSection.appendChild(loginTitle);
+
+        // Crear formulario de login
+        var loginForm = document.createElement('form');
+        //aqui le estamos diciendo que el formulario va en la seccion que es el padre y form es el hijo
+        loginSection.appendChild(loginForm);
+
+        // Crear label e input para el nombre de usuario
+        var loginUsernameLabel = document.createElement("label");
+        loginUsernameLabel.htmlFor = "username";
+        loginUsernameLabel.innerText = "Username";
+        loginForm.appendChild(loginUsernameLabel);
+
+        // creo el loginUsername
+        var loginUsernameInput = document.createElement("input");
+        loginUsernameInput.type = "text";
+        loginUsernameInput.id = "username";
+        loginUsernameInput.placeholder = "Escribe aquí si quieres...";
+        loginUsernameInput.required = true;
+        loginForm.appendChild(loginUsernameInput);
+
+        // Crear label e input para la contraseña
+        var loginPasswordLabel = document.createElement('label');
+        loginPasswordLabel.htmlFor = 'password';
+        loginPasswordLabel.innerText = 'Password';
+        loginForm.appendChild(loginPasswordLabel);
+
+        var loginPasswordInput = document.createElement('input');
+        loginPasswordInput.type = 'password';
+        loginPasswordInput.id = 'password';
+        loginForm.appendChild(loginPasswordInput);
+
+        // Crear botón de login
+        var loginSubmitButton = document.createElement('button');
+        loginSubmitButton.type = 'submit';
+        loginSubmitButton.innerText = 'Login';
+        loginForm.appendChild(loginSubmitButton);
+
+        // Crear enlace para ir a la página de registro
+        var loginRegisterLink = document.createElement('a');
+        loginRegisterLink.href = '';
+        loginRegisterLink.innerText = 'Register';
+        loginSection.appendChild(loginRegisterLink);
+
+        // Evento al clicar el enlace de registro
+        loginRegisterLink.addEventListener("click", function (event) {
+            event.preventDefault();
+            //elimino la seccion loggin
+            loginSection.remove();
+
+            // Crear sección de registro
+            var registerSection = document.createElement('section');
+            var registerTitle = document.createElement('h2');
+            registerTitle.innerText = 'Register';
+            registerSection.appendChild(registerTitle);
+
+            // Crear formulario de registro
+            var registerForm = document.createElement('form');
+            registerSection.appendChild(registerForm);
+
+            // Crear label  para el nombre
+            var registerNameLabel = document.createElement('label');
+            registerNameLabel.htmlFor = 'name';
+            registerNameLabel.innerText = 'Name';
+            registerForm.appendChild(registerNameLabel);
+            //creo el input 
+            var registerNameInput = document.createElement('input');
+            registerNameInput.type = 'text';
+            registerNameInput.id = 'name';
+            registerForm.appendChild(registerNameInput);
+
+            // Crear label e input para el email
+            var registerEmailLabel = document.createElement('label');
+            registerEmailLabel.htmlFor = 'email';
+            registerEmailLabel.innerText = 'E-mail';
+            registerForm.appendChild(registerEmailLabel);
+
+            var registerEmailInput = document.createElement('input');
+            registerEmailInput.type = 'text';
+            registerEmailInput.id = 'email';
+            registerForm.appendChild(registerEmailInput);
+
+            // creo el label de ussername 
+            var registerUsernameLabel = document.createElement('label');
+            registerUsernameLabel.htmlFor = 'username';
+            registerUsernameLabel.innerText = 'Username';
+            registerForm.appendChild(registerUsernameLabel);
+
+            var registerUsernameInput = document.createElement('input');
+            registerUsernameInput.type = 'text';
+            registerUsernameInput.id = 'username';
+            registerForm.appendChild(registerUsernameInput);
+
+            // creamos etiqueta label del password insertamos el for y password
+            var registerPasswordLabel = document.createElement('label');
+            registerPasswordLabel.htmlFor = 'password';
+            registerPasswordLabel.innerText = 'Password';
+            registerForm.appendChild(registerPasswordLabel);
+
+            var registerPasswordInput = document.createElement('input');
+            registerPasswordInput.type = 'password';
+            registerPasswordInput.id = 'password';
+            registerForm.appendChild(registerPasswordInput);
+
+            // Creamos boton para registrarse
+            var registerSubmitButton = document.createElement('button');
+            registerSubmitButton.type = 'submit';
+            registerSubmitButton.innerText = 'Register';
+            registerForm.appendChild(registerSubmitButton);
+
+            // creo un evento con datos de formularios para crear usuario
+            registerForm.addEventListener("submit", function (event) {
+                event.preventDefault();
+                // recojo el valos de los inputs y los guardo en la variable newUser
+                var newUser = {
+                    name: registerNameInput.value,
+                    email: registerEmailInput.value,
+                    username: registerUsernameInput.value,
+                    password: registerPasswordInput.value
+                };
+
+                // si los campos estan vacios salta un alert
+                if (newUser.name === '' || newUser.email === '' || newUser.username === '' || newUser.password === '') {
+                    alert('Todos los campos son obligatorios');
+                    return;
+                }
+
+                // subimos el usuario 
+                users.push(newUser);
+                console.log(users);
+
+                // eliminamos seccion registro y volvemos a(crear) loginSection
+                registerSection.remove();
+                document.body.appendChild(loginSection);
+            });
+
+            // creamos etiqueta a para ir a login
+            var registerLoginLink = document.createElement('a');
+            registerLoginLink.href = '';
+            registerLoginLink.innerText = 'Login';
+            registerSection.appendChild(registerLoginLink);
+
+            // Muestro la seccion de registro
+            document.body.appendChild(registerSection);
+
+            // evento de etiqueta a para ir a login
+            registerLoginLink.addEventListener('click', function (event) {
+                event.preventDefault();
+                registerSection.remove();
+                document.body.appendChild(loginSection);
+            });
+        });
+
+        // boton evento  login(llamo al formulario para obtener datos)
+        loginForm.addEventListener('submit', function (event) {
+            event.preventDefault();
+            //guardo los valores de login en las variables
+            var username = loginUsernameInput.value;
+            var password = loginPasswordInput.value;
+
+            // compruebo que el usuario es correcto esta dentro del array que condicida login y contraseña y lo almaceno en user 
+            var user = users.find(function (user) {
+                return user.username === username && user.password === password;
+            });
+
+            if (user) {
+                loggedInUser = user;
+                loginSection.remove();
+
+                // creamos la seccion home
+                var homeSection = document.createElement('section');
+                var homeTitle = document.createElement('h2');
+                homeTitle.innerText = 'Home';
+                homeSection.appendChild(homeTitle);
+
+                // mensaje elemento h3 al entrar usuario
+                var welcomeMessage = document.createElement('h3');
+                welcomeMessage.innerText = 'Bienvenido ' + user.name;
+                homeSection.appendChild(welcomeMessage);
+
+                // creo elemento a para el logout
+                var logoutLink = document.createElement('a');
+                logoutLink.href = '';
+                logoutLink.innerText = 'Logout';
+                homeSection.appendChild(logoutLink);
+
+                // añado el home al body
+                document.body.appendChild(homeSection);
+
+                // genero evento para el logout
+                logoutLink.addEventListener('click', function (event) {
+                    event.preventDefault();
+                    loggedInUser = null;
+                    homeSection.remove();
+                    document.body.appendChild(loginSection);
+                });
+            } else {
+                alert('Usuario o contraseña incorrectos');
+            }
+        });
+
+        // Muestro la sección de login en la página
+        document.body.appendChild(loginSection);
+
+
+</script>
+</body>
+
+</html>