HomeWork_JS/Js_13_foop/js.js

//1.Person Constructor +
// Переделайте задание createPerson на функцию конструктор Person.

// {
//     const a = new Person("Вася", "Пупкин")
//     const b = new Person("Анна", "Иванова")
//     const c = new Person("Елизавета", "Петрова")
//
//     console.log(a.getFullName()) //Вася Пупкин
//     a.fatherName = 'Иванович'    //Вася Иванович Пупкин
//     console.log(b.getFullName()) //Анна Иванова
//
//     function Person(name, surname) {
//         this.name = name,
//         this.surname = surname,
//         this.getFullName = () => `${this.name} ${this.fatherName || ""} ${this.surname}`
//     }
// }

// 2. Person Prototype
// Переделайте предыдущее задание, вынеся методы в прототип.
// Для этого вместо присвоения в this занесите их в объект Person.prototype. После
// этой переделки все должно работать по старому:
// {
//     function Person (name, surname) {
//         this.name = name,
//             this.surname = surname
//     }
//
//     Person.prototype.getFullName = function (name, surname) {
//         return `${this.name} ${this.fatherName || ""} ${this.surname}`
//     }
//
//     const a = new Person("Вася", "Пупкин")
//     const b = new Person("Анна", "Иванова")
//     const c = new Person("Елизавета", "Петрова")
//
//     console.log(a.getFullName()) //Вася Пупкин
//     a.fatherName = 'Иванович'    //Вася Иванович Пупкин
//
//     console.log(a.getFullName())
//     console.log(b.getFullName())
// }

// 3. Переделайте функцию createStore (та, которая хранилище Redux) на конструктор Store. Прототип не используйте;
// оставьте переменные state, cbs и reducer замкнутыми. Соответственно методы subscribe, dispatch и getState должны
// быть объявлены внутри функции-конструктора и не могут быть в прототипе. Проверьте переделанный конструктор на вашем
// ДЗ по ларьку;
//
// function Store(reducer) {
//     let state = reducer(undefined, {})
//     let cbs = []
//
//     this.getState = () => state
//     this.subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
//         () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
//
//     this.dispatch = action => {
//         const newState = reducer(state, action) //пробуем запустить редьюсер
//         if (newState !== state) { //проверяем, смог ли редьюсер обработать action
//             state = newState //если смог, то обновляем state
//             for (let cb of cbs) cb() //и запускаем подписчиков
//         }
//     }
// }
//
// function reducer(state, {type, productName, productAmount, sum}){
//     if (!state){ //начальная уборка в ларьке:
//         return {
//             пиво: {
//                 amount: 100,
//                 price: 35,
//             },
//             чипсы: {
//                 amount: 100,
//                 price: 28,
//             },
//             сиги: {
//                 amount: 100,
//                 price: 90,
//             },
//         }
//     }
//     if (type === 'Купить' && productAmount <= state[productName].amount && sum >= state[productName].price * productAmount){ //если тип action - КУПИТЬ, то:
//         return {
//             ...state, //берем все что было из ассортимента
//             [productName]: {
//                 amount: state[productName].amount - productAmount,
//                 price: state[productName].price
//             },
//         }
//     }
//     return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
// }
//
// function actionCreator (type, productName, productAmount, sum){
//     return {
//         type,
//         productName,
//         productAmount,
//         sum
//     }
// }
//
// let store = new Store(reducer);
// console.log(store)
// myState = store.getState()
// console.log(myState)
//
// const showCase = document.createElement('section')
// document.body.append(showCase)
// showCase.classList.add('showCase')
//
// const productSelect = document.createElement('select')
// document.body.append(productSelect)
//
// const productQuantityOrderTitle = document.createElement('div')
// productQuantityOrderTitle.innerText = 'Количество:'
// document.body.append(productQuantityOrderTitle)
//
// const productQuantityInput = document.createElement('input')
// productQuantityInput.type = 'number'
// productQuantityInput.min = '0'
// document.body.append(productQuantityInput)
//
// const moneyTitle = document.createElement('div')
// moneyTitle.innerText = 'Деньги:'
// document.body.append(moneyTitle)
//
// const  money = document.createElement('input')
// money.type = 'number'
// money.min = '0'
// document.body.append(money)
//
// const buttonBuy = document.createElement('button')
// buttonBuy.value = 'Купить'
// buttonBuy.innerText = 'Купить'
// document.body.append(buttonBuy)
// buttonBuy.onclick = () => {
//     store.dispatch(actionCreator(buttonBuy.value, productSelect.value, +productQuantityInput.value, +money.value))
// }
//
// for (const product in store.getState()){
//
//     const productCard = document.createElement('div')
//     productCard.classList.add('productCard')
//
//     const productName = document.createElement('h2')
//     productName.innerText = product
//     productName.classList.add('productName')
//
//     const productPrice = document.createElement('div')
//     productPrice.innerText = store.getState()[product].price + ' грн'
//     productPrice.classList.add('productPrice')
//
//     const productAmount = document.createElement('div')
//     productAmount.innerText = store.getState()[product].amount + ' шт'
//     productAmount.classList.add('productQuantity')
//
//     productCard.append(productName, productAmount, productPrice)
//     showCase.append(productCard)
//
//     const productOption = document.createElement('option')
//     productOption.innerText = product
//     productSelect.append(productOption)
//
//     const productAmountChange= store.subscribe( () => {
//         productAmount.innerText = store.getState()[product].amount + ' шт'
//     })
// }

