function runPassword() {

    let button = document.createElement('button');
    button.className = 'button-for-form';
    button.textContent = 'Push';
    button.disabled = true;
    document.body.appendChild(button);

    function Password(parent, open) {
        this.open = open;
        this.password = '';
        this.login = '';

        let inputCheckboxLabel = document.createElement('label');
        inputCheckboxLabel.htmlFor = 'checkbox';
        inputCheckboxLabel.className = 'label';
        let inputCheckbox = document.createElement('input');
        inputCheckbox.type = 'checkbox';
        inputCheckbox.id = 'checkbox';
        inputCheckbox.checked = this.open;

        inputCheckboxLabel.appendChild(inputCheckbox);
        inputCheckboxLabel.appendChild(document.createTextNode('Показать пароль'));
        inputCheckboxLabel.onclick = () => {
            this.setOpen(!this.open);
            this.onOpenChange(this.open);
        };

        let inputLogin = document.createElement('input');
        inputLogin.className = 'input-login';
        inputLogin.type = 'text';
        inputLogin.value = this.login;
        inputLogin.oninput = (event) => {
            if (event.data !== null) {
                this.onChange1(event.data);
            }
        };

        let inputPassword = document.createElement('input');
        inputPassword.className = 'input-password';
        inputPassword.value = this.password;
        inputPassword.oninput = (event) => {
            if (event.data !== null) {
                this.onChange(event.data);
            }
        };

        button.onclick = (event) => {
            console.log(event.type);
            inputLogin.value = '';
            inputPassword.value = '';
            if (inputPassword.value === '' && inputLogin.value === '') {
                button.disabled = true;
            }
        };

        parent.appendChild(inputLogin);
        parent.appendChild(inputPassword);
        parent.appendChild(inputCheckboxLabel);

        this.setValueLogin = function (valueLogin) {
            if (typeof valueLogin === 'string' && valueLogin !== '') {
                inputLogin.value = valueLogin;
                this.login = valueLogin;
            }
            return this.login;
        };

        this.getValueLogin = function () {
            return this.login;
        };

        this.setValue = function (value) {
            if (typeof value === 'string' && value !== '') {
                inputPassword.value = value;
                this.password = value;
            }
            return this.password;
        };

        this.getValue = function () {
            return this.password;
        };

        this.setOpen = function (state) {
            this.open = state;
            inputCheckbox.checked = state;

            if (state) {
                inputPassword.setAttribute('type', 'text');
            } else {
                inputPassword.setAttribute('type', 'password');
            }
            return state;
        };


        this.getOpen = function () {
            return this.open;
        };
    }

    let p = new Password(document.body, true);

    let resPsw = '';
    let resLogin = '';
    let changedPSW;
    let changedLogin;

    function buttonIsActive(valueFromInput, value) {

        if (value === 'psw') {
            resPsw += valueFromInput;
            changedPSW = resPsw;
        }
        if (value === 'login') {
            resLogin += valueFromInput;
            changedLogin = resLogin;
        }
        if (changedLogin === undefined || changedPSW === undefined) {
            button.disabled = true;
        } else if (changedLogin !== '' && changedPSW !== '') {
            button.disabled = false;
        }
    }

    p.onChange = (valuePSW) => buttonIsActive(valuePSW, 'psw');
    console.log(p.onChange);

    p.onChange1 = (valueLogin) => buttonIsActive(valueLogin, 'login');
    p.onOpenChange = open => console.log(open);

    p.setValue('qwerty');
    console.log(p.getValue());

    p.setOpen(false);
    console.log(p.getOpen());

    p.setValueLogin('admin');
    console.log(p.getValueLogin());
}

