JSFiddle - React, Tailwind, and code Playground

by mbutubuntu

HTML

<div id="one">
</div>

<div id="two">
</div>

CSS

#one{
position: relative;
display: block;
float: left;
width: 200px;
height: 100px;
background: black;
}

#two{
position: relative;
display: block;
float: left;
width: 200px;
height: 100px;
background: red;
}

JavaScript

var js = (function(ob){
            var x = ob[0];
            var o = ob.split(x)[1].toString();

            if(x == "#"){
                this.bj = document.getElementById(o);    
            }else if(x == "."){
                this.bj = document.getElementsByClassName(o);
            }else if(x){
                this.bj = document.getElementsByTagName(ob);
            }

            var _r = this.bj;

            var isob = function(t){if(t.length == "undefined"){return false;}else if(t.length > 0){return true;}};
            
            this.s = function(p,v){if(!isob(this.bj)){this.bj.style[p] = v;}else if(isob(this.bj)){for(var i = this.bj.length-1; i>=0; i--){this.bj[i].style[p] = v;}} return this};

            this.e = function(e,cb){
                    var pass = this;
                    if(window.addEventListener){ // ALL                        
                        this.bj.addEventListener(e, a=function(a){cb.call(pass, evt=e)}, false);
                    } else if(window.attachEvent){ // IE
                        this.bj.attachEvent(e, a=function(a){cb.call(pass, evt=e)});
                    }
                    return this;
                    };
        
            this.add = function(h){if(!isob(this.bj)){this.bj.innerHTML += h;}else if(isob(this.bj)){for(var i = this.bj.length-1; i>=0; i--){this.bj[i].innerHTML += h;}} return this;};
            
            return this;});

   js("#two").s("marginLeft", "30px").e("mouseover", function(){this.s("color", "blue");}).e("mouseout", function(){this.s("color", "black");}).add("<p>ciao ciao ciao</p>");