homework/hw-js-18-2-canvas/js/form.js

function dateToDateTimeLocal(date) {
    let myDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
    console.log(myDate.toISOString().slice(0, -1));
return myDate.toISOString().slice(0, -1)
}

dateToDateTimeLocal(new Date);

function Form(el, data, okCallback, cancelCallback) {
    let formBody = document.createElement('div')
    let okButton = document.createElement('button')
    okButton.innerHTML = 'OK'

    let cancelButton = document.createElement('button')
    cancelButton.innerHTML = 'Cancel'
let inputCreators = {
    String(key, value, oninput){
        let input = document.createElement('input')
        input.type = 'text'
        input.placeholder = key
        input.value       = value
        input.oninput     = () => oninput(input.value)
        return input
    },
    Boolean(key, value, oninput) {
       
        //label for с input type='checkbox'  
            let input = document.createElement('input')
        input.type = 'checkbox'
        input.placeholder = key
        input.checked       = value
        input.onchange     = () => oninput(input.checked)
        return input
    },
    Date(key, value, oninput) {
             let input = document.createElement('input')
        input.type = 'datetime-local'
        input.placeholder = key
        input.value = dateToDateTimeLocal(value);
        input.oninput     = () => oninput(new Date(input.value))
        return input
        //используйте datetime-local
       
    },
    //и др. по вкусу, например textarea для длинных строк
}
    formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
    for (const [key, value] of Object.entries(data)) {
        let input = inputCreators[value.constructor.name](key, value, newValue => { data[key] = newValue });
       
        // let input = document.createElement('input');
        formBody.append(input);
        input.placeholder = key;
        
        // input.oninput = () => {
        //    data[key] = input.value;
        //         }
            }
     
    if (typeof okCallback === 'function'){
        formBody.appendChild(okButton);
        okButton.onclick = (e) => {
            console.log(this)
            this.okCallback(e)
        }
    }

    if (typeof cancelCallback === 'function'){
        formBody.appendChild(cancelButton);
        cancelButton.onclick = cancelCallback
    }

    el.appendChild(formBody)


    this.okCallback     = okCallback
    this.cancelCallback = cancelCallback

    this.data           = data
    this.validators     = {}
}


let form = new Form(formContainer, {
    name: 'Anakin',
    surname: 'Skywalker',
    married: true,
    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
}, () => console.log('ok'),() => console.log('cancel') )
form.okCallback = () => console.log('ok2')

form.validators.surname = (value, key, data, input) => value.length > 2 && 
                                                     value[0].toUpperCase() == value[0] &&
                                                    !value.includes(' ') ? true : 'Wrong name'
console.log(form)