homeworks_Second_modul/homework13js/script.js

function Password(parent, open){
    this.loginBox = document.createElement("input");
    this.loginBox.setAttribute("type", "text");
    parent.appendChild(this.loginBox)
    this.textBox = document.createElement("input");
    this.textBox.setAttribute("type", "password");
    parent.appendChild(this.textBox);
    this.checkBox = document.createElement("input");
    this.checkBox.setAttribute("type", "checkbox");
    parent.appendChild(this.checkBox);
    this.sendBottom = document.createElement("button");
    this.sendBottom.setAttribute("disabled", true);
    this.sendBottom.innerText = "send";
    this.sendOnChange = function() {
        if(this.textBox.value != "" && this.loginBox.value != "") {
            return this.sendBottom.removeAttribute("disabled");
        }  return this.sendBottom.setAttribute("disabled", true);
    }
    
    parent.appendChild(this.sendBottom)

    this.isChecked = function() {
        if(open === false){
            this.textBox.setAttribute("type", "password") 
          open = true;
        } else { 
            this.textBox.setAttribute("type", "text")
            open = false;
        }
    }
    this.getValue = function(arg = this.textBox) {
        return arg.value
    }
    this.setValue = function(inner) {
        this.textBox.value = inner;
    }
    this.getOpen = function() {
        let str;
        open == true ? str = "closed" : str = "opened";
        return str;
    }

    this.onChange = function(arg) {
        let data = this.getValue(arg);
        return data;
        
    }
    this.loginBox.oninput = () => this.sendOnChange()

    this.checkBox.onchange = () =>  {
        this.isChecked(this.checkBox, this.textBox)
        this.onOpenChange(this.getOpen())
    };
    this.textBox.oninput = () => {
        this.onChange(this.getValue(this.textBox));
        this.sendOnChange();
    }
    this.setOpen = function(arg) {
        if(!arg == true){
            this.checkBox.checked = "checked"
        } else {
            this.checkBox.checked = ""
        }
        this.isChecked()
        
    }

}

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(false)
console.log(p.getOpen())
// Напишите функцию конструктор Password, которая будет в родительском 
//элементе создавать поле ввода для пароля и кнопку/иконку/чекбокс, 
//который будет переключать режим просмотра пароля в поле ввода.
// Параметры:
// parent - родительский элемент
// open - стартовое состояние
// Методы:
// setValue/getValue - задают/читают значения
// setOpen/getOpen - задают/читают открытость текста в поле ввода
// Колбэки (функции обратного вызова, данные изнутри объекта):
// onChange - запускается по событию oninput в поле ввода, передает текст наружу
// onOpenChange - запускается по изменению состояния открытости пароля