Text-Reduce-Dynamiclly

by Santosh Thakur

HTML

<input type="text" id="location" placeholder="Placeholder Text" />

CSS

#location {
   font-size: 200px;
   outline: none;
   width: 1000px;
   height: 200px;
   display: table-cell;
   vertical-align: middle;
   border: 1px solid #ccc;
 }

JavaScript

$('#location').on('keypress blur', function() {

  var textLength = $(this).val().length;

  if (textLength < 10) {
    $(this).css('font-size', '150px');
  } else if (textLength < 15) {
    $(this).css('font-size', '130px');
  } else if (textLength < 20) {
    $(this).css('font-size', '100px');
  } else if (textLength < 30) {
    $(this).css('font-size', '50px');
  } else {
    $(this).css('font-size', '200px');
  }
  //console.log(textLength);
});