HW_14 (foop) done

js/js_14_foop/index.js

@@ -407,3 +407,67 @@ onOpenChange - запускается по изменению состояния
 Когда Password в скрытом режиме - появляется второй инпут (<input type='password'>) с паролем в скрытом режиме
 Когда Password в открытом режиме - второй инпут пропадает*/
 
+
+{
+    function Password(parent, open) {
+
+        const inputPass = document.createElement('input')
+        parent.append(inputPass)
+        const checkboxPass = document.createElement('input')
+        checkboxPass.type = 'checkbox'
+        parent.append(checkboxPass)
+        
+        this.setValue = (value) => {
+            inputPass.value = value
+            if (typeof this.onChange === 'function') this.onChange(this.getValue()) // запускается по событию oninput в поле ввода, передает текст в колбэк
+        }      //задает значение
+        this.getValue = () => inputPass.value                   //читает значение
+        this.setOpen = (open) => {
+            if (open) {
+                checkboxPass.checked = true
+                inputPass.type = "text"
+            }
+            if (!open) {
+                checkboxPass.checked = false
+                inputPass.type = "password"
+            }
+            if (typeof this.onOpenChange === 'function') this.onOpenChange(this.getOpen()) // запускается по изменению состояния открытости пароля
+        } //задает открытость текста в поле ввода
+        this.getOpen = () => checkboxPass.checked //читает открытость текста в поле ввода
+        this.getinputPass = () => inputPass
+
+        this.setOpen(open)
+        inputPass.oninput = () => this.setValue(this.getValue())
+        checkboxPass.oninput = () => this.setOpen(this.getOpen())
+
+    }
+
+    const pass1 = document.createElement('div')
+    document.body.append(pass1)
+    const pass2 = document.createElement('div')
+    document.body.append(pass2)
+    const p1 = new Password (pass1, false)
+    const p2 = new Password (pass2, false)
+    
+    Password.prototype.onChange = function () { passInputEqalityCheck(p1, p2) }
+    
+    const passInputEqalityCheck = (pass1, pass2) => {
+        if ( pass1.getValue() !== pass2.getValue() ) {
+            pass1.getinputPass().style.borderColor = 'red'
+            pass2.getinputPass().style.borderColor = 'red'
+        } else {
+            pass1.getinputPass().style.borderColor = 'green'
+            pass2.getinputPass().style.borderColor = 'green'
+        }
+    }
+    
+    const pass2Open = (pass1GetOpen) => {
+        if (pass1GetOpen === true) pass2.style.display = 'none'
+        else pass2.style.display = 'block'
+    }
+
+    p1.onOpenChange = function () {
+        pass2Open (this.getOpen() )
+    }
+
+}