js_homeworks/form_OOP/main.js

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

    let cancelButton = document.createElement('button')
    cancelButton.innerHTML = 'Cancel'
    let firstInfo = {...data};

    okButton.disabled = true;

    formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
    formBody.appendChild(inputBox);
    let inputCreators = {
        String(key, value, oninput){
            /* let label = document.createElement('label'); */
            let input = document.createElement('input');
            if(value == '*'){
                input.type = 'password'
            } else {
                input.type = 'text'
            }
            /* if(key[0]=='*'){
            input.onblur = function(){
                if(input.value.includes('')){
                    input.style.borderColor = 'red';
                }
            }
            input.onfocus = function(){
                input.style.borderColor = '';
             }
            } */


            /* label.innerText = `${key}` */
            input.placeholder = key
            input.value       = value
            input.oninput     = () => oninput(input.value)
           /*  label.appendChild(input); */
            return input
        },
        Boolean(key, value, oninput){
            //label for с input type='checkbox' внутри
            /*  */
            let label = document.createElement('label');
            let input = document.createElement('input');
            input.type = 'checkbox'
            input.checked= value
            input.oninput = () => oninput(input.checked);
            label.innerText = `${key}`
            label.appendChild(input);
            return label
        },
        Date(key, value, oninput){
            //используйте datetime-local
            let input = document.createElement('input');
            input.type = "datetime-local"
            let timeStamp = value.getTime();
            input.value = ((new Date(timeStamp - value.getTimezoneOffset()*60*1000)).toISOString()).slice(0,-1);
            
            input.oninput= () => oninput(new Date(input.value));
            return input
        }
        
        //и др. по вкусу, например textarea для длинных строк
    }

   
   
 let creatingInputs = (data)=>{   
    inputBox.innerHTML = '';
     for (let [key,value] of Object.entries(data)){
        console.log(key+":"+data[key]);
        let errorArr = [];
        let label = document.createElement('label');
        label.innerText=`${key}`;
        let inputCreations = inputCreators[value.constructor.name];
        let createdInput = inputCreations(key,value,(value)=>{
            if(typeof this.validators[key] === "function"){
             let result =  this.validators[key](value,key,data,createdInput)
             
             if(result !== true){
                createdInput.style.backgroundColor = "red";
                okButton.disabled = true;
                errorArr.push(key);
                console.log(`when erors have some erors ${errorArr}`);
               
             }  else {
                errorArr.pop(key);

                 createdInput.style.backgroundColor = ""; 
                 okButton.disabled = false;
                 console.log(`when erors empty ${errorArr}`);
                 data[key] = value;
             }
               
        }
        data[key]=value;
        })
        if(key[0]== '*'){
             label.classList.add('required');
             createdInput.onblur = function(){
                if(createdInput.value.includes('')){
                    createdInput.style.borderColor = 'red';
                }
            }
            createdInput.onfocus = function(){
                createdInput.style.borderColor = '';
             }
        }
        label.appendChild(createdInput);
        inputBox.appendChild(label);
        inputCreations.oninput = () => {data[input.placeholder] = input.value;
    }
        
    }
}
    creatingInputs(data);

    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 = () => {
            /* let inputs = document.querySelectorAll('input');    
            debugger;
            for(let [key,value] of Object.entries(firstInfo)){
                for(let i = 0; i < inputs.length; i++){
                    inputs[i].value = value;
                    console.log(inputs.value);
                }
            } */
            this.data = {...firstInfo};
            creatingInputs(this.data,this.okCallback,this.cancelCallback);
            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,
    password: '*',
    '*something': 'SOME thing',
    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
}, () => console.log('ok'),() => console.log('cancel') )
form.okCallback = () => console.log('ok2')
form.cancelCallback = () => console.log('cancel')
form.validators.surname = (value, key, data, input) =>  value.length > 2 && 
                                                     value[0].toUpperCase() == value[0] &&
                                                    !value.includes(' ') ? true : 'Wrong name'
form.validators.password = (value,key,data,input) =>  value.length >= 3 && value.length <=10 ? true : console.log('password not full')

                                                    
console.log(form);