JSFiddle - React, Tailwind, and code Playground

by mangalauwu

HTML

<div id='preview_text'>www.codesrilanka.blogspot.com</div>
<input type='text' id='front_text'>

JavaScript

var font_size=40;
$("#front_text").keyup(function(){
    $("#preview_text").text($("#front_text").val());
    var front_length = $("#preview_text").text().length;
    if(front_length < 5){
        $("#preview_text").css("font-size",font_size+"px");    
    }else if(front_length >= 5 && front_length < 10){ 
        $("#preview_text").css("font-size",(font_size-10)+"px");
    }else if(front_length >= 10 && front_length < 15){
        $("#preview_text").css("font-size",(font_size-20)+"px");
    }else if(front_length >= 15 && front_length < 20){
        $("#preview_text").css("font-size",(font_size-25)+"px");
    }else{
        $("#preview_text").css("font-size",(font_size-29)+"px");
    }
});