From f3b504297d025e2b35affd04f3e85e3d3ab68d78 Mon Sep 17 00:00:00 2001
From: Aarchyy89 <aaronbmaartin@gmail.com>
Date: Mon, 7 Oct 2024 17:37:43 +0200
Subject: [PATCH] Javascript coded unsocial app #174

---
 staff/aaron-barrios/unsocial/index.1.html | 417 ++++++++++++++++++++
 staff/aaron-barrios/unsocial/index.html   | 454 ++++++++++++----------
 2 files changed, 658 insertions(+), 213 deletions(-)
 create mode 100644 staff/aaron-barrios/unsocial/index.1.html
diff --git a/staff/aaron-barrios/unsocial/index.1.html b/staff/aaron-barrios/unsocial/index.1.html
new file mode 100644
index 00000000..5522c318
--- /dev/null
+++ b/staff/aaron-barrios/unsocial/index.1.html
@@ -0,0 +1,417 @@
+<!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">
+
+    <!-- //ESTILOS DE CADA SECCION/RAMA -->
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Oriya:wght@400..700&family=Sixtyfour&family=Space+Grotesk:wght@300..700&family=Teko:wght@300..700&display=swap');
+
+        html {
+            display: flex;
+            justify-content: center;
+        }
+
+        :root {
+
+            --color: lavender;
+            --font: 'Sixtyfour';
+            font-family: var(--font);
+
+        }
+
+        body {
+            background-color: black;
+            color: var(--color);
+
+            text-align: center;
+            justify-content: center;
+        }
+
+        input {
+            background-color: inherit;
+            font-family: inherit;
+            color: lavender;
+            font-size: 32px;
+        }
+
+        a:visited {
+            color: var(--color);
+        }
+
+        form {
+            display: list-item;
+        }
+
+        .home {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+
+            text-align: center;
+            justify-content: center;
+
+            font-size: 200%;
+
+        }
+
+        .home h3 {
+            font-size: 200%;
+        }
+
+        .login {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-top: 20%;
+
+            text-align: center;
+            justify-content: center;
+
+            font-size: 200%;
+        }
+
+        .register {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-top: 10%;
+
+            text-align: center;
+            justify-content: center;
+
+            font-size: 150%;
+        }
+
+        .res {
+            text-align: center;
+            justify-content: center;
+        }
+
+        button {
+            background-color: rgb(69, 69, 239);
+            color: white;
+            font-size: 26px;
+            font-family: var(--font);
+            padding: 10px 20px;
+            border-radius: 5px;
+            border: none;
+            cursor: pointer;
+        }
+
+        h2 {
+            font-size: 500%;
+        }
+
+        label {
+            font-size: 130%;
+        }
+
+        a {
+            font-size: 200%;
+        }
+
+        .anchor {
+            font-size: 300%;
+        }
+    </style>
+</head>
+
+<body>
+
+    <section>
+        <h2>Login</h2>
+
+        <form class="login">
+            <label for="username">Username</label>
+            <input type="text" id="username">
+            <p></p>
+
+            <label for="password">Password</label>
+            <input type="password" id="password">
+            <p></p>
+
+            <button type="submit">Login</button>
+            <p></p>
+
+        </form>
+
+        <!-- //HIPERVINCULO QUE TE LLEVA A LA SECCION INDICADA -->
+        <a href="">Register</a>
+
+    </section>
+
+    <section>
+        <h2 class="res">Register</h2>
+
+        <form class="register">
+            <label for="name">Name</label>
+            <input type="text" id="name" required>
+            <p></p>
+
+            <label for="email">Email</label>
+            <input type="email" id="email" required>
+            <p></p>
+
+            <label for="username">Username</label>
+            <input type="text" id="username" required>
+            <p></p>
+
+            <label for="password">Password</label>
+            <input type="password" id="password" required>
+            <p></p>
+
+            <label for="password2">Repeat Password</label>
+            <input type="password" id="password2" required>
+            <p></p>
+
+            <button type="submit">Register</button>
+            <p></p>
+
+        </form>
+
+        <a href="">Login</a>
+    </section>
+
+    <section class="home">
+        <h2>Home</h2>
+
+        <h3>Welcome </h3>
+        <p></p>
+
+
+        <button class="logo">Logout</button>
+
+    </section>
+
+    <section>
+        <h2>UNSOCIAL</h2>
+        <BR></BR>
+        <BR></BR>
+        <BR></BR>
+        <BR></BR>
+        <BR></BR>
+        <!-- //HIPERVINCULO QUE TE LLEVA A LA SECCION INDICADA -->
+        <a href="" class="anchor">Register</a>
+        <p></p>
+        <a href="" class="anchor">Login</a>
+
+    </section>
+
+
+    <script>
+        //USUARIOS POR DEFECTO
+        var users = [
+            { name: 'Juan Pablo', email: 'juanpablo@gmail.com', username: 'juanpablo', password: '123' },
+            { name: 'Aaron', email: 'aaron@gmail.com', username: 'aaron', password: '123' },
+            { name: 'Anna', email: 'anna@gmail.com', username: 'anna', password: '123' },
+            { name: 'Angel', email: 'Angel@gmail.com', username: 'angel', password: '123' },
+            { name: 'Claudi', email: 'Claudi@gmail.com', username: 'claudi', password: '123' },
+            { name: 'Javi', email: 'Javi@gmail.com', username: 'javi', password: '123' }
+        ]
+
+        //variable que te almacena datos del usuario loggeado
+        var loggedInUser
+
+        var sections = document.querySelectorAll('section')
+
+        var logInSection = sections[0]
+        var registerSection = sections[1]
+        var homeSection = sections[2]
+        var unsocialSection = sections[3]
+
+        logInSection.style.display = 'none'
+        homeSection.style.display = 'none'
+        registerSection.style.display = 'none'
+
+        var anchors = document.querySelectorAll('a')
+        var registerAnchor = anchors[0]
+        var logInAnchor = anchors[1]
+        var regUnAnchor = anchors[2]
+        var logUnAnchor = anchors[3]
+
+        //FUNCION QUE TIENE LUGAR AL PULSAR EL HVINCULO 'REGISTER'
+        registerAnchor.onclick = function (event) {
+            event.preventDefault();
+
+            logInForm.reset()
+            logInSection.style.display = 'none'
+            registerSection.style.display = ''
+        }
+
+        //FUNCION QUE TIENE LUGAR AL PULSAR EL HVINCULO 'LOGIN'
+        logInAnchor.onclick = function (event) {
+            event.preventDefault();
+
+            registerForm.reset()
+            registerSection.style.display = 'none'
+            logInSection.style.display = ''
+        }
+
+        regUnAnchor.onclick = function (event) {
+            event.preventDefault();
+
+            unsocialSection.style.display = 'none'
+            registerSection.style.display = ''
+        }
+
+        //FUNCION QUE TIENE LUGAR AL PULSAR EL HVINCULO 'LOGIN'
+        logUnAnchor.onclick = function (event) {
+            event.preventDefault();
+
+            unsocialSection.style.display = 'none'
+            logInSection.style.display = ''
+        }
+
+
+        var forms = document.querySelectorAll('form')
+
+        var logInForm = forms[0]
+        var registerForm = forms[1]
+
+        //HACEMOS REGISTER DEL USER Y GUARDAMOS SUS DATOS
+        registerForm.onsubmit = function (event) {
+            event.preventDefault()
+
+            var inputs = registerForm.querySelectorAll('input')
+
+            var nameInput = inputs[0]
+            var name = nameInput.value
+
+            var emailInput = inputs[1]
+            var email = emailInput.value
+
+            var usernameInput = inputs[2]
+            var username = usernameInput.value
+
+            var passwordInput = inputs[3]
+            var password = passwordInput.value
+
+            var password2Input = inputs[4]
+            var password2 = password2Input.value
+
+            var newUser = { name: name, email: email, username: username, password: password }
+
+            for (i = 0; i < users.length; i++) {
+                var user = users[i]
+
+                if (newUser.username === user.username) {
+                    throw alert('Username already exists')
+
+                    return
+                }
+
+                if (newUser.email === user.email) {
+                    throw alert('Email already exists')
+
+                    return
+                }
+            }
+
+            if (password2 !== password) {
+                passwordInput.value = ''
+                password2Input.value = ''
+                throw alert('Password does not match!')
+            }
+            else {
+                users.push(newUser)
+
+                registerForm.reset()
+
+                registerSection.style.display = 'none'
+                logInSection.style.display = ''
+            }
+        }
+
+        //HACEMOS LOGIN DEL USER Y COMPROBAMOS SUS DATOS
+        logInForm.onsubmit = function (event) {
+            event.preventDefault()
+
+            var inputs = logInForm.querySelectorAll('input')
+
+            var usernameInput = inputs[0]
+            var username = usernameInput.value
+
+            var passwordInput = inputs[1]
+            var password = passwordInput.value
+
+            var loggedUser = { username: username, password: password }
+            loggedInUser = loggedUser
+
+            var userFound = false;
+
+            for (i = 0; i < users.length; i++) {
+                var currentUser = users[i]
+                if (currentUser.username === loggedInUser.username) {
+
+                    if (currentUser.password === loggedInUser.password) {
+                        logInForm.reset()
+
+                        logInSection.style.display = 'none'
+                        homeSection.style.display = ''
+
+                        loggedInUser = currentUser
+
+                        var heading = document.querySelector('h3')
+                        heading.innerText = 'Welcome, ' + loggedInUser.username + '!'
+                        return
+                    }
+                    else {
+                        passwordInput.value = ''
+                        throw alert('Incorrect password')
+                    }
+                }
+            }
+
+            logInForm.reset()
+            throw alert('User not found!')
+        }
+
+        var logOutButton = document.querySelector('button.logo')
+
+        //LOGICA DEL LOGOUT
+        logOutButton.onclick = function (event) {
+            event.preventDefault()
+
+            loggedInUser = null
+
+            homeSection.style.display = 'none'
+            logInSection.style.display = ''
+        }
+
+        /*
+                -------------- TO DO -----------
+                // ALMACENAR LOS DATOS DEL USUARIO REGISTRADO
+                ----- DONE ----
+
+                // HACEER EL LOGIN TENIENDO EN CUENTA QUE EL USUARIO EXISTE
+                ----- DONE ----
+
+                // SI EL USUARIO EXISTE ENTRAS EN EL HOME
+                ----- DONE ----
+
+                // AL ENTRAR AL HOME, LE DEVUELVES UN WELCOME USER.NAME
+                ----- DONE ----
+
+                // HACER LOGOUT DE USUARIO
+                ----- DONE ----
+
+                // PONER COMO OBLIGATORIOS LOS CAMPOS EN EL REGISTER
+                ----- DONE ----
+
+                // COMPROBAR QUE NO EXISTE UN USUARIO CON EL MISMO EMAIL Y USERNAME
+                ----- DONE ----
+
+                // PONER EL REPEAT PASSWORD
+                ----- DONE ----
+        */
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/aaron-barrios/unsocial/index.html b/staff/aaron-barrios/unsocial/index.html
index c2860152..3501a5b2 100644
--- a/staff/aaron-barrios/unsocial/index.html
+++ b/staff/aaron-barrios/unsocial/index.html
@@ -85,16 +85,15 @@
             text-align: center;
             justify-content: center;
 
