* `html` template literal should create a button with properties binded

const sayHello = () => console.log("Hello world!");

function html(strings, ...rest) {
    //strings = ["<button .onClick=", ".innerHtml=", "</button>"],
    //rest = [function() {}, 'ClickMe']
    //
    //strings = ["<button .innerHtml=", ".onClick=", "></button>"]
    //rest = ['ClickMe2', function() {}]
    
    for (var string in strings) {
        console.log(strings[string]); // 1 2 3
    }
    for (var string of strings) {
        console.log(string); // "", "", ""
    }
    
    
    var stringsFuncIndex = string
        .findIndex(x => x.indexOf('onClick') >= 0);
    var funcFromString = res[stringsFuncIndex];
    
    var func = rest.find(x => x is instanceOf Function);
    var buttonText = rest[0] is instanceOf Function ? rest[1] : rest[0]

    var buttonElem = document.createElement('button');
    buttonElem.addEventListener('click', () =>
        func()
    );
    buttonElem.innerHtml = buttonText;
    return buttonElem;
// Create a button 
// Bind the on click event
// Bind the innerHtml
// Return the button
}

const button1 = html`<button 
                    .onclick=${sayHello} 
                    .innerHTML=${'ClickMe'}>
                </button>`;
const button2 = html`<button 
                     .innerHtml=${'ClickMe'}
                     .onClick=${sayHello}>
                </button>`;
document.body.appendChild(button1);
document.body.appendChild(button2);