construction and compo functions b00tc4mp#175

Ctgenix · Oct 9, 2024 · d9c8152 · d9c8152
1 parent 4c7240b
commit d9c8152
Show file tree

Hide file tree

Showing 19 changed files with 888 additions and 251 deletions.
diff --git a/staff/carlos-tomas/unsocial.2/.gitkeep b/staff/carlos-tomas/unsocial.2/.gitkeep
diff --git a/staff/carlos-tomas/unsocial.2/data.js b/staff/carlos-tomas/unsocial.2/data.js
@@ -0,0 +1,14 @@
+
+var users = [
+    {
+        name: 'Peter Pan',
+        email: '[email protected]',
+        username: 'peterpan',
+        password: '123123123'
+    },
+    {
+        name: 'Wendy Darling',
+        email: '[email protected]', username: 'wendydarling',
+        password: '123123123'
+    }
+]
diff --git a/staff/carlos-tomas/unsocial.2/index.html b/staff/carlos-tomas/unsocial.2/index.html
@@ -0,0 +1,25 @@
+<!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">
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+
+    <script src="data.js"></script>
+
+    <script src="logic.js"></script>
+
+    <script src="main.js"></script>
+
+</body>
+
+</html>
diff --git a/staff/carlos-tomas/unsocial.2/logic.js b/staff/carlos-tomas/unsocial.2/logic.js
@@ -0,0 +1,52 @@
+function registerUser(nameInput, emailInput, usernameInput, passwordInput, passwordRepeat) {
+
+    if (nameInput.length < 2)
+        throw new Error("name too short")
+
+    if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(emailInput))
+        throw new Error("invaled e-mail")
+
+    if (usernameInput.length < 4 || usernameInput.length > 12)
+        throw new Error("invalid username")
+
+    if (passwordInput.length < 8)
+        throw new Error("invalid password")
+
+    if (passwordInput !== passwordRepeat)
+        throw new Error("passwords do not match")
+
+    var user = users.find(function (user) {
+        return (user.username === usernameInput) || (user.email === emailInput)
+    })
+
+    if (user !== undefined) {
+        alert("user already exists")
+
+        return
+    }
+    var user = {
+        name: nameInput,
+        email: emailInput,
+        username: usernameInput,
+        password: passwordInput
+    }
+
+    users.push(user)
+}
+
+function authenticateUser(username, password) {
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    if (password.length < 8)
+        throw new Error('invalid password')
+    var user = users.find(function (element) {
+        return (element.username === username) && (element.password === password)
+    })
+
+    if (user === undefined)
+        throw new Error('wrong credentials')
+
+    return user
+
+}
diff --git a/staff/carlos-tomas/unsocial.2/main.js b/staff/carlos-tomas/unsocial.2/main.js
@@ -0,0 +1,216 @@
+
+var loggedInUser = null
+//create login section
+var loginSection = document.createElement('section')
+var loginTitle = document.createElement('h2')
+loginTitle.innerText = 'Login'
+loginSection.appendChild(loginTitle)
+//create a form
+var loginForm = document.createElement('form')
+loginSection.appendChild(loginForm)
+var loginUsernameLabel = document.createElement('label')
+//create label username     
+loginUsernameLabel.htmlFor = 'username'
+loginUsernameLabel.innerText = 'Username'
+loginForm.appendChild(loginUsernameLabel)
+//create input username        
+var loginUsernameInput = document.createElement('input')
+loginUsernameInput.type = 'text'
+loginUsernameInput.id = 'username'
+loginForm.appendChild(loginUsernameInput)
+//create label password     
+var loginPasswordLabel = document.createElement('label')
+loginPasswordLabel.htmlFor = 'password'
+loginPasswordLabel.innerText = 'Password'
+loginForm.appendChild(loginPasswordLabel)
+//create input password
+var loginPasswordInput = document.createElement('input')
+loginPasswordInput.type = 'password'
+loginPasswordInput.id = 'password'
+loginForm.appendChild(loginPasswordInput)
+//create button in login
+var loginSubmitButton = document.createElement('button')
+loginSubmitButton.type = 'submit'
+loginSubmitButton.innerText = 'Login'
+loginForm.appendChild(loginSubmitButton)
+//create anchor link in Login to Register
+var loginRegisterLink = document.createElement('a')
+loginRegisterLink.href = ''
+loginRegisterLink.innerText = 'Register'
+loginSection.appendChild(loginRegisterLink)
+
+//create a function to login
+loginForm.addEventListener('submit', function (event) {
+    event.preventDefault()
+    var username = loginUsernameInput.value
+    var password = loginPasswordInput.value
+
+    try {
+        loggedInUser = authenticateUser(username, password)
+
+        loginSection.remove()
+
+        loginForm.reset()
+
+        var homeSection = document.createElement('section')
+
+        var homeTitle = document.createElement('h2')
+        homeTitle.innertext = 'Home'
+        homeSection.appendChild(homeTitle)
+
+        var homeSubtitle = document.createElement('h3')
+        homeSection.appendChild(homeSubtitle)
+
+        var homeUserTitle = homeSubtitle
+        homeUserTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+        // crate a button for return to login 
+        var logoutSubmitButton = document.createElement('button')
+        logoutSubmitButton.type = 'submit'
+        logoutSubmitButton.innerText = 'Logout'
+        homeSection.appendChild(logoutSubmitButton)
+
+        //create a function for return to login
+        logoutSubmitButton.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loggedInUser = null
+
+            homeSection.remove()
+            body.appendChild(loginSection)
+        })
+
+        body.appendChild(homeSection)
+    } catch (error) {
+        loginPasswordInput.value = ""
+
+        alert(error.message)
+
+        console.error(error)
+    }
+})
+//create function in login to register link
+loginRegisterLink.addEventListener('click', function (event) {
+    event.preventDefault()
+
+    loginSection.remove()
+    //create new section to register
+    var registerSection = document.createElement('section')
+
+    //create a title to register          
+    var registerTitle = document.createElement('h2')
+    registerTitle.innerText = 'Register'
+    registerSection.appendChild(registerTitle)
+
+    //create a form
+    var registerForm = document.createElement('form')
+    registerSection.appendChild(registerForm)
+
+    //create a label for name
+    var registerNameLabel = document.createElement('label')
+    registerNameLabel.htmlFor = 'name'
+    registerNameLabel.innerText = 'Name'
+    registerForm.appendChild(registerNameLabel)
+
+    //create a input for a name
+    var registerNameInput = document.createElement('input')
+    registerNameInput.type = 'text'
+    registerNameInput.id = 'name'
+    registerForm.appendChild(registerNameInput)
+
+    //create a label for email
+    var registerEmailLabel = document.createElement('label')
+    registerEmailLabel.htmlFor = 'email'
+    registerEmailLabel.innerText = 'Email'
+    registerForm.appendChild(registerEmailLabel)
+
+    //create a input for email
+    var registerEmailInput = document.createElement('input')
+    registerEmailInput.type = 'text'
+    registerEmailInput.id = 'email'
+    registerForm.appendChild(registerEmailInput)
+
+    //create a label for username
+    var registerUsernameLabel = document.createElement('label')
+    registerUsernameLabel.htmlFor = 'username'
+    registerUsernameLabel.innerText = 'Username'
+    registerForm.appendChild(registerUsernameLabel)
+
+    //create a input for username          
+    var registerUsernameInput = document.createElement('input')
+    registerUsernameInput.type = 'text'
+    registerUsernameInput.id = 'username'
+    registerForm.appendChild(registerUsernameInput)
+
+    //create a label for password          
+    var registerPasswordLabel = document.createElement('label')
+    registerPasswordLabel.htmlFor = 'password'
+    registerPasswordLabel.innerText = 'Password'
+    registerForm.appendChild(registerPasswordLabel)
+
+    //create a input for password
+    registerPasswordInput = document.createElement('input')
+    registerPasswordInput.type = 'password'
+    registerPasswordInput.id = 'password'
+    registerForm.appendChild(registerPasswordInput)
+
+    //create a label for password-repeat       
+    var registerPasswordLabel = document.createElement('label')
+    registerPasswordLabel.htmlFor = 'password-repeat'
+    registerPasswordLabel.innerText = 'Repead password'
+    registerForm.appendChild(registerPasswordLabel)
+
+    //create a input for password
+    registerPasswordRepeatInput = document.createElement('input')
+    registerPasswordRepeatInput.type = 'password'
+    registerPasswordRepeatInput.id = 'password-repeat'
+    registerForm.appendChild(registerPasswordRepeatInput)
+
+    //create a button for submit the registration
+    var registerSubmitButton = document.createElement('button')
+    registerSubmitButton.type = 'submit'
+    registerSubmitButton.innerText = 'Register'
+    registerForm.appendChild(registerSubmitButton)
+
+    //create a link in register to login
+    var registerLoginLink = document.createElement('a')
+    registerLoginLink.href = ''
+    registerLoginLink.innerText = 'Login'
+    registerSection.appendChild(registerLoginLink)
+    //register
+    registerForm.addEventListener('submit', function (event) {
+
+        event.preventDefault()
+        var nameInput = registerNameInput.value
+        var emailInput = registerEmailInput.value
+        var usernameInput = registerUsernameInput.value
+        var passwordInput = registerPasswordInput.value
+        var passwordRepeat = registerPasswordRepeatInput.value
+
+        try {
+            registerUser(nameInput, emailInput, usernameInput, passwordInput, passwordRepeat)
+
+            registerSection.remove()
+
+            registerForm.reset()
+
+            body.appendChild(loginSection)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+    //create a function for a button Login          
+    registerLoginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        registerSection.remove()
+        body.appendChild(loginSection)
+    })
+
+    body.appendChild(registerSection)
+
+})
+var body = document.querySelector('body')
+body.appendChild(loginSection)
+body.appendChild(loginSection)
diff --git a/staff/carlos-tomas/unsocial.2/style.css b/staff/carlos-tomas/unsocial.2/style.css
@@ -0,0 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
+
+:root {
+    --color: dodgerblue;
+    --font: "Fontdiner Swanky", serif;
+    font-family: var(--font);
+}
+
+body {
+    background-color: #fffe9a;
+
+    text-align: center;
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+}
+
+.login {
+    margin-top: 100px;
+}
+
+.register {
+    margin-top: 100px;
+}
+
+input {
+    background-color: inherit;
+    font-family: inherit;
+    display: block;
+    width: 20px;
+    max-width: 500px;
+    min-width: 300px;
+    margin: 15px auto;
+    border-radius: 10px;
+}
+
+a:visited {
+    color: black;
+}
diff --git a/staff/carlos-tomas/unsocial.3/.gitkeep b/staff/carlos-tomas/unsocial.3/.gitkeep
diff --git a/staff/carlos-tomas/unsocial.3/data.js b/staff/carlos-tomas/unsocial.3/data.js
@@ -0,0 +1,4 @@
+var users = [
+    { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+]
diff --git a/staff/carlos-tomas/unsocial.3/index.html b/staff/carlos-tomas/unsocial.3/index.html
@@ -0,0 +1,27 @@
+<!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">
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+
+    <script src="data.js"></script>
+
+    <script src="logic.js"></script>
+
+    <script src="view.js"></script>
+
+    <script src="main.js"></script>
+
+</body>
+
+</html>