From 29074cde79f09fde2062e7ab0677d9a1406cc2fa Mon Sep 17 00:00:00 2001
From: Victoria Kolomytseva <vkolomytseva87@gmail.com>
Date: Sun, 13 Oct 2024 18:18:11 +0200
Subject: [PATCH] Unsocial, comopo.. #179

---
 .../victoria-kolomytseva/unsocial.1/.gitkeep  |   0
 .../unsocial.1/index.1.html                   | 217 ++++++++++++
 .../unsocial.1/index.4.html                   | 290 ++++++++++++++++
 .../unsocial.1/index.html                     | 159 +++++++++
 .../unsocial.1/index2.html                    | 210 +++++++++++
 .../unsocial.1/index3.html                    | 164 +++++++++
 .../{unsocial1 => unsocial.2}/data.js         |   0
 .../{unsocial1 => unsocial.2}/index.html      |   3 +
 .../{unsocial1 => unsocial.2}/logic.js        |   2 +-
 .../{unsocial1 => unsocial.2}/main.js         |   2 +
 .../{unsocial1 => unsocial.2}/styles.css      |   0
 staff/victoria-kolomytseva/unsocial.3/data.js |   6 +
 .../unsocial.3/index.html                     |  28 ++
 .../victoria-kolomytseva/unsocial.3/logic.js  |  44 +++
 staff/victoria-kolomytseva/unsocial.3/main.js |   6 +
 .../style.css => unsocial.3/styles.css}       |   0
 staff/victoria-kolomytseva/unsocial.3/view.js | 209 +++++++++++
 staff/victoria-kolomytseva/unsocial.4/data.js |   4 +
 .../unsocial.4/index.html                     |  27 ++
 .../victoria-kolomytseva/unsocial.4/logic.js  |  44 +++
 staff/victoria-kolomytseva/unsocial.4/main.js |   6 +
 .../victoria-kolomytseva/unsocial.4/style.css |  47 +++
 staff/victoria-kolomytseva/unsocial.4/view.js | 182 ++++++++++
 .../victoria-kolomytseva/unsocial.5/compo.js  |   9 +
 staff/victoria-kolomytseva/unsocial.5/data.js |   4 +
 .../unsocial.5/index.html                     |  26 ++
 .../victoria-kolomytseva/unsocial.5/logic.js  |  44 +++
 staff/victoria-kolomytseva/unsocial.5/main.js |   6 +
 .../victoria-kolomytseva/unsocial.5/style.css |  47 +++
 staff/victoria-kolomytseva/unsocial.5/view.js | 188 ++++++++++
 .../victoria-kolomytseva/unsocial.6/compo.js  |   9 +
 staff/victoria-kolomytseva/unsocial.6/data.js |   4 +
 .../unsocial.6/index.html                     |  26 ++
 .../victoria-kolomytseva/unsocial.6/logic.js  |  44 +++
 staff/victoria-kolomytseva/unsocial.6/main.js |   6 +
 .../victoria-kolomytseva/unsocial.6/style.css |  47 +++
 staff/victoria-kolomytseva/unsocial.6/view.js | 189 ++++++++++
 staff/victoria-kolomytseva/unsocial/compo.js  | 226 ++++++++++++
 staff/victoria-kolomytseva/unsocial/data.js   |  21 +-
 .../victoria-kolomytseva/unsocial/index.html  |   7 +-
 staff/victoria-kolomytseva/unsocial/logic.js  |  67 ++--
 staff/victoria-kolomytseva/unsocial/main.js   |  12 +-
 .../victoria-kolomytseva/unsocial/styles.css  |  69 ++++
 staff/victoria-kolomytseva/unsocial/view.js   | 327 +++++++++---------
 44 files changed, 2834 insertions(+), 194 deletions(-)
 create mode 100644 staff/victoria-kolomytseva/unsocial.1/.gitkeep
 create mode 100644 staff/victoria-kolomytseva/unsocial.1/index.1.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.1/index.4.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.1/index.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.1/index2.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.1/index3.html
 rename staff/victoria-kolomytseva/{unsocial1 => unsocial.2}/data.js (100%)
 rename staff/victoria-kolomytseva/{unsocial1 => unsocial.2}/index.html (99%)
 rename staff/victoria-kolomytseva/{unsocial1 => unsocial.2}/logic.js (97%)
 rename staff/victoria-kolomytseva/{unsocial1 => unsocial.2}/main.js (99%)
 rename staff/victoria-kolomytseva/{unsocial1 => unsocial.2}/styles.css (100%)
 create mode 100644 staff/victoria-kolomytseva/unsocial.3/data.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.3/index.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.3/logic.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.3/main.js
 rename staff/victoria-kolomytseva/{unsocial/style.css => unsocial.3/styles.css} (100%)
 create mode 100644 staff/victoria-kolomytseva/unsocial.3/view.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.4/data.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.4/index.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.4/logic.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.4/main.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.4/style.css
 create mode 100644 staff/victoria-kolomytseva/unsocial.4/view.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.5/compo.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.5/data.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.5/index.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.5/logic.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.5/main.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.5/style.css
 create mode 100644 staff/victoria-kolomytseva/unsocial.5/view.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.6/compo.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.6/data.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.6/index.html
 create mode 100644 staff/victoria-kolomytseva/unsocial.6/logic.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.6/main.js
 create mode 100644 staff/victoria-kolomytseva/unsocial.6/style.css
 create mode 100644 staff/victoria-kolomytseva/unsocial.6/view.js
 create mode 100644 staff/victoria-kolomytseva/unsocial/styles.css

