js4online_homework/10/main.js

// ДЗ: Functional OOP
// Password
function Password(parent, open) {
   let pass = document.createElement('input')
   pass.placeholder = 'enter password'
   let check = document.createElement('input')
   check.type = 'checkbox'
   parent.append(pass, check)
   check.onchange = () => {
      this.setOpen(check.checked)
   }
   pass.oninput = () => {
      if (typeof this.onChange === "function") {
         this.onChange(pass.value);
      }
   };
   this.setValue = (value) => (pass.value = value);
   this.getValue = () => pass.value;
   this.setOpen = function (open1) {
      open = open1
      check.checked = open
      pass.type = open ? 'text' : 'password'
      if (typeof this.onOpenChange === 'function') {
         this.onOpenChange(open)
      }
   }
   this.getOpen = function () {
      return open
   }
}
let 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 LoginForm(parent) {
   let login = document.createElement('input')
   login.placeholder = 'enter login'
   let button = document.createElement('button')
   button.innerText = 'push'
   button.disabled = true
   let pass = document.createElement('input')
   pass.placeholder = 'enter password'
   let check = document.createElement('input')
   check.type = 'checkbox'
   parent.append(login, pass, check, button)

   check.onchange = () => {
      this.setOpen(check.checked)
   }
   pass.oninput = () => {
      if (typeof this.onChange === "function") {
         this.onChange(pass.value);
      }
   }
   this.setValue = (value) => (pass.value = value);
   this.getValue = () => pass.value;
   this.setOpen = function (newOpen) {
      open = newOpen
      check.checked = open
      pass.type = open ? 'text' : 'password'
      if (typeof this.onOpenChange === 'function') {
         this.onOpenChange(open)
      }
   }
   this.getOpen = function () {
      return open
   }
   parent.oninput = function () {
      if ((!login.value || !pass.value)) {
         button.disabled = true
      }
      else {
         button.disabled = false
      }
   }
}
let Form = new LoginForm(login)
Form.onChange = data => console.log(data)
Form.onOpenChange = open => console.log(open)
Form.setValue('qwerty')
console.log(Form.getValue())
Form.setOpen(false)
console.log(Form.getOpen())