add compo functions b00tc4mp#167

annagonzalez9 · Oct 9, 2024 · 6ec4f18 · 6ec4f18
1 parent e2fc2d1
commit 6ec4f18
Show file tree

Hide file tree

Showing 15 changed files with 704 additions and 19 deletions.
diff --git a/staff/anna-gonzalez/unsocial.2/data.js b/staff/anna-gonzalez/unsocial.2/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/anna-gonzalez/unsocial.2/index.html b/staff/anna-gonzalez/unsocial.2/index.html
@@ -0,0 +1,23 @@
+<!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://static-00.iconduck.com/assets.00/blank-yellow-icon-2048x2048-lzfypkl4.png"
+        type="image/x-icon"> <!--ICON OF THE PAGE-->
+    <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/anna-gonzalez/unsocial.2/logic.js b/staff/anna-gonzalez/unsocial.2/logic.js
@@ -0,0 +1,44 @@
+function loginUser(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 (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined)
+        throw new Error('User not registered')
+
+    return user
+}
+
+function registerUser(name, email, username, password, passwordRepeat) {
+    if (name.length < 2)
+        throw new Error('Invalid name')
+
+    if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+        throw new Error('Invalid e-mail')
+
+    if (username.length < 4 || username.length > 12)
+        throw new Error('Invalid username')
+
+    if (password.length < 8)
+        throw new Error('Invalid password')
+
+    if (password !== passwordRepeat)
+        throw new Error('Passwords do not match')
+
+    var user = users.find(function (user) {
+        return user.username === username || user.email === email
+    })
+
+    if (user !== undefined)
+        throw new Error('User already exists')
+
+    user = { name: name, email: email, username: username, password: password }
+
+    users.push(user)
+}
diff --git a/staff/anna-gonzalez/unsocial.2/main.js b/staff/anna-gonzalez/unsocial.2/main.js
@@ -0,0 +1,207 @@
+var loggedInUser = null
+
+//LOGIN SECTION
+var loginSection = document.createElement('section')
+var loginTitle = document.createElement('h2')
+loginTitle.innerText = 'Login'
+loginSection.appendChild(loginTitle)
+
+//login form
+var loginForm = document.createElement('form')
+loginSection.appendChild(loginForm)
+
+//login username label & input
+var loginUsernameLabel = document.createElement('label')
+loginUsernameLabel.htmlFor = 'username'
+loginUsernameLabel.innerText = 'Username'
+loginForm.appendChild(loginUsernameLabel)
+var loginUsernameInput = document.createElement('input')
+loginUsernameInput.type = 'text'
+loginUsernameInput.id = 'username'
+loginForm.appendChild(loginUsernameInput)
+
+//login password label & input
+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)
+
+//login form submit button
+var loginSubmitButton = document.createElement('button')
+loginSubmitButton.type = 'submit'
+loginSubmitButton.innerText = 'Login'
+loginForm.appendChild(loginSubmitButton)
+
+//event login form submit button
+loginForm.onsubmit = function (event) {
+    event.preventDefault()
+
+    var username = loginUsernameInput.value
+    var password = loginPasswordInput.value
+
+    try { //call the declarated function
+        loggedInUser = loginUser(username, password)
+
+        loginForm.reset()
+
+        homeTitleUser.innerText = 'Hello, ' + loggedInUser.name + '!'
+
+        loginSection.remove()
+        body.appendChild(homeSection)
+    } catch (error) {
+        loginPasswordInput.value = ''
+
+        alert(error.message)
+
+        console.error(error)
+    }
+}
+
+//login register link
+var loginRegisterLink = document.createElement('a')
+loginRegisterLink.href = ''
+loginRegisterLink.innerText = 'Register'
+loginSection.appendChild(loginRegisterLink)
+
+// event of login register link
+loginRegisterLink.onclick = function (event) {
+    event.preventDefault()
+
+    loginSection.remove()
+    body.appendChild(registerSection)
+}
+
+var body = document.querySelector('body')
+body.appendChild(loginSection)
+
+// 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)
+
+// register name label & input
+var registerNameLabel = document.createElement('label')
+registerNameLabel.htmlFor = 'name'
+registerNameLabel.innerText = 'Name'
+registerForm.appendChild(registerNameLabel)
+var registerNameInput = document.createElement('input')
+registerNameInput.type = 'text'
+registerNameInput.id = 'name'
+registerForm.appendChild(registerNameInput)
+
+// register email label & input
+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)
+
+// register username label & input
+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)
+
+//register password label & input
+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)
+
+//register repeat password label & input
+var registerPasswordRepeatLabel = document.createElement('label')
+registerPasswordRepeatLabel.htmlFor = 'password-repeat'
+registerPasswordRepeatLabel.innerText = 'Repeat password'
+registerForm.appendChild(registerPasswordRepeatLabel)
+var registerPasswordRepeatInput = document.createElement('input')
+registerPasswordRepeatInput.type = 'password'
+registerPasswordRepeatInput.id = 'password-repeat'
+registerForm.appendChild(registerPasswordRepeatInput)
+
+//register form submit button
+var registerSubmitButton = document.createElement('button')
+registerSubmitButton.type = 'submit'
+registerSubmitButton.innerText = 'Register'
+registerForm.appendChild(registerSubmitButton)
+
+//event of register form submit button
+registerForm.onsubmit = function (event) {
+    event.preventDefault()
+
+    var name = registerNameInput.value
+    var email = registerEmailInput.value
+    var username = registerUsernameInput.value
+    var password = registerPasswordInput.value
+    var passwordRepeat = registerPasswordRepeatInput.value
+
+    try { //call the declarated function
+        registerUser(name, email, username, password, passwordRepeat)
+
+        registerForm.reset()
+
+        registerSection.remove()
+        body.appendChild(loginSection)
+    } catch (error) {
+        alert(error.message)
+
+        console.error(error)
+    }
+}
+
+//register login link
+var registerLoginLink = document.createElement('a')
+registerLoginLink.href = ''
+registerLoginLink.innerText = 'Login'
+registerSection.appendChild(registerLoginLink)
+
+//event of register login link
+registerLoginLink.onclick = function (event) {
+    event.preventDefault()
+
+    registerSection.remove()
+    body.appendChild(loginSection)
+}
+
+//HOME SECTION
+var homeSection = document.createElement('section')
+var homeSectionTitle = document.createElement('h2')
+homeSectionTitle.innerText = 'Home'
+homeSection.appendChild(homeSectionTitle)
+
+//home h3
+var homeTitleUser = document.createElement('h3')
+homeTitleUser.innerText = ''
+homeSection.appendChild(homeTitleUser)
+
+//home logout button
+var homeLogoutButton = document.createElement('button')
+homeLogoutButton.innerText = 'Logout'
+homeSection.appendChild(homeLogoutButton)
+
+//event home logout button
+homeLogoutButton.onclick = function (event) {
+    event.preventDefault()
+
+    homeSection.remove()
+    body.appendChild(loginSection)
+}
diff --git a/staff/anna-gonzalez/unsocial.2/style.css b/staff/anna-gonzalez/unsocial.2/style.css
@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Press+Start+2P&display=swap');
+
+:root {
+    --color: lavender;
+    --font: 'Montserrat';
+    letter-spacing: 1px;
+    font-family: var(--font);
+}
+
+body {
+    font-size: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    background-color: black;
+    color: var(--color);
+}
+
+h1 {
+    font-size: 450%;
+    font-family: 'Press Start 2P';
+    margin-bottom: 80px;
+}
+
+input {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    border: 0px;
+    margin-top: 2%;
+    margin-bottom: 10%;
+    background-color: var(--color);
+    width: 200px;
+    /* it's the same than font-family: inherit
+            for the input and buttons we always need to change the default font */
+}
+
+a:visited,
+h1 {
+    color: yellow;
+}
+
+.counterBox {
+    margin-top: 20px;
+    background-color: yellow;
+    color: black;
+}
+
+button {
+    font-family: 'Press Start 2P';
+    font-size: 120%;
+    margin-top: 80px;
+    margin-bottom: 15px;
+    background: blue;
+    color: var(--color);
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: 0px;
+    cursor: pointer;
+}
diff --git a/staff/anna-gonzalez/unsocial.3/data.js b/staff/anna-gonzalez/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/anna-gonzalez/unsocial.3/index.html b/staff/anna-gonzalez/unsocial.3/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://static-00.iconduck.com/assets.00/blank-yellow-icon-2048x2048-lzfypkl4.png"
+        type="image/x-icon"> <!--ICON OF THE PAGE-->
+    <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>