JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
<body>
    <textarea class="large" id="area">Enter Text here ...</textarea>
    <div id="info">
        waiting for at least three lines to trigger ...
    </div>
</body>
</html>

CSS

textarea {
    width: 600px;
    height:120px;
    font-family:Verdana;
    font-size: 15px;
}

textarea.large {
    font-size: 28px;
}

JavaScript

getLines=function(){
    var _lines=1;
    var _val=$('#area').val();
    for(var i=0;i<_val.length;i++){
        if(_val.substr(i,1)=="\n") _lines++;
    }
    return _lines;
},

$('#area').keypress(function(evt){
    var _key=window.event ? evt.keyCode : evt.which;
    if(_key==13){
        if(getLines()>=2) {
            $('#area').removeClass('large');
            $('#info').html('large class REMOVED');
        } else {
            if($('#area').hasClass('small')) {
                $('#area').addClass('large');                          
                $('#info').html('large class ADDED');
            }
        }
    }
});
alert('Hello. How can i adapt getLines() to calculate the actual number of lines within this textbox, not just the newlines?');