JSFiddle - React, Tailwind, and code Playground

by marsone

HTML

<div id="editor" contenteditable="true" >Go ahead</div>
<div id="counter"></div>

CSS

#editor {
    border: 1px solid #CCC;
    width:400px;
    height: 100px;
    overflow: scroll;
}

JavaScript

const limit = 200;
rem = limit - $('#editor').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#editor").on('input', function () {
    var char = $('#editor').text().length;
    rem = limit - char;
    $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
    console.log(char)
    console.log(rem);
    if (char >= 100) {
        $("#counter").css("color", "#ff7777");
    }
    else
        $("#counter").css("color", "#111111");
    if(char>200)
    {
        //add code to either remove extra chars or highlight them.
    }

});