JSFiddle - React, Tailwind, and code Playground

by anzeo

HTML

<input type="text">
<div></div>

CSS

.highlight-negative {
    background-color: #CA1C1C;
}
.highlight-positive {
    background-color: #0089BA;
}

JavaScript

function highlight(element, value) {
    var newVal = value,
        oldVal = element.text(),
        highlightClass;

    if (newVal < oldVal) {
        highlightClass = "highlight-negative";
    } else if (newVal > oldVal) {
        highlightClass = "highlight-positive";
    }

    element.text(newVal);

    if (highlightClass) {
        element.stop(true, true);
        element.removeClass("highlight-positive highlight-negative");
        element.addClass(highlightClass);
        setTimeout(function () {
            element.removeClass(highlightClass);
        }, 1200);
    }
}

$("input").change(function () {
    var newVal = $(this).val();
    highlight($("div"), newVal);
});