function runControl() {
    let wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
    let div1 = document.createElement('div');
    div1.className = 'div1';
    wrapper.appendChild(div1);
    document.body.appendChild(wrapper);

    let audio = document.createElement('audio');
    audio.src = 'http://download-sounds.ru/wp-content/uploads3/2012/11/happy.mp3';
    audio.className = 'audio';
    audio.controls = true;
    wrapper.appendChild(audio);

    function Control(el, {
        value = 0,
        min = 0,
        max = 100,
        minAngle = 0,
        maxAngle = 360,
        wheelSpeed = 0.1,
        step = 1
    } = {}) {

        const img = document.createElement('img');
        img.src = '1@3x.png';
        el.append(img);

        const ratio = (maxAngle - minAngle) / (max - min);
        const getAngle = () => (value - min) * ratio + minAngle;

        this.setValue = newValue => {
            if (newValue > max) {
                newValue = max;
            }
            if (newValue < min) {
                newValue = min;
            }
            value = newValue;
            if (this.onchange !== undefined) {
                this.onchange(value);
            }

            img.style.transform = `rotate(${getAngle()}deg)`;

            return value;
        };

        this.getValue = function () {
            return value;
        };

        img.onmousewheel = e => {
            const {deltaY} = e;

            const newValue = value + deltaY * wheelSpeed;
            this.setValue(newValue);
            e.preventDefault();
        };

        img.onclick = e => {
            console.log(e, img.width);
            const {layerX} = e;
            const {width} = img;
            if (layerX > width / 2) {
                this.setValue(value + step);
            } else {
                this.setValue(value - step);
            }
        };

        const toDeg = rad => ((rad * 180) / Math.PI + 360 + 90) % 360;
        let prevMouseAngle = null;

        img.onmousedown = e => {
            const y = e.layerY - img.height / 2;
            const x = e.layerX - img.width / 2;
            prevMouseAngle = toDeg(Math.atan2(y, x));
            console.log(x, y, getAngle(), prevMouseAngle, prevMouseAngle - getAngle());
            e.preventDefault();
        };

        img.onmousemove = e => {
            if (prevMouseAngle === null) return;

            const y = e.layerY - img.height / 2;
            const x = e.layerX - img.width / 2;
            let currentAngle = toDeg(Math.atan2(y, x));
            let moveAngleDiff = (currentAngle - prevMouseAngle);
            this.setValue(value + moveAngleDiff / ratio);
            prevMouseAngle = currentAngle;
        };

        img.onmouseout = img.onmouseup = () => {
            prevMouseAngle = null;
        };

        this.setValue(value);

    }

    const volumeControl = new Control(container1, {value: 50, min: 0, max: 100, minAngle: -90, maxAngle: 90});
    volumeControl.onchange = (value) => setVolume(value);
    console.log(volumeControl.getValue());

    function setVolume(value) {
        audio.volume = +(Math.round(value) / 100).toFixed(1);
    }

    function setRGB(value, color) {
        let currentColor = window.getComputedStyle(div1).backgroundColor;
        let roundedValue = Math.round(value);

        let [red, green, blue] = currentColor
            .replace('rgb', '')
            .replace('(', '')
            .replace(')', '')
            .split(', ')
            .map(str => +str);

        if (color === 'red') {
            red = roundedValue;
        } else if (color === 'green') {
            green = roundedValue;
        } else {
            blue = roundedValue;
        }
        div1.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
    }


    const red = new Control(container1, {min: 0, max: 255});
    red.onchange = (value) => setRGB(value, 'red');

    const green = new Control(container1, {min: 0, max: 255});
    green.onchange = (value) => setRGB(value, 'green');

    const blue = new Control(container1, {min: 0, max: 255});
    blue.onchange = (value) => setRGB(value, 'blue');

    setTimeout(() => volumeControl.setValue(80), 2000);

}

const tasksArray = [
    ['password', runPassword],
    ['control', runControl]
];

const $list = document.querySelector('.list');
tasksArray.forEach(task => {
    const [name, callback] = task;

    const $div = document.createElement('div');
    $div.className = 'div';

    let $button = document.createElement('button');
    $button.textContent = 'Запустить';
    $button.className = 'button';
    $button.onclick = callback;
    $div.appendChild($button);

    const $li = document.createElement('li');
    $li.className = 'li';
    $li.textContent = name;
    $div.appendChild($li);
    $list.appendChild($div);
});