JSFiddle - React, Tailwind, and code Playground

by travelandchat

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            const dataBind = (function () {
                const getElementValue = function (selector) {
                    let element = document.querySelectorAll(selector)[0];
                    return 'value' in element ? element.value : element.innerHTML;
                };
                const setElementValue = function (selector, newValue) {
                    let elementArray = document.querySelectorAll(selector);
                    for (let i = 0; i < elementArray.length; i++) {
                        let element = elementArray[i];
                        if ('value' in element) {
                            element.value = newValue;
                            if (element.tagName.toLowerCase() === 'select'){
                                let options = element.querySelectorAll('option');
                                for (let option in options){
                                    if (option.value === newValue){
                                        option.selected = true;
                                        break;
                                    }
                                }
                            }
                        } else {
                            element.innerHTML = newValue;
                        }
                    }
                };

                const bindModelToView = function (selector, object, property, enumerable) {
                    Object.defineProperty(object, property, {
                        get: function () {
                            return getElementValue(selector);
                        },
                        set: function (newValue) {
                            setElementValue(selector, newValue);
                        },
                        configurable: true,
   ...