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>
      !function() {
        function xval(sel, val, l, i) {
          for (l = document.querySelectorAll(sel), i = 0; el = l[i++];) {
            if (val == null)
              return 'value' in el ? el.value : el.innerHTML
            else if ('value' in el) {
              el.value = val
              if (el.tagName.toLowerCase() === 'select')
                Array.prototype.forEach.call(el.querySelectorAll('option'), function(opt) {
                  opt.selected = (opt.value == val)
                })
            } else el.innerHTML = val
          }
        }

        window.DaBi = function(sel, obj, prop, isEnum) {
          Object.defineProperty(obj, prop, {
            get: function() {
              return xval(sel)
            },
            set: function(v) {
              xval(sel, v)
            },
            configurable: true,
            enumerable: !!isEnum
          })
        }
      }()

    </script>

  </head>

  <body>
    <div>
      <input type="text" id="text" /><br><br><br><br>
    </div>
  </body>
  <script>
    let x = {
      a: 1,
      b: 2
    };
    DaBi('#text', x, 'a'); //data to dom

    setInterval(function() {
      x.a++;
    }, 1000);

  </script>

</html>