JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<button id='btn'>click</button>
<button id='btn1'>click new</button>
<input type='button' id='hide' value='hide'>
<input type='button' id='show' value='show'>
<input type='button' value='Toggle' id='toggle'>
<br>
<br>
<div id='dv' style='width:500px;background-color:green;height:100px;'>yes</div>

JavaScript

var X = X || {};
alert(X);


var $ = function (query) {
      var _ = this;
    _.dom = document.querySelector(query);
    _.html = function (h) {
        _.dom.innerHTML=h;
        return _;
    }
    _.append = function (h) {
        _.dom.innerHTML+=h;
        return _;
    }
    _.prepend = function (h) {
        _.dom.innerHTML=h+this.dom.innerHTML;
        return _;
    }
    _.click = function (callback) {
        _.dom.addEventListener("click", function () {
            callback();
        });
        return _;
    }
    _.hide = function () {
        _.dom.style.visibility = 'hidden';
        _.dom.style.display = 'none';
        return this;
    }
    _.show = function () {
        _.dom.style.display = 'block';
        _.dom.style.visibility = 'visible';
        return this;
    }
    _.toggle = function () {
        if (_.dom.style.display == 'none') {
            _.dom.style.display = 'block';
            _.dom.style.visibility = 'visible';
        } else {
            _.dom.style.display = 'none';
            _.dom.style.visibility = 'hidden';
        }
        return _;
    }
    _.css = function(key,val){
        _.dom.style[key] = val;
        return _;
    }
    return _;
}


$("#hide").click(function () {
    $("#btn").hide();
});

$("#show").click(function () {
    $("#btn").show();
});



$("#toggle").click(function () {

     $("#dv").css("backgroundColor","red");
     $("#dv").css("backgroundColor","yellow");
    
    $("#dv").prepend(" befor ").append(" after " );
    
   // $("#dv").toggle();
    //$("#dv").append("<br>Added to the body");

});

$("#btn").prepend("before").append("afters");

var count = 0;
$("#btn").click(function () {
    count++;
    $("#btn").html('clicked ' + count);
});

$("#btn1").click(function () {
    alert('clicked');
});


$("body").css("background","pink");