JSFiddle - React, Tailwind, and code Playground

by Luis Perez

HTML

<input id="tweet" />
<span id="tweetCharMsg">
    <span id="tweetCharsLeft"></span> characters left
</span>

CSS

.warning {
    color: orange;
}

JavaScript

function updateCharCount() {
    var tweet = $("#tweet").val();
    $("#tweetCharsLeft").text(140 - tweet.length);
    
    if(tweet.length > 120) {
        $("#tweetCharMsg").addClass("warning");
    } else {
        $("#tweetCharMsg").removeClass("warning");
    }
}

updateCharCount();

$("#tweet").on("keyup", function() {
    updateCharCount();
});