Загрузить файлы 'JS 5 Online Homework/Homework #14: FOOP'

JS 5 Online Homework/Homework #14: FOOP/hw14.js

@@ -0,0 +1,321 @@
+// Person Constructor ================================================================================================
+
+
+function Person(name,surname){
+    
+    this.name = name
+    this.surname = surname
+    this.getFullName = () => { return `${this.surname} ${this.name} ${this.fatherName ? this.fatherName : ''}` }
+
+}
+
+const a = new Person("Вася", "Пупкин")
+const b = new Person("Анна", "Иванова")
+const c = new Person("Елизавета", "Петрова")
+
+console.log(a.getFullName())
+a.fatherName = 'Иванович'
+
+console.log(b.getFullName())
+
+
+// Person Prototype ================================================================================================
+
+
+function createPerson (name,surname) {
+    return createPerson.prototype = {
+        name: name,
+        surname: surname,
+        getFullName: () => { return `${surname} ${name} ${this.fatherName ? this.fatherName : ''}` }
+    }
+}
+
+const a = createPerson("Вася", "Пупкин")
+const b = createPerson("Анна", "Иванова")
+const c = createPerson("Елизавета", "Петрова")
+
+console.log(a.getFullName())
+a.fatherName = 'Иванович'
+
+console.log(b.getFullName())
+
+
+// Store ================================================================================================
+
+// Задание находится в домашней работе по Redux
+
+
+// Password ================================================================================================
+
+
+function Password (parent,open) {
+
+    this.passwordInput = document.createElement('input')
+    parent.appendChild(this.passwordInput)
+    this.passwordInput.type = open ? 'text' : 'password'
+
+    this.openInput = document.createElement('input')
+    parent.appendChild(this.openInput)
+    this.openInput.type = 'checkBox'
+
+    this.setValue = newValue => this.passwordInput.value = newValue
+    this.getValue = () => {
+        return this.passwordInput.value
+    }
+
+    this.setOpen = newOpen => {
+        newOpen = this.openInput.checked
+        this.passwordInput.type = newOpen ? 'text' : 'password'
+    }
+    this.getOpen = () => {
+        return this.openInput.checked
+    }
+
+    this.passwordInput.oninput = () => {
+        if (typeof this.onChange === 'function') {
+            this.onChange(this.getValue())
+        }
+    }
+
+    this.openInput.onchange = () => {
+        if (typeof this.onOpenChange === 'function') {
+            this.onOpenChange(this.getOpen())
+        }
+            this.getOpen(this.setOpen())
+    }
+    console.log(this)
+}
+
+const p = new Password (document.body, false)
+p.onChange = data => console.log(data)
+p.onOpenChange = open => console.log(open)
+
+p.setValue('qwerty')
+console.log(p.getValue())
+
+p.setOpen(false)
+console.log(p.getOpen())
+
+
+// LoginForm ================================================================================================
+
+
+function Password (parent,open) {
+
+    this.passwordInput = document.createElement('input')
+    parent.appendChild(this.passwordInput)
+    this.passwordInput.type = open ? 'text' : 'password'
+
+    this.openInput = document.createElement('input')
+    parent.appendChild(this.openInput)
+    this.openInput.type = 'checkBox'
+
+    this.setValue = newValue => this.passwordInput.value = newValue
+    this.getValue = () => {
+        return this.passwordInput.value
+    }
+
+    this.setOpen = newOpen => {
+        newOpen = this.openInput.checked
+        this.passwordInput.type = newOpen ? 'text' : 'password'
+    }
+    this.getOpen = () => {
+        return this.openInput.checked
+    }
+
+    this.passwordInput.oninput = () => {
+        if (typeof this.onChange === 'function') {
+            this.onChange(this.getValue())
+        }
+    }
+
+    this.openInput.onchange = () => {
+        if (typeof this.onOpenChange === 'function') {
+            this.onOpenChange(this.getOpen())
+        }
+            this.getOpen(this.setOpen())
+    }
+    console.log(this)
+}
+
+function makeLogin (parent) {
+
+    const p = new Password (document.body, false)
+
+    Object.assign(parent.style, {display: 'grid', justifyItems: 'center'})
+
+    const loginInput = document.createElement('input')
+    parent.prepend(loginInput)
+    loginInput.placeholder = 'Login'
+
+    const logInButton = document.createElement('button')
+    parent.appendChild(logInButton)
+    Object.assign(logInButton.style, {width: '50px', height: '25px', marginTop: '5px'})
+    logInButton.innerText = 'Login'
+
+    logInButton.disabled = loginInput.value === '' && p.passwordInput.value === '' ? true : false
+
+    p.onChange = data => {
+        logInButton.disabled = data === '' ? true : false
+    }
+    loginInput.oninput = data => {
+        data = loginInput.value
+        logInButton.disabled = data === '' ? true : false
+    }
+}
+const l = makeLogin(document.body)
+
+
+// LoginForm Constructor ================================================================================================
+
+
+function Form (parent) {
+
+    this.mainForm = document.createElement('form')
+    parent.append(this.mainForm)
+    Object.assign(this.mainForm.style, {display: 'flex', flexDirection: 'column', alignItems: 'center', width: '150px'})
+
+    this.formElementsPlace = document.createElement('div')
+    this.mainForm.append(this.formElementsPlace)
+    Object.assign(this.formElementsPlace.style, {display: 'flex', flexDirection: 'column', width: '100%'})
+
+    const p = new Password (this.formElementsPlace, false)
+    const l = new Login (this.formElementsPlace)
+
+    this.formButton = document.createElement('button')
+    this.mainForm.append(this.formButton)
+    this.formButton.innerText = 'Login'
+    Object.assign(this.formButton.style, {width: '50px', marginBottom: '5px'})
+
+    this.formButton.disabled = p.passwordInput.value === '' && l.loginInput.value === '' ? true : false
+    p.onChange = data => this.formButton.disabled = data === ''? true : false
+    l.onChange = data => this.formButton.disabled = data === ''? true : false
+}
+
+function Password (parent,open) {
+
+    this.passwordInput = document.createElement('input')
+    parent.appendChild(this.passwordInput)
+    this.passwordInput.placeholder = 'Password'
+    this.passwordInput.type = open ? 'text' : 'password'
+
+    this.openInput = document.createElement('input')
+    parent.appendChild(this.openInput)
+    this.openInput.type = 'checkBox'
+
+    this.setValue = newValue => this.passwordInput.value = newValue
+    this.getValue = () => {
+        return this.passwordInput.value
+    }
+
+    this.setOpen = newOpen => {
+        newOpen = this.openInput.checked
+        this.passwordInput.type = newOpen ? 'text' : 'password'
+    }
+    this.getOpen = () => {
+        return this.openInput.checked
+    }
+
+    this.passwordInput.oninput = () => {
+        if (typeof this.onChange === 'function') {
+            this.onChange(this.getValue())
+        }
+    }
+
+    this.openInput.onchange = () => {
+        if (typeof this.onOpenChange === 'function') {
+            this.onOpenChange(this.getOpen())
+        }
+            this.getOpen(this.setOpen())
+    }
+    console.log(this)
+}
+
+function Login (parent) {
+
+    this.loginInput = document.createElement('input')
+    parent.prepend(this.loginInput)
+    this.loginInput.placeholder = 'Login'
+    Object.assign(this.loginInput.style, {marginBottom: '5px'})
+
+    this.setValue = newValue => this.loginInput.value = newValue
+    this.getValue = () => {
+        return this.loginInput.value
+    }
+    this.loginInput.oninput = () => {
+        if (typeof this.onChange === 'function') {
+            this.onChange(this.getValue())
+        }
+    }
+    console.log(this)
+}
+const f = new Form (document.body)
+
+
+// Password Verify ================================================================================================
+
+
+function Password (parent,open) {
+
+    this.passwordInput = document.createElement('input')
+    parent.appendChild(this.passwordInput)
+    this.passwordInput.type = open ? 'text' : 'password'
+
+    this.openInput = document.createElement('input')
+    parent.appendChild(this.openInput)
+    this.openInput.type = 'checkBox'
+
+    this.setValue = newValue => this.passwordInput.value = newValue
+    this.getValue = () => {
+        return this.passwordInput.value
+    }
+
+    this.setOpen = newOpen => {
+        newOpen = this.openInput.checked
+        this.passwordInput.type = newOpen ? 'text' : 'password'
+    }
+    this.getOpen = () => {
+        return this.openInput.checked
+    }
+
+    this.passwordInput.oninput = () => {
+        if (typeof this.onChange === 'function') {
+            this.onChange(this.getValue())
+        }
+    }
+
+    this.openInput.onchange = () => {
+        if (typeof this.onOpenChange === 'function') {
+            this.onOpenChange(this.getOpen())
+        }
+            this.getOpen(this.setOpen())
+    }
+    console.log(this)
+}
+
+function verifyPassword (parent, open) {
+    const p = new Password(parent, open)
+    const v = new Password(parent)
+
+    v.passwordInput.type = 'password'
+    p.passwordInput.style.marginBottom = '5px'
+    parent.removeChild(v.openInput)
+
+    open ? v.passwordInput.style.display = 'none' : v.passwordInput.style.display = 'block'
+
+    p.onOpenChange = open => {
+        open ? v.passwordInput.style.display = 'none' : v.passwordInput.style.display = 'block'
+    }
+
+    p.onChange = mainData => {
+        if (mainData == '') p.passwordInput.style.background = 'white' && v.setValue('')
+        v.onChange = checkData => {
+            checkData === mainData ? p.passwordInput.style.background = '#98FB98' : p.passwordInput.style.background = '#E9967A'
+        }
+    }
+}
+const verify = verifyPassword(document.body, false)
+
+
+
+

JS 5 Online Homework/Homework #14: FOOP/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script src="hw14.js"></script>
+</body>
+</html>