diff --git a/staff/victoria-kolomytseva/unsocial.1/.gitkeep b/staff/victoria-kolomytseva/unsocial.1/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/staff/victoria-kolomytseva/unsocial.1/index.1.html b/staff/victoria-kolomytseva/unsocial.1/index.1.html
new file mode 100644
index 00000000..980314b1
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.1/index.1.html
@@ -0,0 +1,217 @@
+<!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=Archivo+Black&display=swap');
+
+        :root {
+            --color: #dccde1;
+
+            --font: 'Archivo Black';
+            font-family: var(--font);
+        }
+
+        body {
+            background-color: #311845;
+            color: var(--color);
+            text-align: center;
+            width: 100%;
+            height: 100vh;
+            margin: 0;
+        }
+
+        h1 {
+            margin-top: 200px;
+            text-align: center;
+        }
+
+
+
+        section {
+            text-align: center;
+        }
+
+        form {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        input {
+            background-color: inherit;
+            font-family: inherit;
+        }
+    </style>
+
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+    <section>
+        <h2>login</h2>
+
+        <form id="loginForm">
+            <label for="username">Username</label>
+            <input type="text" id="username" required />
+            <label>Password</label>
+            <input type="password" id="password" required />
+
+            <button type="submit">Login</button>
+        </form>
+
+        <a href="">Register</a>
+    </section>
+
+    <section class="register">
+        <h2>Register</h2>
+
+        <form id="registerForm">
+            <label for="name">Name</label>
+            <input type="text" id="name" />
+
+            <label for="email">E-mail</label>
+            <input type="email" id="email" />
+
+            <label for="username">Username</label>
+            <input type="text" id="username" />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" />
+
+            <button type="submit">Register</button>
+
+        </form>
+
+        <a href="">Login</a>
+    </section>
+
+    <section>
+        <h2>Home</h2>
+
+        <h3>Hello, User</h3>
+
+        <button>Logout</button>
+    </section>
+
+    <script>
+        var users = [
+            { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123' },
+            { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123' }
+        ]
+
+        var loggedInUser = null
+
+        var sections = document.querySelectorAll('section')
+
+        var loginSection = sections[0]
+        // loginSection.style.display = 'none'
+
+        var registerSection = sections[1]
+        registerSection.style.display = 'none'
+
+        var homeSection = sections[2]
+        homeSection.style.display = 'none'
+
+        var anchors = document.querySelectorAll('a')
+
+        var registerAnchor = anchors[0]
+        // registerAnchor.onclick = function (event) {
+        registerAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loginSection.style.display = 'none'
+            registerSection.style.display = ''
+            // }
+        })
+        var loginAnchor = anchors[1]
+        // loginAnchor.onclick = function (event) {
+        loginAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+            // }
+        })
+        var forms = document.querySelectorAll('form')
+
+        var registerForm = forms[1]
+        //registerForm.onsubmit = function (event) {
+        registerForm.addEventListener('submit', function (event) {
+            event.preventDefault()
+            console.log('register form')
+            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 user = { name: name, email: email, username: username, password: password }
+            //users[users.length] = user
+            users.push(user)
+            console.log('register form use: ', user)
+
+            registerForm.reset()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+            //}
+        })
+        var loginform = forms[0]
+        var userLogin = []
+        loginform.addEventListener("submit", function (event) {
+            event.preventDefault()
+            var loginInputs = loginform.querySelectorAll("input")
+
+            var usernameInputLogin = loginInputs[0]
+            var usernameLogin = usernameInputLogin.value
+
+            var passwordInputLogin = loginInputs[1]
+            var passwordLogin = passwordInputLogin.value
+
+            var login = { username: usernameLogin, password: passwordLogin }
+
+
+
+            loginform.reset()
+            var user = users.find(
+                (users) => users.username === usernameLogin && users.password === passwordLogin
+            )
+
+
+            if (user) {
+                loginSection.style.display = 'none'
+                homeSection.style.display = ""
+                var h3 = homeSection.querySelector('h3')
+                h3.innerText = "Hello, " + user.name + "!"
+            } else {
+                alert("Usuario o passoword Mal")
+            }
+            return
+        })
+
+        var control = document.querySelectorAll("button")
+        var controlLogout = control[2]
+        controlLogout.addEventListener('click', function (event) {
+            loginSection.style.display = ''
+            homeSection.style.display = "none"
+        })
+
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.1/index.4.html b/staff/victoria-kolomytseva/unsocial.1/index.4.html
new file mode 100644
index 00000000..e93443e3
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.1/index.4.html
@@ -0,0 +1,290 @@
+<!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>
+        //data
+
+        var users = [
+            { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+            { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+        ]
+
+        // business
+
+        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('passswords do not match')
+
+            var user = users.find(function (user) {
+                return user.username === username || user.email === email
+            })
+
+            if (user !== underfined)
+                throw new Error('user already exists')
+
+            user = { name: name, email: email, username: username, password: password }
+
+            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 (user) {
+                return user.username === username && user.password === password
+            })
+
+            if (user === undefined)
+                throw new Error('wrong credentials')
+
+            return user
+        }
+        // presentation 
+
+        var loggedInUser = null
+
+        var loginSection = document.createElement('section')
+
+        var loginTitle = document.createElement('h2')
+        loginTitle.innerText = 'Login'
+        loginSection.appendChild(loginTitle)
+
+        var loginForm = document.createElement('form')
+        loginSection.appendChild(loginForm)
+
+        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)
+
+        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)
+
+        var loginSubmitButton = document.createElement('button')
+        loginSubmitButton.type = 'submit'
+        loginSubmitButton.innerText = 'Login'
+        loginForm.appendChild(loginSubmitButton)
+
+        loginForm.addEventListener('submit', function (event) {
+            event.preventDefault()
+
+
+            var username = loginUsernameInput.value
+            var password = loginPasswordInput.value
+
+            try {
+                loggedInUser = authenticateUser(username, password)
+
+                loginForm.reset()
+
+                loginSection.remove()
+
+                var homeSection = document.createElement('section')
+
+                var homeTitle = document.createElement('h2')
+                homeTitle.innerText = 'Home'
+                homeSection.appendChild(homeTitle)
+
+                var homeUserTitle = document.createElement('h3')
+                homeUserTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+                homeSection.appendChild(homeUserTitle)
+
+                var homeLogoutButton = document.createElement('button')
+                homeLogoutButton.innerText = 'Logout'
+                homeSection.appendChild(homeLogoutButton)
+
+                homeLogoutButton.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)
+            }
+
+        })
+
+        var loginRegisterLink = document.createElement('a')
+        loginRegisterLink.href = ''
+        loginRegisterLink.innerText = 'Register'
+        loginSection.appendChild(loginRegisterLink)
+
+        loginRegisterLink.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loginSection.remove()
+
+            var registerSection = document.createElement('section')
+
+            var registerTitle = document.createElement('h2')
+            registerTitle.innerText = 'Register'
+            registerSection.appendChild(registerTitle)
+
+            var registerForm = document.createElement('form')
+            registerSection.appendChild(registerForm)
+
+            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)
+
+            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)
+
+            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)
+            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)
+
+            var registerSubmitButton = document.createElement('button')
+            registerSubmitButton.type = 'submit'
+            registerSubmitButton.innerText = 'Register'
+            registerForm.appendChild(registerSubmitButton)
+
+            registerForm.addEventListener('submit', 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 {
+                    registerUser(name, email, username, password, passwordRepeat)
+
+                    registerForm.reset()
+
+                    registerSection.remove()
+
+                    body.appendChild(loginSection)
+                } catch (error) {
+                    alert(error.message)
+
+                    console.error(error)
+                }
+            })
+
+            var registerLoginLink = document.createElement('a')
+            registerLoginLink.href = ''
+            registerLoginLink.innerText = 'Login'
+            registerSection.appendChild(registerLoginLink)
+
+            registerLoginLink.addEventListener('click', function (event) {
+                event.preventDefault()
+
+                registerSection.remove()
+                body.appendChild(loginSection)
+            })
+            body.appendChild(registerSection)
+        })
+
+        var body = document.querySelector('body')
+        body.appendChild(loginSection)
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.1/index.html b/staff/victoria-kolomytseva/unsocial.1/index.html
new file mode 100644
index 00000000..314c8ea4
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.1/index.html
@@ -0,0 +1,159 @@
+<!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>
+
+    <section>
+        <h2>Login</h2>
+
+        <form>
+            <label>Username</label>
+            <input type="text" />
+            <label>Password</label>
+            <input type="password" />
+
+            <button type="submit">Login</button>
+        </form>
+
+        <a href="">Register</a>
+    </section>
+
+    <section>
+        <h2>Register</h2>
+
+        <form>
+            <label for="name">Name</label>
+            <input type="text" id="name" />
+
+            <label for="email">E-mail</label>
+            <input type="email" id="email" />
+
+            <label for="username">Username</label>
+            <input type="text" id="username" />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" />
+
+            <button type="submit">Register</button>
+        </form>
+
+        <a href="">Login</a>
+    </section>
+
+    <section>
+        <h2>Home</h2>]
+
+        <h3>Hello, User!</h3>
+
+        <button>Logout</button>
+    </section>
+
+    <script>
+        var users = [
+            { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+            { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+        ]
+
+        var loggedInUser = null
+
+        var sections = document.querySelectorAll('section')
+
+        var loginSection = sections[0]
+        loginSection.style.display = 'none'
+
+        var registerSection = sections[1]
+        registerSection.style.display = 'none'
+
+        var homeSection = sections[2]
+        // homeSection.style.display = 'none'
+
+        var anchors = document.querySelectorAll('a')
+
+        var registerAnchor = anchors[0]
+        // registerAnchor.onclick = function (event) {
+        registerAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loginSection.style.display = 'none'
+            registerSection.style.display = ''
+            // }
+        })
+
+        var loginAnchor = anchors[1]
+        // loginAnchor.onclick = function (event) {
+        loginAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+            // }
+        })
+
+        var forms = document.querySelectorAll('form')
+
+        var registerForm = forms[1]
+        //registerForm.onsubmit = function (event) {
+        registerForm.addEventListener('submit', 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 user = { name: name, email: email, username: username, password: password }
+            //users[users.length] = user
+            users.push(user)
+
+            registerForm.reset()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+            //}
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.1/index2.html b/staff/victoria-kolomytseva/unsocial.1/index2.html
new file mode 100644
index 00000000..2ec00a43
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.1/index2.html
@@ -0,0 +1,210 @@
+<!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>
+
+    <section>
+        <h2>Login</h2>
+
+        <form>
+            <label for="username">Username</label>
+            <input type="text" id="username" />
+            <label for="password">Password</label>
+            <input type="password" id="password" />
+
+            <button type="submit">Login</button>
+        </form>
+
+        <a href="">Register</a>
+    </section>
+
+    <section>
+        <h2>Register</h2>
+
+        <form>
+            <label for="name">Name</label>
+            <input type="text" id="name" />
+
+            <label for="email">E-mail</label>
+            <input type="email" id="email" />
+
+            <label for="username">Username</label>
+            <input type="text" id="username" />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" />
+
+            <button type="submit">Register</button>
+        </form>
+
+        <a href="">Login</a>
+    </section>
+
+    <section>
+        <h2>Home</h2>
+
+        <h3>Hello, User!</h3>
+
+        <button>Logout</button>
+    </section>
+
+    <script>
+        var users = [
+            { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+            { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+        ]
+
+        var loggedInUser = null
+
+        var sections = document.querySelectorAll('section')
+
+        var loginSection = sections[0]
+        // loginSection.style.display = 'none'
+
+        var registerSection = sections[1]
+        registerSection.style.display = 'none'
+
+        var homeSection = sections[2]
+        homeSection.style.display = 'none'
+
+        var anchors = document.querySelectorAll('a')
+
+        var registerAnchor = anchors[0]
+
+        registerAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loginSection.style.display = 'none'
+            registerSection.style.display = ''
+        })
+
+        var loginAnchor = anchors[1]
+
+        loginAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+        var forms = document.querySelectorAll('form')
+
+        var registerForm = forms[1]
+
+        registerForm.addEventListener('submit', 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 user = { name: name, email: email, username: username, password: password }
+
+            users.push(user)
+
+            registerForm.reset()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+        var loginForm = forms[0]
+
+        loginForm.addEventListener('submit', 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
+
+            /*
+            buscar en users el usuario con este username y password
+            si existe entonces entrar en home [1]
+            si no, un alerta de error
+            poner un reset cuando se hace submit (se envia el formulario)
+            [1] poner el saludo en home con el name del usuario en el h3
+            apagar login, y encender home
+            */
+
+            var user = users.find(function (user) {
+                return user.username === username && user.password === password
+            })
+
+            if (user === undefined) {
+                alert('Wrong credentials')
+
+                passwordInput.value = ''
+            } else {
+                loggedInUser = user
+
+                loginForm.reset()
+
+                var homeUserTitle = homeSection.querySelector('h3')
+                homeUserTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+
+                loginSection.style.display = 'none'
+                homeSection.style.display = ''
+            }
+        })
+
+        var logoutButton = homeSection.querySelector('button')
+
+        logoutButton.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loggedInUser = null
+
+            homeSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.1/index3.html b/staff/victoria-kolomytseva/unsocial.1/index3.html
new file mode 100644
index 00000000..8db8df08
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.1/index3.html
@@ -0,0 +1,164 @@
+<!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: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+            { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+        ]
+
+        var loggedInUser = null
+
+        var loginSection = document.createElement('section')
+        var loginTitle = document.createElement('h2')
+        loginTitle.innerText = 'Login'
+        loginSection.appendChild(loginTitle)
+
+        var loginForm = document.createElement('form')
+        loginSection.appendChild(loginForm)
+
+        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)
+
+        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)
+
+        var loginSubmitButton = document.createElement('button')
+        loginSubmitButton.type = 'submit'
+        loginSubmitButton.innerText = 'Login'
+        loginForm.appendChild(loginSubmitButton)
+
+        var loginRegisterLink = document.createElement('a')
+        loginRegisterLink.href = ''
+        loginRegisterLink.innerText = 'Register'
+        loginSection.appendChild(loginRegisterLink)
+
+        loginRegisterLink.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loginSection.remove()
+
+            var registerSection = document.createElement('section')
+            var registerTitle = document.createElement('h2')
+            registerTitle.innerText = 'Register'
+            registerSection.appendChild(registerTitle)
+            var registerForm = document.createElement('form')
+            registerSection.appendChild(registerForm)
+
+            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)
+
+            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)
+
+            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)
+            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)
+
+            var registerSubmitButton = document.createElement('button')
+            registerSubmitButton.type = 'submit'
+            registerSubmitButton.innerText = 'Register'
+            registerForm.appendChild(registerSubmitButton)
+
+            var registerLoginLink = document.createElement('a')
+            registerLoginLink.href = ''
+            registerLoginLink.innerText = 'Login'
+            registerSection.appendChild(registerLoginLink)
+
+            registerLoginLink.addEventListener('click', function (event) {
+                event.preventDefault()
+
+                registerSection.remove()
+                body.appendChild(loginSection)
+            })
+
+            body.appendChild(registerSection)
+        })
+
+        var body = document.querySelector('body')
+        body.appendChild(loginSection)
+
+        // TODO make it work again 🎈🤡
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial1/data.js b/staff/victoria-kolomytseva/unsocial.2/data.js
similarity index 100%
rename from staff/victoria-kolomytseva/unsocial1/data.js
rename to staff/victoria-kolomytseva/unsocial.2/data.js
diff --git a/staff/victoria-kolomytseva/unsocial1/index.html b/staff/victoria-kolomytseva/unsocial.2/index.html
similarity index 99%
rename from staff/victoria-kolomytseva/unsocial1/index.html
rename to staff/victoria-kolomytseva/unsocial.2/index.html
index 357443d7..a46ec165 100644
--- a/staff/victoria-kolomytseva/unsocial1/index.html
+++ b/staff/victoria-kolomytseva/unsocial.2/index.html
@@ -14,8 +14,11 @@
 
 <body>
     <h1>Unsocial</h1>
+
     <script src="data.js"></script>
+
     <script src="logic.js"></script>
+
     <script src="main.js"></script>
 </body>
 
diff --git a/staff/victoria-kolomytseva/unsocial1/logic.js b/staff/victoria-kolomytseva/unsocial.2/logic.js
similarity index 97%
rename from staff/victoria-kolomytseva/unsocial1/logic.js
rename to staff/victoria-kolomytseva/unsocial.2/logic.js
index 1463d7c9..020b2f18 100644
--- a/staff/victoria-kolomytseva/unsocial1/logic.js
+++ b/staff/victoria-kolomytseva/unsocial.2/logic.js
@@ -20,7 +20,7 @@ function registerUser(name, email, username, password, passwordRepeat) {
         return user.username === username || user.email === email
     })
 
-    if (user !== underfined)
+    if (user !== undefined)
         throw new Error('user already exists')
 
     user = { name: name, email: email, username: username, password: password }
diff --git a/staff/victoria-kolomytseva/unsocial1/main.js b/staff/victoria-kolomytseva/unsocial.2/main.js
similarity index 99%
rename from staff/victoria-kolomytseva/unsocial1/main.js
rename to staff/victoria-kolomytseva/unsocial.2/main.js
index a665f777..058f8845 100644
--- a/staff/victoria-kolomytseva/unsocial1/main.js
+++ b/staff/victoria-kolomytseva/unsocial.2/main.js
@@ -187,5 +187,7 @@ loginRegisterLink.addEventListener('click', function (event) {
     body.appendChild(registerSection)
 })
 
+
+
 var body = document.querySelector('body')
 body.appendChild(loginSection)
