implement intial code for CSR b00tc4mp#190

Hxrmx420 · Oct 7, 2024 · d1dbcea · d1dbcea
1 parent afcbf82
commit d1dbcea
Showing 1 changed file with 240 additions and 0 deletions.
diff --git a/staff/Emiliano-rozas/app/Unsocial2.html b/staff/Emiliano-rozas/app/Unsocial2.html
@@ -0,0 +1,240 @@
+<!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.googleapis.com/css2?family=Sixtyfour&display=swap');
+
+        :root {
+            --color: dodgerblue;
+            --font: 'Sixtyfour';
+            font-family: var(--font);
+        }
+
+        body {
+            background-color: lightgrey;
+            color: var(--color);
+        }
+
+        input {
+            background-color: inherit;
+            font-family: inherit;
+        }
+
+        a:visited {
+            color: var(--color);
+        }
+    </style>
+
+</head>
+
+<body>
+
+    <h1>Unsocial</h1>
+
+    <script>
+        var users = [
+            { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+            { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+        ]
+
+        var loggedInUser = null
+        //LOG IN
+        var loginSection = document.createElement("section")
+        var loginTitle = document.createElement("h2")
+        loginTitle.innerText = "Login"
+        loginSection.appendChild(loginTitle)
+        //formulario
+        var loginForm = document.createElement("form")
+        loginSection.appendChild(loginForm)
+        //label user
+        var loginUsernameLabel = document.createElement("label")
+        loginUsernameLabel.htmlFor = 'username'
+        loginUsernameLabel.innerText = "Username"
+        loginForm.appendChild(loginUsernameLabel)
+        //input user
+        var loginUsernameInput = document.createElement("input")
+        loginUsernameInput.id = "username"
+        loginUsernameInput.placeholder = "Enter your Username"
+        loginUsernameInput.type = "text"
+        loginForm.appendChild(loginUsernameInput)
+        //label password
+        var loginPasswordLabel = document.createElement("label")
+        loginPasswordLabel.htmlFor = "password"
+        loginPasswordLabel.innerText = "password"
+        loginForm.appendChild(loginPasswordLabel)
+        //input password
+        var loginPasswordInput = document.createElement("input")
+        loginPasswordInput.type = "password"
+        loginPasswordInput.placeholder = "Enter your password"
+        loginPasswordInput.id = "password"
+        loginForm.appendChild(loginPasswordInput)
+        // boton log in
+        var loginSubmitButton = document.createElement('button')
+        loginSubmitButton.type = 'submit'
+        loginSubmitButton.innerText = 'Login'
+        loginForm.appendChild(loginSubmitButton)
+        //link register
+        var loginRegisterLink = document.createElement('a')
+        loginRegisterLink.href = ''
+        loginRegisterLink.innerText = 'Register'
+        loginSection.appendChild(loginRegisterLink)
+
+
+        //Evento register
+        loginRegisterLink.addEventListener('click', function (event) {
+            event.preventDefault()
+            loginSection.remove()
+
+            //Register section
+            var registerSection = document.createElement('section')
+            var registerTitle = document.createElement('h2')
+            registerTitle.innerText = 'Register'
+            registerSection.appendChild(registerTitle)
+            //Register Form
+            var registerForm = document.createElement('form')
+            registerSection.appendChild(registerForm)
+            //label name
+            var registerNameLabel = document.createElement('label')
+            registerNameLabel.htmlFor = 'name'
+            registerNameLabel.innerText = 'Name'
+            registerForm.appendChild(registerNameLabel)
+            //Input name
+            var registerNameInput = document.createElement('input')
+            registerNameInput.type = 'text'
+            registerNameInput.id = 'name'
+            registerForm.appendChild(registerNameInput)
+            //label Email
+            var registerEmailLabel = document.createElement('label')
+            registerEmailLabel.htmlFor = 'email'
+            registerEmailLabel.innerText = 'E-mail'
+            registerForm.appendChild(registerEmailLabel)
+            //input Email
+            var registerEmailInput = document.createElement('input')
+            registerEmailInput.type = 'text'
+            registerEmailInput.id = 'email'
+            registerForm.appendChild(registerEmailInput)
+            //label Username
+            var registerUsernameLabel = document.createElement('label')
+            registerUsernameLabel.htmlFor = 'username'
+            registerUsernameLabel.innerText = 'Username'
+            registerForm.appendChild(registerUsernameLabel)
+            //input Username
+            var registerUsernameInput = document.createElement('input')
+            registerUsernameInput.type = 'text'
+            registerUsernameInput.id = 'username'
+            registerForm.appendChild(registerUsernameInput)
+            //label Password
+            var registerPasswordLabel = document.createElement('label')
+            registerPasswordLabel.htmlFor = 'password'
+            registerPasswordLabel.innerText = 'Password'
+            registerForm.appendChild(registerPasswordLabel)
+            //input Password
+            var registerPasswordInput = document.createElement('input')
+            registerPasswordInput.type = 'password'
+            registerPasswordInput.id = 'password'
+            registerForm.appendChild(registerPasswordInput)
+            //Button Register
+            var registerSubmitButton = document.createElement('button')
+            registerSubmitButton.type = 'submit'
+            registerSubmitButton.innerText = 'Register'
+            registerForm.appendChild(registerSubmitButton)
+            // link Login
+            var registerLoginLink = document.createElement('a')
+            registerLoginLink.href = ''
+            registerLoginLink.innerText = 'Login'
+            registerSection.appendChild(registerLoginLink)
+
+            // Evento Login Link
+            registerLoginLink.addEventListener("click", function (event) {
+                event.preventDefault()
+                registerSection.remove()
+                body.appendChild(loginSection)
+            })
+
+
+            registerForm.addEventListener("submit", function (event) {
+                event.preventDefault()
+
+                registerSection.remove()
+
+                var name = registerNameInput.value
+                var email = registerEmailInput.value
+                var username = registerUsernameInput.value
+                var password = registerPasswordInput.value
+
+                var user = { name: name, email: email, username: username, password: password }
+
+                users.push(user)
+
+                body.appendChild(loginSection)
+            })
+
+
+            body.appendChild(registerSection)
+
+        })
+
+
+        //Evento sobre click en logIn form
+        loginForm.addEventListener("submit", function (event) {
+            event.preventDefault()
+
+
+
+            var user = users.find(function (user) {
+                return user.username === loginUsernameInput.value && user.password === loginPasswordInput.value
+            })
+
+            if (user === undefined) {
+                alert("Invalid information")
+                loginPasswordInput.value = "";
+            }
+            else {
+
+                loggedInUser = user
+                loginSection.remove() // para que desaparezca la vista
+
+                //creamos los elementos
+                //Creamos section
+                var homeSection = document.createElement("section")
+                //Creamos el titulo
+                var homeSectionTitle = document.createElement("h2")
+                homeSectionTitle.innerText = "Home"
+                homeSection.appendChild(homeSectionTitle)
+                //Creamos la bienvenida
+                var homeGreetingText = document.createElement("h3")
+                homeGreetingText.innerText = "Hello, " + loggedInUser.name + "!"
+                homeSection.appendChild(homeGreetingText)
+                //Creamos el boton
+                var homeLogoutButton = document.createElement("button")
+                homeLogoutButton.innerText = "Logout"
+                homeSection.appendChild(homeLogoutButton)
+
+                homeLogoutButton.addEventListener("click", function (event) {
+                    event.preventDefault()
+
+                    loginForm.reset()
+
+                    homeSection.remove()
+
+                    body.appendChild(loginSection)
+                })
+
+                body.appendChild(homeSection)
+            }
+        })
+
+
+
+        var body = document.querySelector("body")
+        body.appendChild(loginSection)
+    </script>
+</body>
+
+</html>