JSFiddle - React, Tailwind, and code Playground

by mmacin

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

var char = 200;
    $("#counter").append("You have <strong>" + char + "</strong> chars left.");
    $("#editor").keypress(function () {
        if ($(this).text().length > char) {
            $(this).text($(this).text().substr(1));
        }
        var rest = char - $(this).text().length;
        $("#counter").html("You have <strong>" + rest + "</strong> chars left.");
        if (rest <= 100) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });