JSFiddle - React, Tailwind, and code Playground

by suphalak_26

HTML

<div>100.2</div>
<div>-100</div>
<div>-342.4</div>
<div>-234</div>
<div>0</div>
<div>abc</div>
<div>cde</div>
<div>-234</div>
<div>234</div>
<div>-99</div>

CSS

input{margin:5px;}
div{margin:2px;}

JavaScript

(function($) {
    $.expr[":"].formatPos = function(elem, idx, meta, items) {
        return $.isNumeric(elem.innerHTML) && elem.innerHTML >= 0;
    };
    $.expr[":"].formatNeg = function(elem, idx, meta, items) {
        return $.isNumeric(elem.innerHTML) && elem.innerHTML < 0;
    };

    // adding a method to the jquery object
    $.logAndAlert = function(value) {
        if (value != null) {
            if (console) console.log(value);
            alert(value);
        }
    };

    // overriding an existing method (NOT RECOMMENDED)
    $.old_isNumeric = $.isNumeric;
    $.isNumeric = function(arg) {
        if ($.old_isNumeric(arg)) {
            if (console) console.log("Yes, " + arg + " is numeric");
            return true;
        } else {
            if (console) console.log("No, " + arg + " is not numeric");
            return false;
        }
    };
})(jQuery);

$(function() {
    //$("#btnFormatPosNeg").click(function() {
        $("div:formatPos").css({
            "color": "Green",
            "font-weight": "Bold"
        });
        $("div:formatNeg").css({
            "color": "Red",
            "font-weight": "Bold"
        });
    //});
   
});