JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<p>Change font size</p>
<div id="main_area1">
  <button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
</div>
<div id="main_area2">
  <button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
</div>
<div>
  <p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
</div>

<input id="abcde" type="text" value="Santosh" onfocus="myFunction(this.value)" />

CSS

#abcde {
  border: 1px solid red;
  font-size: 160px;
  width: 500px;
  display:flex;
  height:170px;
}

JavaScript

function myFunction(value) {
  var abcde = document.getElementById("abcde");
  // console.log(">>>>>>", abcde.value.length);
  var fontSize;
  var computedStyle = window.getComputedStyle ?
    getComputedStyle(demo) : demo.currentStyle; // Old IE
  console.log("value >>>", value.length);

  if (value.length > 7) {
  fontSize = parseFloat(computedStyle && computedStyle.fontSize);
    fontSize -= 5;
  }

  abcde.style.fontSize = fontSize + "px";

}

function changeFontSize(target) {
  var demo = document.getElementById("demo");


  var computedStyle = window.getComputedStyle ?
    getComputedStyle(demo) : demo.currentStyle; // Old IE
  var fontSize;

  if (computedStyle) { // This will be true on nearly all browsers
    fontSize = parseFloat(computedStyle && computedStyle.fontSize);

    if (target == document.getElementById("button1")) {
      fontSize += 5;
    } else if (target == document.getElementById("button2")) {
      fontSize -= 5;
    }
    demo.style.fontSize = fontSize + "px";
  }
}