JSFiddle - React, Tailwind, and code Playground

by tonyleeper

JavaScript

var model = {
    name: ''
};

var root = document.getElementsByTagName('section')[0];
root.querySelector('input').addEventListener('input', function (e) {
    model.name = e.target.value;
    var greet = root.getElementsByClassName('greet')[0];
    greet.innerHTML = 'Hello ' + model.name + '!';
});

/*
events we are interested in:

keypress
mouse click left
mouse click right
mouse move
input changes
focus 
blur

*/

var x = {
    components: {},
    component: function (name, spec) {
        name = name.replace('-', 'X');
        components[name] = spec;
    },
    render: function (template) {
        document.body.innerHTML = template;
        
    }
};

x.component('superman', {
    init: function (data) {
        this.name = data.name;
    },
    render: function (target) {
        target.innerHTML = 'Is it a bird, is it a plane? No! It\'s ' + this.name;
        x.Event(target, 'click', function (e) {
            this.name = 'Supergirl';
        });
    },
    dispose: function () {
        
    }
});

var template = '<section>
    <label>
        <span>What is your name?</span>
        <input type="text" x-click="" x-keypress="" x-input="" />
    </label>
    <span class="greet"></span>
</section>
<superman></superman>';
    
x.render(template);