JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<form class="lineCount">
    <textarea id="countMe" cols="30" rows="5"></textarea><br />
    <input type="submit" value="Test Me">
</form>

<div class="theCount">Lines used: <span id="linesUsed">10</span><div>

JavaScript

//textarea lines count down
$(document).ready(function(){
    
    var lines = 10;
    var linesUsed = $('#linesUsed');
    
    $('#countMe').keydown(function(e) {
        
        newLines = lines - $(this).val().split("\n").length;
        linesUsed.text(newLines);
        
        if(e.keyCode == 13 && newLines === 0) {
            linesUsed.css('color', 'red');
            return false;
        }
        else {
            linesUsed.css('color', '');
        }
    });
});