//4. Password
//Напишите функцию конструктор Password, которая будет в родительском элементе создавать поле ввода для пароля и
// кнопку/иконку/чекбокс, который будет переключать режим просмотра пароля в поле ввода. (видимый пароль или нет,
// input type='text' или же input type='password')
// Параметры:
//     parent - родительский элемент
//     open - стартовое состояние
// Методы:
//     setValue/getValue - задают/читают значения
//     setOpen/getOpen - задают/читают открытость текста в поле ввода
// Колбэки (функции обратного вызова, который возможно, будут заданы снаружи конструктора):
//     onChange - запускается по событию oninput в поле ввода, передает текст в колбэк
//     onOpenChange - запускается по изменению состояния открытости пароля

// {
//     function Password(parent, open) {
//
//         const passwordInput = document.createElement('input')
//         passwordInput.placeholder = 'Введите пароль '
//         parent.append(passwordInput)
//
//         const checkboxInput = document.createElement('input')
//         checkboxInput.type = 'checkbox'
//         parent.append(checkboxInput)
//
//         this.setValue = value => {
//             passwordInput.value = value
//         }
//
//         this.getValue = () => passwordInput.value
//
//         this.setOpen = open => {
//             if (open === true) {
//                 checkboxInput.checked = true
//                 passwordInput.type = "text"
//             }
//             if (open === false) {
//                 checkboxInput.checked = false
//                 passwordInput.type = "password"
//             }
//         }
//         this.getOpen = () => checkboxInput.checked
//
//         passwordInput.oninput = () => this.setValue(this.getValue())
//         checkboxInput.oninput = () => this.setOpen(this.getOpen())
//     }
//
//     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())
// }

//5. LoginForm
// С помощью предыдущего кода Password сделайте форму логина, кнопка в которой будет
// активна только если и login и пароль не пусты.
//
{
    function Password(parent, open) {

        let passwordInput = document.createElement('input')
        passwordInput.placeholder = 'Введите пароль '
        parent.append(passwordInput)

        let checkboxInput = document.createElement('input')
        checkboxInput.type = 'checkbox'
        parent.append(checkboxInput)

        this.setValue = value => {
            passwordInput.value = value
            if (typeof this.onChange === 'function') {
                this.onChange(this.getValue()) }
        }

        this.getValue = () => passwordInput.value

        this.setOpen = open => {
            if (open === true) {
                checkboxInput.checked = true
                passwordInput.type = "text"
            }
            if (open === false) {
                checkboxInput.checked = false
                passwordInput.type = "password"
            }
            if (typeof this.onOpenChange === 'function') {
                 this.onOpenChange(this.getOpen())
             }
        }

        this.getOpen = () => checkboxInput.checked

        this.setOpen(open)
        passwordInput.oninput = () => this.setValue(this.getValue())
        checkboxInput.oninput = () => this.setOpen(this.getOpen())
    }

    const loginInput = document.createElement('input')
    loginInput.placeholder = 'Введите логин'
    document.body.append(loginInput)

    let p = new Password(document.body, false)

    const buttonLogin = document.createElement('input')
    buttonLogin.value = 'Login'
    buttonLogin.type = 'button'
    document.body.append(buttonLogin)
    buttonLogin.disabled = true

    p.onChange = () => buttonDisabled()

    function buttonDisabled () {
         if (!loginInput.value) {
             buttonLogin.disabled = true
         }
         else buttonLogin.disabled = false
    }
}

