JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<div id="output"></div>
        <div id="container">
        </div>

CSS

html {
                height: 100%;
            }

            body {
                background-color: #000;
                color: #FFF;
                position: relative;
                overflow: hidden;
                height: 100%;
                width: 100%;
            }

JavaScript

(function(){
    var listaLIs = [
        { type: 'radio', text: 'Radio Button' },
        { type: 'checkbox', text: 'Checkbox Button' },
        { type: 'text', text: 'Text field' },
        { type: 'number', text: 'number field' },
        { type: 'button', text: 'Button Button' }
    ];

    var ul = document.createElement('ul');
        ul.className = 'ulclass';
    var output = document.getElementById('output');
    var container = document.getElementById('container');
        container.appendChild(ul);
        // alias para binding de eventos
    function bind(element, event, callback){
        // if we have dom level 2
        if(element.addEventListener){
            element.addEventListener(event, callback, false);
            return true;
        } else {
            element.attachEvent('on'+event, callback);
            return false;
        }
    }
    function listElement(listElement){
        var li = document.createElement('li');
        var text = document.createTextNode("create " + listElement.text);
        li.className = 'liclass';
        li.appendChild(text);
        ul.appendChild(li)
        function eventclosure(){
            var inputElement = '<input type="' + listElement.type + '" value="' + listElement.type + '" />'
            output.innerHTML = inputElement;
        }
        bind(li, 'click', eventclosure);
    }
    for(var i = 0; i < listaLIs.length; i++){
        listElement(listaLIs[i]);
    }
})();