-            font-size: 200%;
+            font-size: 150%;
         }
 
         .res {
             text-align: center;
             justify-content: center;
-
         }
 
-        button {
+        #but {
             background-color: rgb(69, 69, 239);
             color: white;
             font-size: 26px;
@@ -125,81 +124,6 @@
 
 <body>
 
-    <section>
-        <h2>Login</h2>
-
-        <form class="login">
-            <label for="username">Username</label>
-            <input type="text" id="username">
-            <p></p>
-
-            <label for="password">Password</label>
-            <input type="password" id="password">
-            <p></p>
-
-            <button type="submit">Login</button>
-            <p></p>
-
-        </form>
-
-        <!-- //HIPERVINCULO QUE TE LLEVA A LA SECCION INDICADA -->
-        <a href="">Register</a>
-
-    </section>
-
-    <section>
-        <h2 class="res">Register</h2>
-
-        <form class="register">
-            <label for="name">Name</label>
-            <input type="text" id="name" required>
-            <p></p>
-
-            <label for="email">Email</label>
-            <input type="email" id="email" required>
-            <p></p>
-
-            <label for="username">Username</label>
-            <input type="text" id="username" required>
-            <p></p>
-
-            <label for="password">Password</label>
-            <input type="password" id="password" required>
-            <p></p>
-
-            <button type="submit">Register</button>
-            <p></p>
-
-        </form>
-
-        <a href="">Login</a>
-    </section>
-
-    <section class="home">
-        <h2>Home</h2>
-
-        <h3>Welcome </h3>
-        <p></p>
-
-
-        <button class="logo">Logout</button>
-
-    </section>
-
-    <section>
-        <h2>UNSOCIAL</h2>
-        <BR></BR>
-        <BR></BR>
-        <BR></BR>
-        <BR></BR>
-        <BR></BR>
-        <!-- //HIPERVINCULO QUE TE LLEVA A LA SECCION INDICADA -->
-        <a href="" class="anchor">Register</a>
-        <p></p>
-        <a href="" class="anchor">Login</a>
-
-    </section>
-
 
     <script>
         //USUARIOS POR DEFECTO
@@ -215,137 +139,108 @@ <h2>UNSOCIAL</h2>
         //variable que te almacena datos del usuario loggeado
         var loggedInUser
 
-        var sections = document.querySelectorAll('section')
-
-        var logInSection = sections[0]
-        var registerSection = sections[1]
-        var homeSection = sections[2]
-        var unsocialSection = sections[3]
-
-        logInSection.style.display = 'none'
-        homeSection.style.display = 'none'
-        registerSection.style.display = 'none'
-
-        var anchors = document.querySelectorAll('a')
-        var registerAnchor = anchors[0]
-        var logInAnchor = anchors[1]
-        var regUnAnchor = anchors[2]
-        var logUnAnchor = anchors[3]
-
-        //FUNCION QUE TIENE LUGAR AL PULSAR EL HVINCULO 'REGISTER'
-        registerAnchor.onclick = function (event) {
-            event.preventDefault();
-
-            logInForm.reset()
-            logInSection.style.display = 'none'
-            registerSection.style.display = ''
-        }
-
-        //FUNCION QUE TIENE LUGAR AL PULSAR EL HVINCULO 'LOGIN'
-        logInAnchor.onclick = function (event) {
-            event.preventDefault();
-
-            registerForm.reset()
-            registerSection.style.display = 'none'
-            logInSection.style.display = ''
-        }
-
-        regUnAnchor.onclick = function (event) {
-            event.preventDefault();
-
-            unsocialSection.style.display = 'none'
-            registerSection.style.display = ''
-        }
-
-        //FUNCION QUE TIENE LUGAR AL PULSAR EL HVINCULO 'LOGIN'
-        logUnAnchor.onclick = function (event) {
-            event.preventDefault();
-
-            unsocialSection.style.display = 'none'
-            logInSection.style.display = ''
-        }
-
 
-        var forms = document.querySelectorAll('form')
-
-        var logInForm = forms[0]
-        var registerForm = forms[1]
-
-        //HACEMOS REGISTER DEL USER Y GUARDAMOS SUS DATOS
-        registerForm.onsubmit = function (event) {
+        //CREACIÓN SECCIONES MEDIANTE JAVASCRIPT
+
+        //----- LOGIN SECTION -----  
+        var logInSection = document.createElement('section')
+        var logInTitle = document.createElement('h2')
+        logInTitle.innerText = 'Login'
+        logInSection.appendChild(logInTitle)
+
+        //FORMULARIO DEL LOGIN
+        var loginForm = document.createElement('form')
+        logInSection.appendChild(loginForm)
+
+        //LOGIN USERNAME LABEL 
+        var loginUsernameLabel = document.createElement('label')
+        loginForm.appendChild(loginUsernameLabel)
+        loginUsernameLabel.htmlFor = 'username'
+        loginUsernameLabel.innerText = 'Username'
+
+        //LOGIN USERNAME INPUT 
+        var loginUsernameInput = document.createElement('input')
+        loginForm.appendChild(loginUsernameInput)
+        loginUsernameInput.type = 'text'
+        loginUsernameInput.id = 'username'
+
+        //LOGIN PASSWORD LABEL 
+        var logInPasswordLabel = document.createElement('label')
+        loginForm.appendChild(logInPasswordLabel)
+        logInPasswordLabel.htmlFor = 'password'
+        logInPasswordLabel.innerText = 'Password'
+
+        //LOGIN PASSWORD INPUT 
+        var logInPasswordInput = document.createElement('input')
+        loginForm.appendChild(logInPasswordInput)
+        logInPasswordInput.type = 'password'
+        logInPasswordInput.id = 'password'
+
+        //LOGIN SUBMIT BUTTON 
+        var loginButton = document.createElement('button')
+        loginForm.appendChild(loginButton)
+        loginButton.innerText = 'Log In'
+        loginButton.type = 'submit'
+        loginButton.id = 'but'
+
+        //LOGIN REGISTER ANCHOR 
+        var loginResgisterAnchor = document.createElement('a')
+        loginResgisterAnchor.href = ''
+        loginResgisterAnchor.innerText = 'Register'
+        loginForm.appendChild(loginResgisterAnchor)
+
+        //SE CREA EL BODY Y SE LE AÑADEN LOS HIJOS
+        var body = document.querySelector('body')
+        body.appendChild(logInSection)
+
+        loginButton.addEventListener('click', function (event) {
             event.preventDefault()
 
-            var inputs = registerForm.querySelectorAll('input')
-
-            var nameInput = inputs[0]
-            var name = nameInput.value
-
-            var emailInput = inputs[1]
-            var email = emailInput.value
-
-            var usernameInput = inputs[2]
+            var usernameInput = loginUsernameInput
             var username = usernameInput.value
 
-            var passwordInput = inputs[3]
+            var passwordInput = logInPasswordInput
             var password = passwordInput.value
 
-            var newUser = { name: name, email: email, username: username, password: password }
+            var loggedUser = { username: username, password: password }
+            loggedInUser = loggedUser
 
             for (i = 0; i < users.length; i++) {
-                var user = users[i]
+                var currentUser = users[i]
+                if (currentUser.username === loggedInUser.username) {
 
-                if (newUser.username === user.username) {
-                    throw alert('Username already exists')
+                    if (currentUser.password === loggedInUser.password) {
+                        // logInForm.reset()
 
-                    return
-                }
+                        logInSection.remove()
 
-                if (newUser.email === user.email) {
-                    throw alert('Email already exists')
+                        //----- HOME SECTION -----  
+                        var homeSection = document.createElement('section')
 
-                    return
-                }
-            }
-            users.push(newUser)
+                        var homeTitle = document.createElement('h2')
+                        homeTitle.innerText = 'HOME'
+                        homeSection.appendChild(homeTitle)
 
-            registerForm.reset()
+                        var welcomeText = document.createElement('h3')
+                        homeSection.appendChild(welcomeText)
+                        welcomeText.innerText = 'Welcome, ' + loggedInUser.username + '!'
 
-            registerSection.style.display = 'none'
-            logInSection.style.display = ''
+                        var logoutButton = document.createElement('button')
+                        homeSection.appendChild(logoutButton)
+                        logoutButton.innerText = 'Log Out'
+                        logoutButton.type = 'submit'
+                        logoutButton.id = 'but'
 
-        }
+                        logoutButton.addEventListener('click', function (event) {
+                            event.preventDefault()
 
-        //HACEMOS LOGIN DEL USER Y COMPROBAMOS SUS DATOS
-        logInForm.onsubmit = function (event) {
-            event.preventDefault()
-
-            var inputs = logInForm.querySelectorAll('input')
-
-            var usernameInput = inputs[0]
-            var username = usernameInput.value
-
-            var passwordInput = inputs[1]
-            var password = passwordInput.value
-
-            var loggedUser = { username: username, password: password }
-            loggedInUser = loggedUser
-
-            var userFound = false;
-
-            for (i = 0; i < users.length; i++) {
-                var currrentUser = users[i]
-                if (currrentUser.username === loggedInUser.username) {
+                            loggedInUser = null
 
-                    if (currrentUser.password === loggedInUser.password) {
-                        logInForm.reset()
-
-                        logInSection.style.display = 'none'
-                        homeSection.style.display = ''
-
-                        loggedInUser = currrentUser
-
-                        var heading = document.querySelector('h3')
-                        heading.innerText = 'Welcome, ' + loggedInUser.username + '!'
+                            homeSection.remove()
+                            body.appendChild(logInSection)
+                        })
+                        loginForm.reset()
+                        body.appendChild(homeSection)
                         return
                     }
                     else {
@@ -353,43 +248,176 @@ <h2>UNSOCIAL</h2>
                         throw alert('Incorrect password')
                     }
                 }
+
             }
 
             logInForm.reset()
             throw alert('User not found!')
-        }
+        })
 
-        var logOutButton = document.querySelector('button.logo')
 
-        //LOGICA DEL LOGOUT
-        logOutButton.onclick = function (event) {
-            event.preventDefault()
 
-            homeSection.style.display = 'none'
-            logInSection.style.display = ''
 
-            loggedInUser = undefined
-        }
+        //FUNCION QUE TIENE LUGAR AL PULSAR EL ANCHOR 'REGISTER'
+        loginResgisterAnchor.onclick = function (event) {
+            event.preventDefault();
+
+            logInSection.remove()
+
+            //----- REGISTER SECTION -----  
+            var registerSection = document.createElement('section')
+            var registerTitle = document.createElement('h2')
+            registerTitle.innerText = 'Register'
+            registerSection.appendChild(registerTitle)
+
+            //FORMULARIO DEL REGISTER
+            var registerForm = document.createElement('form')
+            registerSection.appendChild(registerForm)
+
+
+            //REGISTER NAME LABEL 
+            var registerNameLabel = document.createElement('label')
+            registerForm.appendChild(registerNameLabel)
+            registerNameLabel.htmlFor = 'name'
+            registerNameLabel.innerText = 'Name'
+
+            //REGISTER NAME INPUT 
+            var registerNameInput = document.createElement('input')
+            registerNameInput.required = true
+            registerForm.appendChild(registerNameInput)
+            registerNameInput.type = 'text'
+            registerNameInput.id = 'Name'
+
+            //REGISTER EMAIL LABEL 
+            var registerEmailLabel = document.createElement('label')
+            registerForm.appendChild(registerEmailLabel)
+            registerEmailLabel.htmlFor = 'email'
+            registerEmailLabel.innerText = 'E-mail'
+
+            //REGISTER EMAIL INPUT 
+            var registerEmailInput = document.createElement('input')
+            registerEmailInput.required = true
+            registerForm.appendChild(registerEmailInput)
+            registerEmailInput.type = 'email'
+            registerEmailInput.id = 'Email'
+            // registerEmailInput.required
+
+            //REGISTER USERNAME LABEL 
+            var registerUsernameLabel = document.createElement('label')
+            registerForm.appendChild(registerUsernameLabel)
+            registerUsernameLabel.htmlFor = 'text'
+            registerUsernameLabel.innerText = 'Username'
+
+            //REGISTER USERNAME INPUT 
+            var registerUsernameInput = document.createElement('input')
+            registerUsernameInput.required = true
+            registerForm.appendChild(registerUsernameInput)
+            registerUsernameInput.type = 'text'
+            registerUsernameInput.id = 'username'
+
+            //REGISTER PASSWORD LABEL 
+            var registerPasswordLabel = document.createElement('label')
+            registerForm.appendChild(registerPasswordLabel)
+            registerPasswordLabel.htmlFor = 'password'
+            registerPasswordLabel.innerText = 'Password'
+
+            //REGISTER PASSWORD INPUT 
+            var registerPasswordInput = document.createElement('input')
+            registerPasswordInput.required = true
+            registerForm.appendChild(registerPasswordInput)
+            registerPasswordInput.type = 'password'
+            registerPasswordInput.id = 'password'
+
+            //REGISTER PASSWORD2 LABEL 
+            var registerPassword2Label = document.createElement('label')
+            registerForm.appendChild(registerPassword2Label)
+            registerPassword2Label.htmlFor = 'password'
+            registerPassword2Label.innerText = 'Repeat Password'
+
+            //REGISTER PASSWORD2 INPUT 
+            var registerPassword2Input = document.createElement('input')
+            registerPassword2Input.required = true
+            registerForm.appendChild(registerPassword2Input)
+            registerPassword2Input.type = 'password'
+            registerPassword2Input.id = 'password'
+
+
+            //REGISTER SUBMIT BUTTON 
+            var registerButton = document.createElement('button')
+            registerForm.appendChild(registerButton)
+            registerButton.innerText = 'Register'
+            registerButton.type = 'submit'
+            registerButton.id = 'but'
+
+            //HACEMOS REGISTER DEL USER Y GUARDAMOS SUS DATOS
+            registerForm.addEventListener('submit', function (event) {
+                event.preventDefault()
+
+                var nameInput = registerNameInput
+                var name = nameInput.value
+
+                var emailInput = registerEmailInput
+                var email = emailInput.value
+
+                var usernameInput = registerUsernameInput
+                var username = usernameInput.value
+
+                var passwordInput = registerPasswordInput
+                var password = passwordInput.value
+
+                var password2Input = registerPassword2Input
+                var password2 = password2Input.value
+
+                var newUser = { name: name, email: email, username: username, password: password }
+
+                for (i = 0; i < users.length; i++) {
+                    var user = users[i]
+
+                    if (newUser.username === user.username) {
+                        throw alert('Username already exists')
+
+                        return
+                    }
 
+                    if (newUser.email === user.email) {
+                        throw alert('Email already exists')
 
-        /*
-                --------------TO DO-----------
-                // ALMACENAR LOS DATOS DEL USUARIO REGISTRADO
-                ----- DONE----
+                        return
+                    }
+                }
 
-                // HACEER EL LOGIN TENIENDO EN CUENTA QUE EL USUARIO EXISTE
-                ----- DONE----
+                if (password2 !== password) {
+                    passwordInput.value = ''
+                    password2Input.value = ''
+                    throw alert('Password does not match!')
+                }
+                else {
+                    users.push(newUser)
 
-                // SI EL USUARIO EXISTE ENTRAS EN EL HOME
-                ----- DONE----
+                    registerForm.reset()
 
-                // AL ENTRAR AL HOME, LE DEVUELVES UN WELCOME USER.NAME
-                ----- DONE----
+                    registerSection.remove()
+                    body.appendChild(logInSection)
+                }
+            })
 
-                // HACER LOGOUT DE USUARIO
-                ----- DONE----
+            //REGISTER LOGIN ANCHOR 
+            var registerLoginAnchor = document.createElement('a')
+            registerLoginAnchor.href = ''
+            registerLoginAnchor.innerText = 'Login'
+            registerForm.appendChild(registerLoginAnchor)
 
-        */
+            body.appendChild(registerSection)
+
+            //anchor hacia el login
+            registerLoginAnchor.onclick = function (event) {
+                event.preventDefault()
+
+                registerSection.remove()
+                body.appendChild(logInSection)
+            }
+
+        }
     </script>
 
 </body>