//6. LoginForm Constructor
// оформите предыдущую задачу как функцию-конструктор. Продумайте и предусмотрите геттеры, сеттеры и колбэки.
// {
//     function Form () {
//         function Password(parent, open) {
//
//             let passwordInput = document.createElement('input')
//             passwordInput.placeholder = 'Введите пароль '
//             parent.append(passwordInput)
//
//             let checkboxInput = document.createElement('input')
//             checkboxInput.type = 'checkbox'
//             parent.append(checkboxInput)
//
//             this.setValue = value => {
//                 passwordInput.value = value
//                 if (typeof this.onChange === 'function') {
//                     this.onChange(this.getValue()) }
//             }
//
//             this.getValue = () => passwordInput.value
//
//             this.setOpen = open => {
//                 if (open === true) {
//                     checkboxInput.checked = true
//                     passwordInput.type = "text"
//                 }
//                 if (open === false) {
//                     checkboxInput.checked = false
//                     passwordInput.type = "password"
//                 }
//                 // if (typeof this.onOpenChange === 'function') {
//                 //     this.onOpenChange(this.getOpen())
//                 // }
//             }
//
//             this.getOpen = () => checkboxInput.checked
//
//             this.setOpen(open)
//             passwordInput.oninput = () => this.setValue(this.getValue())
//             checkboxInput.oninput = () => this.setOpen(this.getOpen())
//         }
//
//         const loginInput = document.createElement('input')
//         loginInput.placeholder = 'Введите логин'
//         document.body.append(loginInput)
//
//         let p = new Password(document.body, false)
//
//         const buttonLogin = document.createElement('input')
//         buttonLogin.value = 'Login'
//         buttonLogin.type = 'button'
//         document.body.append(buttonLogin)
//         buttonLogin.disabled = true
//
//         p.onChange = () => buttonDisabled()
//
//         function buttonDisabled () {
//             if (!loginInput.value) {
//                 buttonLogin.disabled = true
//             }
//             else buttonLogin.disabled = false
//         }
//     }
//
//     Form()
// }

//7. Password Verify
// С помощью Password сделайте пару инпутов, которые проверяют введеный пароль (в двух полях ввода) на совпадение. Подсвечивайте поля красным цветом/бордером когда пароли не совпадают При открытом пароле в первом поле ввода (которое реализуется с помощью объекта класса Password второе поле вводы должно пропадать с экрана Таким образом:
//
//     Когда Password в скрытом режиме - появляется второй инпут (<input type='password'>) с паролем в скрытом режиме
//     Когда Password в открытом режиме - второй инпут пропадает
// {
//     function Password(parent, open) {
//
//         const passwordInput = document.createElement('input')
//         passwordInput.placeholder = 'Введите пароль '
//         parent.append(passwordInput)
//
//         const checkboxInput = document.createElement('input')
//         checkboxInput.type = 'checkbox'
//         parent.append(checkboxInput)
//
//         this.setValue = value => {
//             passwordInput.value = value
//             if (typeof this.onChange === 'function') this.onChange(this.getValue())
//         }
//
//         this.getValue = () => passwordInput.value
//
//         this.setOpen = open => {
//             if (open === true) {
//                 checkboxInput.checked = true
//                 passwordInput.type = "text"
//             }
//             if (open === false) {
//                 checkboxInput.checked = false
//                 passwordInput.type = "password"
//             }
//         }
//
//         this.getOpen = () => checkboxInput.checked
//         this.getinputPass = () => passwordInput
//
//         this.setOpen(open)
//         passwordInput.oninput = () => this.setValue(this.getValue())
//         checkboxInput.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.backgroundColor = 'red'
//             pass2.getinputPass().style.backgroundColor = 'red'
//         } else {
//             pass1.getinputPass().style.backgroundColor = 'green'
//             pass2.getinputPass().style.backgroundColor = 'green'
//         }
//     }
//     const pass2Open = (pass1GetOpen) => {
//         if (pass1GetOpen === true) pass2.style.display = 'none'
//         else pass2.style.display = 'block'
//     }
//
//     p1.onOpenChange = function () {
//         pass2Open (this.getOpen() )
//     }
// }