HW Functional OOP (before form)

js/10/main.js

@@ -0,0 +1,203 @@
+//passsword
+function Password(parent, open = true) {
+    let inputPass = document.createElement("input")
+    let inputCheck = document.createElement("input")
+    inputCheck.type = "checkbox"
+    inputCheck.checked = open
+
+    this.setValue = (newValue) => inputPass.value = newValue
+    this.getValue = () => inputPass.value
+    this.setOpen = (newOpen) => {
+        inputCheck.checked = newOpen
+        if (inputCheck.checked == false) {
+            inputPass.type = "password"
+            inputCheck.innerText = "false"
+        } else {
+            inputPass.type = "text"
+            inputCheck.innerText = "true"
+        }
+        this.onOpenChange(inputCheck.checked)
+    }
+    this.getOpen = () => inputCheck.checked
+
+    inputPass.oninput = () => this.onChange(inputPass.value)
+
+    inputCheck.onchange = () => {
+        if (inputCheck.checked == false) {
+            inputPass.type = "password"
+            inputCheck.innerText = "false"
+        } else {
+            inputPass.type = "text"
+            inputCheck.innerText = "true"
+        }
+        this.onOpenChange(inputCheck.checked)
+    }
+    parent.append(inputPass)
+    parent.append(inputCheck)
+
+}
+
+/*
+setValue/getValue - задают/читают значения
+setOpen/getOpen - задают/читают открытость текста в поле ввода
+Колбэки (функции обратного вызова, данные изнутри объекта):
+onChange - запускается по событию oninput в поле ввода, передает текст наружу
+onOpenChange - запускается по изменению состояния открытости пароля*/
+//let p = new Password(document.body, true)
+
+// //p.onChange = data => console.log(data)
+// p.onOpenChange = open => console.log(open)
+
+// p.setValue('qwerty')
+// console.log(p.getValue())
+
+// p.setOpen(true)
+// console.log(p.getOpen())
+
+//LoginForm
+
+function LoginForm(parent, open = true) {
+    let inputLogin = document.createElement("input")
+    let button = document.createElement("button")
+    let form = document.createElement("form")
+    inputLogin.type = "text"
+    button.innerText = "log in"
+    button.disabled = open
+        //button.setAttribute("disabled", "")
+
+    this.setValueLog = (newValue) => inputLogin.value = newValue
+
+    this.setButton = (newOpen) => button.disabled = newOpen
+    this.getButton = () => button.disabled
+
+    this.getValueLog = () => inputLogin.value
+
+    inputLogin.oninput = () => this.onChange(inputLogin.value)
+    form.append(inputLogin, button);
+    //parent.append(inputLogin)
+    //parent.append(button)
+    parent.append(form)
+}
+
+// let l = new LoginForm(document.body, true)
+//     //l.setValueLog('qwerty')
+// console.log(l.getValueLog())
+
+// function btnState() {
+//     if (p.getValue() != "" && l.getValueLog() != "") {
+//         l.setButton(false)
+//     } else {
+//         l.setButton(true)
+//     }
+// }
+// l.onChange = btnState
+// p.onChange = btnState
+
+
+function LoginFormConstructor(parent, open = true) {
+
+    let inputLogin = document.createElement("input")
+    inputLogin.type = "text"
+    let inputPass = document.createElement("input")
+    let button = document.createElement("button")
+    button.innerText = "register"
+    button.disabled = open
+    let form = document.createElement("form")
+
+    this.setValueLog = (newValue) => inputLogin.value = newValue
+    this.getValueLog = () => inputLogin.value
+    inputLogin.oninput = () => this.onChange(inputLogin.value)
+
+    this.setButton = (newOpen) => button.disabled = newOpen
+    this.getButton = () => button.disabled
+
+    let inputCheck = document.createElement("input")
+    inputCheck.type = "checkbox"
+    state = (inputCheck.checked) ? (inputPass.type = "text" && inputCheck.checked) : (inputPass.type = "password")
+
+    this.setValue = (newValue) => inputPass.value = newValue
+    this.getValue = () => inputPass.value
+    this.setOpen = (newOpen) => {
+        inputCheck.checked = (newOpen == true) ? (inputPass.type = "text" && inputCheck.checked) : (inputPass.type = "password")
+            // this.onOpenChange(inputCheck.checked)
+    }
+    this.getOpen = () => inputCheck.checked
+
+    inputPass.oninput = () => this.onChange(inputPass.value)
+
+    inputCheck.onchange = () => {
+        (inputCheck.checked == true) ? (inputPass.type = "text" && inputCheck.checked) : (inputPass.type = "password")
+        //this.onOpenChange(inputCheck.checked)
+    }
+
+    let btnState = () => (this.getValue() != "" && this.getValueLog() != "") ?
+        (this.setButton(false)) :
+        this.setButton(true)
+
+    this.onChange = () => btnState()
+    form.append(inputLogin, inputPass, inputCheck, button);
+    parent.append(form)
+}
+//let finishForm = new LoginFormConstructor(document.body, true)
+
+//Password Verify
+function PasswordVerify(parent, open = true) {
+
+
+    let input1 = document.createElement("input")
+    let input2 = document.createElement("input")
+    input2.type = "text"
+
+    let button = document.createElement("button")
+    button.innerText = "register"
+    button.disabled = open
+    let form = document.createElement("form")
+
+    this.setValue2 = (newValue) => input2.value = newValue
+    this.getValue2 = () => input2.value
+    input2.oninput = () => this.onChange(input2.value)
+
+    this.setButton = (newOpen) => button.disabled = newOpen
+    this.getButton = () => button.disabled
+
+    let inputCheck = document.createElement("input")
+    inputCheck.type = "checkbox"
+    state = (inputCheck.checked) ? (input1.type = "text" && inputCheck.checked) : (input1.type = "password")
+
+    this.setValue1 = (newValue) => input1.value = newValue
+    this.getValue1 = () => input1.value
+    this.setOpen = (newOpen) => {
+        inputCheck.checked = (newOpen == true) ? (input1.type = "text" && inputCheck.checked) : (input1.type = "password")
+            // this.onOpenChange(inputCheck.checked)
+    }
+    this.getOpen = () => inputCheck.checked
+
+    input1.oninput = () => this.onChange(input1.value)
+
+    inputCheck.onchange = () => {
+        if (inputCheck.checked == true) {
+            //1 вариант
+            //  parent.removeChild(input2)
+            //2 
+            input2.style.display = "none"
+            input1.type = "text"
+        } else {
+
+            input1.type = "password"
+                //1 вариант
+                // parent.appendChild(input2)
+                //2 вариант
+            input2.style.display = ""
+        }
+    }
+    let btnState = () => (this.getValue1() == this.getValue2()) ?
+        (this.setButton(false)) :
+        this.setButton(true)
+
+    this.onChange = () => btnState()
+    parent.append(input1)
+    parent.append(input2)
+    parent.append(inputCheck)
+    parent.append(button)
+}
+//let pass = new PasswordVerify(document.body, true)