diff --git a/staff/victoria-kolomytseva/unsocial1/styles.css b/staff/victoria-kolomytseva/unsocial.2/styles.css
similarity index 100%
rename from staff/victoria-kolomytseva/unsocial1/styles.css
rename to staff/victoria-kolomytseva/unsocial.2/styles.css
diff --git a/staff/victoria-kolomytseva/unsocial.3/data.js b/staff/victoria-kolomytseva/unsocial.3/data.js
new file mode 100644
index 00000000..68f31163
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.3/data.js
@@ -0,0 +1,6 @@
+//data
+
+var users = [
+    { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.3/index.html b/staff/victoria-kolomytseva/unsocial.3/index.html
new file mode 100644
index 00000000..91cd025e
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.3/index.html
@@ -0,0 +1,28 @@
+<!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="styles.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>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.3/logic.js b/staff/victoria-kolomytseva/unsocial.3/logic.js
new file mode 100644
index 00000000..edb64111
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.3/logic.js
@@ -0,0 +1,44 @@
+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)
+}
+
+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 (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined)
+        throw new Error('wrong credentials')
+
+    return user
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.3/main.js b/staff/victoria-kolomytseva/unsocial.3/main.js
new file mode 100644
index 00000000..029a3897
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.3/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = document.querySelector('body')
+body.appendChild(loginSection)
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial/style.css b/staff/victoria-kolomytseva/unsocial.3/styles.css
similarity index 100%
rename from staff/victoria-kolomytseva/unsocial/style.css
rename to staff/victoria-kolomytseva/unsocial.3/styles.css
diff --git a/staff/victoria-kolomytseva/unsocial.3/view.js b/staff/victoria-kolomytseva/unsocial.3/view.js
new file mode 100644
index 00000000..aa3b0b68
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.3/view.js
@@ -0,0 +1,209 @@
+function buildLoginSection() {
+    var loginSection = document.createElement('section')
+
+    var loginTitle = document.createElement('h2')
+    loginTitle.innerText = 'Login'
+    loginSection.appendChild(loginTitle)
+
+    var loginForm = document.createElement('form')
+    loginSection.appendChild(loginForm)
+
+    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)
+
+    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)
+
+    var loginSubmitButton = document.createElement('button')
+    loginSubmitButton.type = 'submit'
+    loginSubmitButton.innerText = 'Login'
+    loginForm.appendChild(loginSubmitButton)
+
+    loginForm.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var username = loginUsernameInput.value
+        var password = loginPasswordInput.value
+
+        try {
+            loggedInUser = authenticateUser(username, password)
+
+            loginForm.reset()
+
+            loginSection.remove()
+
+            var homeSection = buildHomeSection()
+
+            body.appendChild(homeSection)
+        } catch (error) {
+            loginPasswordInput.value = ''
+
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var loginRegisterLink = document.createElement('a')
+    loginRegisterLink.href = ''
+    loginRegisterLink.innerText = 'Register'
+    loginSection.appendChild(loginRegisterLink)
+
+    loginRegisterLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        loginSection.remove()
+
+        var registerSection = buildRegisterSection()
+
+        body.appendChild(registerSection)
+    })
+
+    return loginSection
+}
+
+function buildRegisterSection() {
+    var registerSection = document.createElement('section')
+
+    var registerTitle = document.createElement('h2')
+    registerTitle.innerText = 'Register'
+    registerSection.appendChild(registerTitle)
+
+    var registerForm = document.createElement('form')
+    registerSection.appendChild(registerForm)
+
+    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)
+
+    var registerEmailLabel = document.createElement('label')
+    registerEmailLabel.htmlFor = 'email'
+    registerEmailLabel.innerText = 'E-mail'
+    registerForm.appendChild(registerEmailLabel)
+
+    var registerEmailInput = document.createElement('input')
+    registerEmailInput.type = 'email'
+    registerEmailInput.id = 'email'
+    registerForm.appendChild(registerEmailInput)
+
+    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)
+
+    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)
+
+    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)
+
+    var registerSubmitButton = document.createElement('button')
+    registerSubmitButton.type = 'submit'
+    registerSubmitButton.innerText = 'Register'
+    registerForm.appendChild(registerSubmitButton)
+
+    registerForm.addEventListener('submit', 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 {
+            registerUser(name, email, username, password, passwordRepeat)
+
+            registerForm.reset()
+
+            registerSection.remove()
+
+            body.appendChild(loginSection)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var registerLoginLink = document.createElement('a')
+    registerLoginLink.href = ''
+    registerLoginLink.innerText = 'Login'
+    registerSection.appendChild(registerLoginLink)
+
+    registerLoginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        registerSection.remove()
+        body.appendChild(loginSection)
+    })
+
+    return registerSection
+}
+
+function buildHomeSection() {
+    var homeSection = document.createElement('section')
+
+    var homeTitle = document.createElement('h2')
+    homeTitle.innerText = 'Home'
+    homeSection.appendChild(homeTitle)
+
+    var homeUserTitle = document.createElement('h3')
+    homeUserTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+    homeSection.appendChild(homeUserTitle)
+
+    var homeLogoutButton = document.createElement('button')
+    homeLogoutButton.innerText = 'Logout'
+    homeSection.appendChild(homeLogoutButton)
+
+    homeLogoutButton.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        loggedInUser = null
+
+        homeSection.remove()
+
+        body.appendChild(loginSection)
+    })
+
+    return homeSection
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.4/data.js b/staff/victoria-kolomytseva/unsocial.4/data.js
new file mode 100644
index 00000000..7478bdcb
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.4/data.js
@@ -0,0 +1,4 @@
+var users = [
+    { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.4/index.html b/staff/victoria-kolomytseva/unsocial.4/index.html
new file mode 100644
index 00000000..898075c7
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.4/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 scr="data.js"></script>
+
+    <script src="logic.js"></script>
+
+    <script src="view.js"></script>
+
+    <script src="main.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.4/logic.js b/staff/victoria-kolomytseva/unsocial.4/logic.js
new file mode 100644
index 00000000..a13ba2ef
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.4/logic.js
@@ -0,0 +1,44 @@
+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)
+}
+
+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 (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined)
+        throw new Error('wrong credentials')
+
+    return user
+}
diff --git a/staff/victoria-kolomytseva/unsocial.4/main.js b/staff/victoria-kolomytseva/unsocial.4/main.js
new file mode 100644
index 00000000..029a3897
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.4/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = document.querySelector('body')
+body.appendChild(loginSection)
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.4/style.css b/staff/victoria-kolomytseva/unsocial.4/style.css
new file mode 100644
index 00000000..0c31a22d
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.4/style.css
@@ -0,0 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');
+
+:root {
+    --color: dodgerblue;
+    --font: 'Sixtyfour';
+    font-family: var(--font);
+
+}
+
+body {
+    background-color: rgb(24, 2, 2);
+    color: var(--color);
+    text-align: center;
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+}
+
+label {
+    margin: 20px;
+}
+
+
+
+
+input {
+    background-color: white;
+    font-family: inherit;
+    margin: 10px;
+}
+
+
+form {
+    display: flex;
+    align-items: center;
+    flex-direction: column
+}
+
+a {
+    padding: 10px;
+    margin-top: 100px;
+
+}
+
+a:visited {
+    color: var(--color);
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.4/view.js b/staff/victoria-kolomytseva/unsocial.4/view.js
new file mode 100644
index 00000000..db33c54d
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.4/view.js
@@ -0,0 +1,182 @@
+function buildFormField(id, text, type) {
+    var label = document.createElement('label')
+    label.htmlFor = id
+    label.innerText = text
+
+    var input = document.createElement('input')
+    input.type = type
+    input.id = id
+
+    return [label, input]
+}
+
+function buildButton(text, type) {
+    var button = document.createElement('button')
+    button.type = type
+    button.innerText = text
+
+    return button
+}
+
+function buildLoginSection() {
+    var section = document.createElement('section')
+
+    var title = document.createElement('h2')
+    title.innerText = 'Login'
+    section.appendChild(title)
+
+    var form = document.createElement('form')
+    section.appendChild(form)
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.appendChild(usernameField[0])
+    form.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.appendChild(passwordField[0])
+    form.appendChild(passwordField[1])
+
+    var submitButton = buildButton('Login', 'submit')
+    form.appendChild(submitButton)
+
+    form.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+
+        try {
+            loggedInUser = authenticateUser(username, password)
+
+            form.reset()
+
+            section.remove()
+
+            var homeSection = buildHomeSection()
+
+            body.appendChild(homeSection)
+        } catch (error) {
+            passwordField[1].value = ''
+
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var registerLink = document.createElement('a')
+    registerLink.href = ''
+    registerLink.innerText = 'Register'
+    section.appendChild(registerLink)
+
+    registerLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+
+        var registerSection = buildRegisterSection()
+
+        body.appendChild(registerSection)
+    })
+
+    return section
+}
+
+function buildRegisterSection() {
+    var section = document.createElement('section')
+
+    var title = document.createElement('h2')
+    title.innerText = 'Register'
+    section.appendChild(title)
+
+    var form = document.createElement('form')
+    section.appendChild(form)
+
+    var nameField = buildFormField('name', 'Name', 'text')
+    form.appendChild(nameField[0])
+    form.appendChild(nameField[1])
+
+    var emailField = buildFormField('email', 'E-mail', 'email')
+    form.appendChild(emailField[0])
+    form.appendChild(emailField[1])
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.appendChild(usernameField[0])
+    form.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.appendChild(passwordField[0])
+    form.appendChild(passwordField[1])
+
+    var passwordRepeatField = buildFormField('password-repeat', 'Repeat Password', 'password')
+    form.appendChild(passwordRepeatField[0])
+    form.appendChild(passwordRepeatField[1])
+
+    var submitButton = buildButton('Register', 'submit')
+    form.appendChild(submitButton)
+
+    form.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var name = nameField[1].value
+        var email = emailField[1].value
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+        var passwordRepeat = passwordRepeatField[1].value
+
+        try {
+            registerUser(name, email, username, password, passwordRepeat)
+
+            form.reset()
+
+            section.remove()
+
+            body.appendChild(loginSection)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var loginLink = document.createElement('a')
+    loginLink.href = ''
+    loginLink.innerText = 'Login'
+    section.appendChild(loginLink)
+
+    loginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+        body.appendChild(loginSection)
+    })
+
+    return section
+}
+
+function buildHomeSection() {
+    var section = document.createElement('section')
+
+    var title = document.createElement('h2')
+    title.innerText = 'Home'
+    section.appendChild(title)
+
+    var userTitle = document.createElement('h3')
+    userTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+    section.appendChild(userTitle)
+
+    var logoutButton = buildButton('Logout', 'button')
+    section.appendChild(logoutButton)
+
+    logoutButton.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        loggedInUser = null
+
+        section.remove()
+
+        body.appendChild(loginSection)
+    })
+
+    return section
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.5/compo.js b/staff/victoria-kolomytseva/unsocial.5/compo.js
new file mode 100644
index 00000000..d88f89bb
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.5/compo.js
@@ -0,0 +1,9 @@
+function Compo(container) {
+    this.children = []
+    this.container = container
+}
+
+Compo.prototype.add = function (child) {
+    this.children.push(child)
+    this.container.appendChild(child.container)
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.5/data.js b/staff/victoria-kolomytseva/unsocial.5/data.js
new file mode 100644
index 00000000..7478bdcb
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.5/data.js
@@ -0,0 +1,4 @@
+var users = [
+    { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.5/index.html b/staff/victoria-kolomytseva/unsocial.5/index.html
new file mode 100644
index 00000000..c38a5f3c
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.5/index.html
@@ -0,0 +1,26 @@
+<!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="compo.js"></script>
+    <script src="view.js"></script>
+    <script src="main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.5/logic.js b/staff/victoria-kolomytseva/unsocial.5/logic.js
new file mode 100644
index 00000000..edb64111
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.5/logic.js
@@ -0,0 +1,44 @@
+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)
+}
+
+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 (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined)
+        throw new Error('wrong credentials')
+
+    return user
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.5/main.js b/staff/victoria-kolomytseva/unsocial.5/main.js
new file mode 100644
index 00000000..70b254fe
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.5/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = new Compo(document.querySelector('body'))
+body.add(loginSection)
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.5/style.css b/staff/victoria-kolomytseva/unsocial.5/style.css
new file mode 100644
index 00000000..0c31a22d
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.5/style.css
@@ -0,0 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');
+
+:root {
+    --color: dodgerblue;
+    --font: 'Sixtyfour';
+    font-family: var(--font);
+
+}
+
+body {
+    background-color: rgb(24, 2, 2);
+    color: var(--color);
+    text-align: center;
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+}
+
+label {
+    margin: 20px;
+}
+
+
+
+
+input {
+    background-color: white;
+    font-family: inherit;
+    margin: 10px;
+}
+
+
+form {
+    display: flex;
+    align-items: center;
+    flex-direction: column
+}
+
+a {
+    padding: 10px;
+    margin-top: 100px;
+
+}
+
+a:visited {
+    color: var(--color);
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.5/view.js b/staff/victoria-kolomytseva/unsocial.5/view.js
new file mode 100644
index 00000000..4b59fa45
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.5/view.js
@@ -0,0 +1,188 @@
+function buildFormField(id, text, type) {
+    var label = document.createElement('label')
+    label.htmlFor = id
+    label.innerText = text
+
+    var input = document.createElement('input')
+    input.type = type
+    input.id = id
+
+    return [label, input]
+}
+
+function buildButton(text, type) {
+    var button = document.createElement('button')
+    button.type = type
+    button.innerText = text
+
+    return button
+}
+
+function buildLoginSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var section = compo.container
+
+    var title = document.createElement('h2')
+    title.innerText = 'Login'
+    section.appendChild(title)
+
+    var form = document.createElement('form')
+    section.appendChild(form)
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.appendChild(usernameField[0])
+    form.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.appendChild(passwordField[0])
+    form.appendChild(passwordField[1])
+
+    var submitButton = buildButton('Login', 'submit')
+    form.appendChild(submitButton)
+
+    form.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+
+        try {
+            loggedInUser = authenticateUser(username, password)
+
+            form.reset()
+
+            section.remove()
+
+            var homeSection = buildHomeSection()
+
+            body.add(homeSection)
+        } catch (error) {
+            passwordField[1].value = ''
+
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var registerLink = document.createElement('a')
+    registerLink.href = ''
+    registerLink.innerText = 'Register'
+    section.appendChild(registerLink)
+
+    registerLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+
+        var registerSection = buildRegisterSection()
+
+        body.add(registerSection)
+    })
+
+    return compo
+}
+
+function buildRegisterSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var section = compo.container
+
+    var title = document.createElement('h2')
+    title.innerText = 'Register'
+    section.appendChild(title)
+
+    var form = document.createElement('form')
+    section.appendChild(form)
+
+    var nameField = buildFormField('name', 'Name', 'text')
+    form.appendChild(nameField[0])
+    form.appendChild(nameField[1])
+
+    var emailField = buildFormField('email', 'E-mail', 'email')
+    form.appendChild(emailField[0])
+    form.appendChild(emailField[1])
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.appendChild(usernameField[0])
+    form.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.appendChild(passwordField[0])
+    form.appendChild(passwordField[1])
+
+    var passwordRepeatField = buildFormField('password-repeat', 'Repeat Password', 'password')
+    form.appendChild(passwordRepeatField[0])
+    form.appendChild(passwordRepeatField[1])
+
+    var submitButton = buildButton('Register', 'submit')
+    form.appendChild(submitButton)
+
+    form.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var name = nameField[1].value
+        var email = emailField[1].value
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+        var passwordRepeat = passwordRepeatField[1].value
+
+        try {
+            registerUser(name, email, username, password, passwordRepeat)
+
+            form.reset()
+
+            section.remove()
+
+            body.add(loginSection)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var loginLink = document.createElement('a')
+    loginLink.href = ''
+    loginLink.innerText = 'Login'
+    section.appendChild(loginLink)
+
+    loginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+        body.add(loginSection)
+    })
+
+    return compo
+}
+
+function buildHomeSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var section = compo.container
+
+    var title = document.createElement('h2')
+    title.innerText = 'Home'
+    section.appendChild(title)
+
+    var userTitle = document.createElement('h3')
+    userTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+    section.appendChild(userTitle)
+
+    var logoutButton = buildButton('Logout', 'button')
+    section.appendChild(logoutButton)
+
+    logoutButton.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        loggedInUser = null
+
+        section.remove()
+
+        body.appendChild(loginSection)
+    })
+
+    return compo
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.6/compo.js b/staff/victoria-kolomytseva/unsocial.6/compo.js
new file mode 100644
index 00000000..d88f89bb
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.6/compo.js
@@ -0,0 +1,9 @@
+function Compo(container) {
+    this.children = []
+    this.container = container
+}
+
+Compo.prototype.add = function (child) {
+    this.children.push(child)
+    this.container.appendChild(child.container)
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.6/data.js b/staff/victoria-kolomytseva/unsocial.6/data.js
new file mode 100644
index 00000000..7478bdcb
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.6/data.js
@@ -0,0 +1,4 @@
+var users = [
+    { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.6/index.html b/staff/victoria-kolomytseva/unsocial.6/index.html
new file mode 100644
index 00000000..c38a5f3c
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.6/index.html
@@ -0,0 +1,26 @@
+<!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="compo.js"></script>
+    <script src="view.js"></script>
+    <script src="main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.6/logic.js b/staff/victoria-kolomytseva/unsocial.6/logic.js
new file mode 100644
index 00000000..edb64111
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.6/logic.js
@@ -0,0 +1,44 @@
+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)
+}
+
+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 (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined)
+        throw new Error('wrong credentials')
+
+    return user
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.6/main.js b/staff/victoria-kolomytseva/unsocial.6/main.js
new file mode 100644
index 00000000..70b254fe
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.6/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = new Compo(document.querySelector('body'))
+body.add(loginSection)
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.6/style.css b/staff/victoria-kolomytseva/unsocial.6/style.css
new file mode 100644
index 00000000..0c31a22d
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.6/style.css
@@ -0,0 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');
+
+:root {
+    --color: dodgerblue;
+    --font: 'Sixtyfour';
+    font-family: var(--font);
+
+}
+
+body {
+    background-color: rgb(24, 2, 2);
+    color: var(--color);
+    text-align: center;
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+}
+
+label {
+    margin: 20px;
+}
+
+
+
+
+input {
+    background-color: white;
+    font-family: inherit;
+    margin: 10px;
+}
+
+
+form {
+    display: flex;
+    align-items: center;
+    flex-direction: column
+}
+
+a {
+    padding: 10px;
+    margin-top: 100px;
+
+}
+
+a:visited {
+    color: var(--color);
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial.6/view.js b/staff/victoria-kolomytseva/unsocial.6/view.js
new file mode 100644
index 00000000..819cd1c3
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial.6/view.js
@@ -0,0 +1,189 @@
+function buildFormField(id, text, type) {
+    var label = document.createElement('label')
+    label.htmlFor = id
+    label.innerText = text
+
+    var input = document.createElement('input')
+    input.type = type
+    input.id = id
+
+    return [label, input]
+}
+
+function buildForm() {
+    var compo = new Compo(document.createElement('form'))
+
+    return compo
+}
+
+function buildButton(text, type) {
+    var compo = new Compo(document.createElement('button'))
+
+    compo.container.type = type
+    compo.container.innerText = text
+
+    return compo
+}
+
+function buildLoginSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var title = document.createElement('h2')
+    title.innerText = 'Login'
+    compo.container.appendChild(title)
+
+    var form = buildForm()
+    compo.add(form)
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.container.appendChild(usernameField[0])
+    form.container.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.container.appendChild(passwordField[0])
+    form.container.appendChild(passwordField[1])
+
+    var submitButton = buildButton('Login', 'submit')
+    form.add(submitButton)
+
+    form.container.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+
+        try {
+            loggedInUser = authenticateUser(username, password)
+
+            form.container.reset()
+
+            compo.container.remove()
+
+            var homeSection = buildHomeSection()
+
+            body.add(homeSection)
+        } catch (error) {
+            passwordField[1].value = ''
+
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var registerLink = document.createElement('a')
+    registerLink.href = ''
+    registerLink.innerText = 'Register'
+    compo.container.appendChild(registerLink)
+
+    registerLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        compo.container.remove()
+
+        var registerSection = buildRegisterSection()
+
+        body.add(registerSection)
+    })
+
+    return compo
+}
+
+function buildRegisterSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var title = document.createElement('h2')
+    title.innerText = 'Register'
+    compo.container.appendChild(title)
+
+    var form = buildForm()
+    compo.add(form)
+
+    var nameField = buildFormField('name', 'Name', 'text')
+    form.container.appendChild(nameField[0])
+    form.container.appendChild(nameField[1])
+
+    var emailField = buildFormField('email', 'E-mail', 'email')
+    form.container.appendChild(emailField[0])
+    form.container.appendChild(emailField[1])
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.container.appendChild(usernameField[0])
+    form.container.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.container.appendChild(passwordField[0])
+    form.container.appendChild(passwordField[1])
+
+    var passwordRepeatField = buildFormField('password-repeat', 'Repeat Password', 'password')
+    form.container.appendChild(passwordRepeatField[0])
+    form.container.appendChild(passwordRepeatField[1])
+
+    var submitButton = buildButton('Register', 'submit')
+    form.container.appendChild(submitButton.container)
+
+    form.container.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var name = nameField[1].value
+        var email = emailField[1].value
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+        var passwordRepeat = passwordRepeatField[1].value
+
+        try {
+            registerUser(name, email, username, password, passwordRepeat)
+
+            form.container.reset()
+
+            compo.container.remove()
+
+            body.add(loginSection)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var loginLink = document.createElement('a')
+    loginLink.href = ''
+    loginLink.innerText = 'Login'
+    compo.container.appendChild(loginLink)
+
+    loginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        compo.container.remove()
+        body.add(loginSection)
+    })
+
+    return compo
+}
+
+function buildHomeSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var title = document.createElement('h2')
+    title.innerText = 'Home'
+    compo.container.appendChild(title)
+
+    var userTitle = document.createElement('h3')
+    userTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+    compo.container.appendChild(userTitle)
+
+    var logoutButton = buildButton('Logout', 'button')
+    compo.add(logoutButton)
+
+    logoutButton.container.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        loggedInUser = null
+
+        compo.container.remove()
+
+        body.add(loginSection)
+    })
+
+    return compo
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial/compo.js b/staff/victoria-kolomytseva/unsocial/compo.js
index d88f89bb..8a6258d9 100644
--- a/staff/victoria-kolomytseva/unsocial/compo.js
+++ b/staff/victoria-kolomytseva/unsocial/compo.js
@@ -1,9 +1,235 @@
+/**
+ * Constructs Compo instances
+ * 
+ * @param {HTMLElement} container The DOM container of the Compo instance
+ */
 function Compo(container) {
     this.children = []
     this.container = container
+    this.parent = null
 }
 
 Compo.prototype.add = function (child) {
     this.children.push(child)
+    child.parent = this
+
     this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+    var index = this.parent.children.findIndex(function (child) {
+        return child === this
+    }.bind(this))
+
+    if (index > -1)
+        this.parent.children.splice(index, 1)
+
+    this.container.remove()
+}
+
+Compo.prototype.addBehavior = function (type, callback) {
+    this.container.addEventListener(type, callback)
+}
+
+/**
+ * Constructs Form instances
+ */
+function Form() {
+    Compo.call(this, document.createElement('form'))
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+    this.container.reset()
+}
+
+/**
+ * Constructs Button instances
+ * 
+ * @param {string} text The text of the button
+ * @param {string} type The button type
+ */
+function Button(type, text) {
+    Compo.call(this, document.createElement('button'))
+    this.container.innerText = text
+    this.container.type = type
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+/**
+ * Constructs Label instances
+ * 
+ * @param {string} text The text of the label
+ * @param {string} id The id of the input to relate with
+ */
+function Label(text, id) {
+    Compo.call(this, document.createElement('label'))
+    this.container.innerText = text
+    this.container.htmlFor = id
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+/**
+ * Constructs Input instances
+ * 
+ * @param {string} type The input type
+ * @param {string} id The input id
+ */
+function Input(id, type) {
+    Compo.call(this, document.createElement('input'))
+    this.container.id = id
+    this.container.type = type
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+    return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+    this.container.value = value
+}
+
+Input.prototype.getType = function () {
+    return this.container.type
+}
+
+Input.prototype.setType = function (type) {
+    this.container.type = type
+}
+
+/**
+ * Constructs Heading instances
+ * 
+ * @param {string} text The text of the heading
+ * @param {number} level The heading level
+ */
+function Heading(text, level) {
+    Compo.call(this, document.createElement('h' + level))
+    this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+
+/**
+ * Constructs Link instances
+ * 
+ * @param {string} text The text of the link
+ */
+function Link(text) {
+    Compo.call(this, document.createElement('a'))
+    this.container.href = ''
+    this.container.innerText = text
+}
+
+Link.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link
+
+/**
+ * Constructs Span instances
+ * 
+ * @param {string} text The text inside span
+ */
+function Span(text) {
+    Compo.call(this, document.createElement('span'))
+
+    this.container.innerText = text
+}
+
+Span.prototype = Object.create(Compo.prototype)
+Span.prototype.constructor = Span
+
+Span.prototype.setText = function (text) {
+    this.container.innerText = text
+}
+
+Span.prototype.getText = function () {
+    return this.container.innerText
+}
+
+Span.prototype = Object.create(Compo.prototype)
+Span.prototype.constructor = Span
+
+/**
+ * 
+ */
+function UnorderedList() {
+    Compo.call(this, document.createElement('ul'))
+}
+
+UnorderedList.prototype = Object.create(Compo.prototype)
+UnorderedList.prototype.constructor = UnorderedList
+
+/**
+ * 
+ */
+function ListItem() {
+    Compo.call(this, document.createElement('li'))
+}
+
+ListItem.prototype = Object.create(Compo.prototype)
+ListItem.prototype.constructor = ListItem
+
+/**
+ * 
+ */
+function Image(address) {
+    Compo.call(this, document.createElement('img'))
+
+    this.container.src = address
+    this.container.style.width = '100%'
+}
+
+Image.prototype = Object.create(Compo.prototype)
+Image.prototype.constructor = Image
+
+/**
+ * 
+ * @param {*} text 
+ */
+function Paragraph(text) {
+    Compo.call(this, document.createElement('p'))
+
+    this.container.innerText = text
+}
+
+Paragraph.prototype = Object.create(Compo.prototype)
+Paragraph.prototype.constructor = Paragraph
+
+Paragraph.prototype.setText = function (text) {
+    this.container.innerText = text
+}
+
+Paragraph.prototype.getText = function () {
+    return this.container.innerText
+}
+
+/**
+ * 
+ * @param {*} text 
+ */
+function Time(text) {
+    Compo.call(this, document.createElement('time'))
+
+    this.container.innerText = text
+}
+
+Time.prototype = Object.create(Compo.prototype)
+Time.prototype.constructor = Time
+
+Time.prototype.setText = function (text) {
+    this.container.innerText = text
+}
+
+Time.prototype.getText = function () {
+    return this.container.innerText
 }
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial/data.js b/staff/victoria-kolomytseva/unsocial/data.js
index 7478bdcb..3babc04e 100644
--- a/staff/victoria-kolomytseva/unsocial/data.js
+++ b/staff/victoria-kolomytseva/unsocial/data.js
@@ -1,4 +1,21 @@
-var users = [
+
+var users = [ // La "base de datos" con los usuarios
     { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
-    { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+    { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' },
+    { name: 'Javier', email: 'javi@gmail.com', username: 'javi', password: '123123123' }
+]
+
+var posts = [
+    {
+        image: 'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',
+        text: 'here we are',
+        username: 'peterpan',
+        date: new Date
+    },
+    {
+        image: 'https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg',
+        text: 'here i am',
+        username: 'wendydarling',
+        date: new Date
+    }
 ]
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial/index.html b/staff/victoria-kolomytseva/unsocial/index.html
index e0274f77..f711e8cf 100644
--- a/staff/victoria-kolomytseva/unsocial/index.html
+++ b/staff/victoria-kolomytseva/unsocial/index.html
@@ -2,20 +2,17 @@
 <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">
+    <link rel="stylesheet" href="styles.css">
 
 </head>
 
 <body>
 
-    <h1>Unsocial</h1>
-
     <script src="data.js"></script>
 
     <script src="logic.js"></script>
diff --git a/staff/victoria-kolomytseva/unsocial/logic.js b/staff/victoria-kolomytseva/unsocial/logic.js
index 1463d7c9..a4abd924 100644
--- a/staff/victoria-kolomytseva/unsocial/logic.js
+++ b/staff/victoria-kolomytseva/unsocial/logic.js
@@ -1,46 +1,67 @@
-// business
+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 (user) { // Miramos si el usuario es válido
+        return user.username === username && user.password === password
+    })
 
-function registerUser(name, email, username, password, passwordRepeat) {
-    if (name.length < 2)
-        throw new Error('invalid name')
+    if (user === undefined) {
+        throw new Error('wrong credentials')
+    }
 
-    if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
-        throw new Error('invalid e-mail')
+    return user
+}
 
-    if (username.length < 4 || username.length > 12)
+function registerUser(name, email, username, password, confirmpassword) {
+    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)
+    }
+    if (password.length < 8) {
         throw new Error('invalid password')
-
-    if (password !== passwordRepeat)
-        throw new Error('passswords do not match')
+    }
+    if (password !== confirmpassword) { // Comprobar que confirm password tiene el mismo valor que password
+        throw new Error('Incorrect password')
+    }
 
     var user = users.find(function (user) {
         return user.username === username || user.email === email
     })
 
-    if (user !== underfined)
+    if (user !== undefined) {
         throw new Error('user already exists')
+    }
 
-    user = { name: name, email: email, username: username, password: password }
+    user = { 'name': name, 'email': email, 'username': username, 'password': password } // Insertamos el usuario entero
 
     users.push(user)
 }
 
-function authenticateUser(username, password) {
+function createPost(username, image, text) {
     if (username.length < 4 || username.length > 12)
         throw new Error('invalid username')
 
-    if (password.length < 8)
-        throw new Error('invalid password')
+    // TODO input validation (and throw error)
 
-    var user = users.find(function (user) {
-        return user.username === username && user.password === password
-    })
+    var post = {
+        image: image,
+        text: text,
+        username: username,
+        date: new Date
+    }
 
-    if (user === undefined)
-        throw new Error('wrong credentials')
+    posts.push(post)
+}
 
-    return user
+function getPosts() {
+    return posts
 }
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial/main.js b/staff/victoria-kolomytseva/unsocial/main.js
index 2b30a64f..4cad457e 100644
--- a/staff/victoria-kolomytseva/unsocial/main.js
+++ b/staff/victoria-kolomytseva/unsocial/main.js
@@ -1,8 +1,12 @@
-var loggedInUser = null
 
-var loginSection = buildLoginSection()
+var loggedInUser = null // Variable para reconocer al usuario conectado
 
-var body = new Compo(document.querySelector('body'))
-body.add(loginSection)
+var page = new Compo(document.querySelector('body')) // Creamos un componente que contenga a body como container
 
+var title = new Heading('Unsocial', 1) // Título de la página
+page.add(title) // Añadimos el título a la página
 
+var login = new Login() // Montamos el login
+page.add(login) // Añadimos el login a la page, es decir a la "view" (será lo que veamos al entrar)
+
+var home
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial/styles.css b/staff/victoria-kolomytseva/unsocial/styles.css
new file mode 100644
index 00000000..f157df54
--- /dev/null
+++ b/staff/victoria-kolomytseva/unsocial/styles.css
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');
+
+:root {
+    --color: dodgerblue;
+    --font: 'Sixtyfour';
+    font-family: var(--font);
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    justify-content: center;
+    background-color: black;
+    color: var(--color);
+}
+
+section,
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+input {
+    color: var(--color);
+    background-color: inherit;
+    font-family: inherit;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+a:visited {
+    color: var(--color);
+}
+
+h1 {
+    margin-bottom: 10px;
+}
+
+h2 {
+    margin-bottom: 30px;
+}
+
+a {
+    margin-top: 20px;
+}
+
+label,
+input,
+button {
+    display: block;
+}
+
+button {
+    background-color: black;
+    color: var(--color);
+    font-family: var(--font);
+    padding: 5px;
+    border-bottom: 1px solid #545454;
+    border-right: 1px solid #545454
+}
+
+#up {
+    margin-top: 50px;
+    margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/staff/victoria-kolomytseva/unsocial/view.js b/staff/victoria-kolomytseva/unsocial/view.js
index 53196a41..68379db3 100644
--- a/staff/victoria-kolomytseva/unsocial/view.js
+++ b/staff/victoria-kolomytseva/unsocial/view.js
@@ -1,263 +1,272 @@
-//creamos una function que permita crear todos los label e input de los forms de la app
-function buildFormField(id, text, type) {
-    var label = document.createElement('label')
-    label.htmlFor = id
-    label.innerText = text
+/**
+ * Constructs Login instances
+ */
+function Login() {
+    Compo.call(this, document.createElement('section'))
 
-    var input = document.createElement('input')
-    input.type = type
-    input.id = id
+    var title = new Heading('Login', 2)
+    this.add(title)
 
-    return [label, input]
-}
-
-//creamos una function que permita crear los botones de la app
-function buildButton(text, type) {
-    var button = document.createElement('button')
-    button.type = type
-    button.innerText = text
-
-    return button
-}
-
-//creamos una function para generar la seccion de login
-
-function buildLoginSection() {
-    var compo = new Compo(document.createElement('section'))
-
-    var section = compo.container
-
-    var title = document.createElement('h2')
-    title.innerText = 'Login'
-    section.appendChild(title)
+    var form = new Form()
+    this.add(form)
 
-    var form = document.createElement('form')
-    section.appendChild(form)
+    form.add(new Label('Username', 'username'))
+    var usernameInput = new Input('text', 'username')
+    form.add(usernameInput)
 
-    var usernameField = buildFormField('username', 'Username', 'text')
-    form.appendChild(usernameField[0])
-    form.appendChild(usernameField[1])
+    form.add(new Label('Password', 'password'))
+    var passwordInput = new Input('password', 'password')
+    form.add(passwordInput)
 
-    var passwordField = buildFormField('password', 'Password', 'password')
-    form.appendChild(passwordField[0])
-    form.appendChild(passwordField[1])
+    var submitButton = new Button('submit', 'Login')
+    form.add(submitButton)
 
-    var submitButton = buildButton('Login', 'submit')
-    form.appendChild(submitButton)
-
-    form.addEventListener('submit', function (event) {
+    form.addBehavior('submit', function (event) {
         event.preventDefault()
 
-        var username = usernameField[1].value
-        var password = passwordField[1].value
+        var username = usernameInput.getValue()
+        var password = passwordInput.getValue()
 
         try {
             loggedInUser = authenticateUser(username, password)
 
             form.reset()
 
-            section.remove()
-
-            var homeSection = buildHomeSection()
+            this.remove()
 
-            body.add(homeSection)
+            home = new Home()
 
+            page.add(home)
         } catch (error) {
-
-            passwordField[1].value = ''
+            passwordInput.setValue('')
 
             alert(error.message)
 
             console.error(error)
         }
+    }.bind(this))
 
-    })
-
-    var registerLink = document.createElement('a')
-    registerLink.href = ''
-    registerLink.innerText = 'Register'
-    section.appendChild(registerLink)
+    var registerLink = new Link('Register')
+    this.add(registerLink)
 
-    registerLink.addEventListener('click', function (event) {
+    registerLink.addBehavior('click', function (event) {
         event.preventDefault()
 
-        section.remove()
+        form.reset()
 
-        var registerSection = buildRegisterSection()
+        this.remove()
 
-        body.add(registerSection)
-    })
+        var register = new Register()
 
-    return compo
+        page.add(register)
+    }.bind(this))
 }
 
-//function para crear una section del registro
+Login.prototype = Object.create(Compo.prototype)
+Login.prototype.constructor = Login
 
-function buildRegisterSection() {
-    var compo = new Compo(document.createElement('section'))
+/**
+ * Constructs Register instances
+ */
+function Register() {
+    Compo.call(this, document.createElement('section'))
 
-    var section = compo.container
+    var title = new Heading('Register', 2)
+    this.add(title)
 
-    var title = document.createElement('h2')
-    title.innerText = 'Register'
-    section.appendChild(title)
+    var form = new Form
+    this.add(form)
 
-    var form = document.createElement('form')
-    section.appendChild(form)
+    form.add(new Label('Name', 'name'))
+    var nameInput = new Input('text', 'name')
+    form.add(nameInput)
 
-    var nameField = buildFormField('name', 'Name', 'text')
-    form.appendChild(nameField[0])
-    form.appendChild(nameField[1])
+    form.add(new Label('E-mail', 'email'))
+    var emailInput = new Input('email', 'email')
+    form.add(emailInput)
 
-    var emailField = buildFormField('email', 'E-mail', 'email')
-    form.appendChild(emailField[0])
-    form.appendChild(emailField[1])
+    form.add(new Label('Username', 'username'))
+    var usernameInput = new Input('username', 'text')
+    form.add(usernameInput)
 
-    var usernameField = buildFormField('username', 'Username', 'text')
-    form.appendChild(usernameField[0])
-    form.appendChild(usernameField[1])
+    form.add(new Label('Password', 'password'))
+    var passwordInput = new Input('password', 'password')
+    form.add(passwordInput)
 
-    var passwordField = buildFormField('password', 'Password', 'password')
-    form.appendChild(passwordField[0])
-    form.appendChild(passwordField[1])
+    form.add(new Label('Confirm Password', 'repeatPassword'))
+    var passwordRepeatInput = new Input('repeatPassword', 'password')
+    form.add(passwordRepeatInput)
 
-    var submitButton = buildButton('Register', 'submit')
-    form.appendChild(submitButton)
+    var submitButton = new Button('submit', 'Register')
+    form.add(submitButton)
 
-    form.addEventListener('submit', function (event) {
+    form.addBehavior('submit', function (event) {
         event.preventDefault()
 
-        var name = nameField[1].value
-        var email = emailField[1].value
-        var username = usernameField[1].value
-        var password = passwordField[1].value
-        var passwordRepeat = passwordRepeatField[1].value
+        var name = nameInput.getValue()
+        var email = emailInput.getValue()
+        var username = usernameInput.getValue()
+        var password = passwordInput.getValue()
+        var confirmpassword = passwordRepeatInput.getValue()
 
         try {
-            registerUser(name, email, username, password, passwordRepeat)
+            registerUser(name, email, username, password, confirmpassword) // Registramos al usuario (logic.js)
 
             form.reset()
 
-            section.remove()
+            this.remove()
 
-            body.add(loginSection)
+            page.add(login)
         } catch (error) {
             alert(error.message)
+
             console.error(error)
         }
+    }.bind(this))
 
-    })
-
-    var loginLink = document.createElement('a')
-    loginLink.href = ''
-    loginLink.innerText = 'Login'
-    section.appendChild(loginLink)
+    var loginLink = new Link('Login')
+    this.add(loginLink)
 
-    loginLink.addEventListener('click', function (event) {
+    loginLink.addBehavior('click', function (event) {
         event.preventDefault()
 
-        section.remove()
-        body.add(loginSection)
-    })
+        this.remove()
 
-    return compo
+        page.add(login)
+    }.bind(this))
 }
 
-function buildHomeSection() {
-    var compo = new Compo(document.createElement('section'))
+/**
+ * Constructs Home instances
+ */
+Register.prototype = Object.create(Compo.prototype)
+Register.prototype.constructor = Register
 
-    var section = compo.container
+function Home() {
+    Compo.call(this, document.createElement('section'))
 
-    var title = document.createElement('h2')
-    title.innerText = 'Home'
-    section.appendChild(title)
+    var title = new Heading('Home', 2)
+    this.add(title)
 
-    var userTitle = document.createElement('h3')
-    userTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
-    section.appendChild(userTitle)
+    var welcome = new Heading('Welcome, ' + loggedInUser.name + '!', 3)
+    this.add(welcome)
 
-    var logoutButton = buildButton('Logout', 'button')
-    section.appendChild(logoutButton)
+    var logoutButton = new Button('button', 'Logout')
+    this.add(logoutButton)
 
-    logoutButton.addEventListener('click', function (event) {
+    logoutButton.addBehavior("click", function (event) {
         event.preventDefault()
 
         loggedInUser = null
 
-        section.remove()
-
-        body.add(loginSection)
-    })
-
-    return compo
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+        this.remove()
 
+        page.add(login)
+    }.bind(this))
 
+    var createPostButton = new Button('button', '+')
+    this.add(createPostButton)
 
+    createPostButton.addBehavior('click', function (event) {
+        var createPost = new CreatePost()
 
+        this.children[this.children.length - 1].remove()
 
+        this.add(createPost)
+    }.bind(this))
 
+    var postList = new PostList()
+    this.add(postList)
+}
 
+Home.prototype = Object.create(Compo.prototype)
+Home.prototype.constructor = Home
 
+function CreatePost() {
+    Compo.call(this, document.createElement('div'))
 
+    var createPostTitle = new Heading('Create post', 3)
+    this.add(createPostTitle)
 
+    var form = new Form()
 
+    form.add(new Label('Imagen', 'img'))
+    var imageInput = new Input('img', 'text')
+    form.add(imageInput)
 
+    form.add(new Label('Texto', 'txt'))
+    var textInput = new Input('txt', 'text')
+    form.add(textInput)
 
+    var publishPostButton = new Button('submit', 'Publish')
+    form.add(publishPostButton)
 
+    this.add(form)
 
+    form.addBehavior('submit', function (event) {
+        event.preventDefault()
 
+        var image = imageInput.getValue()
+        var text = textInput.getValue()
 
+        try {
+            createPost(loggedInUser.username, image, text)
 
+            this.remove()
 
+            var postList = new PostList()
+            home.add(postList)
+        } catch (error) {
+            alert(error.message)
 
+            console.error(error)
+        }
 
+    }.bind(this))
+}
 
+CreatePost.prototype = Object.create(Compo.prototype)
+CreatePost.prototype.constructor = CreatePost
 
+function Post(username, image, text, date) {
+    Compo.call(this, document.createElement('div'))
 
+    var userTitle = new Heading(username, 4)
+    this.add(userTitle)
 
+    var picture = new Image(image)
+    this.add(picture)
 
+    var comment = new Paragraph(text)
+    this.add(comment)
 
+    var time = new Time(date)
+    this.add(time)
+}
 
+Post.prototype = Object.create(Compo.prototype)
+Post.prototype.constructor = Post
 
+function PostList() {
+    Compo.call(this, document.createElement('div'))
 
+    var title = new Heading('Posts', 3)
+    this.add(title)
 
+    try {
+        var posts = getPosts().toReversed()
 
+        posts.forEach(function (post) {
+            var _post = new Post(post.username, post.image, post.text, post.date)
 
+            this.add(_post)
+        }.bind(this))
+    } catch (error) {
+        alert(error.message)
 
+        console.error(error)
+    }
+}
 
+PostList.prototype = Object.create(Compo.prototype)
+PostList.prototype.constructor = PostList
\ No newline at end of file