JSFiddle - React, Tailwind, and code Playground

by Bhavin Surela

HTML

<div class="button demo-text-log" id="txt-log"> Demo Text Log
</div>
<div class="button demo-error-log" id="txt-error">Demo Error Log
</div>
<div class="button demo-custom-log" id="txt-log">Demo Custom Log
</div>

CSS

.button{
    height:30px;
    width:200px;
    color:black;
    margin:10px;
    border-radius:10px;
    text-align:center;
    vertical-align:center;
    font-weight:bold;
    box-shadow: 1px 1px 1px #333;
    cursor:pointer;
}

.demo-text-log{
    background:green;
}

.demo-error-log{
    background:red;
}

.demo-custom-log{
    background:yellow;
}

JavaScript

var _logserver;

 (function () {
    var ls = document.createElement('script'); ls.type = 'text/javascript'; ls.async = true;
    ls.src = 'https://supersurela.com/Scripts/log4sureClient.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ls, s);
    ls.onload = function () {
            _logserver = new LogServer("f6d4f3b6-6843-47b7-915d-13a75d940c55");
    };
})();


$(".demo-text-log").click(function(){
    _logserver.logText("This is a demo text log from jsfiddle.");
});

$(".demo-error-log").click(function(){
    // get file name, line number, msg from window.error function

    _logserver.logError("fake file","21","This is a demo error log from jsfiddle");
}); 

$(".demo-custom-log").click(function(){
    _logserver.log("Bhavin","Blue","Volleyball","Biking");
});