Make text smaller or bigger font size

Make text smaller or bigger font size

by zachreynolds

HTML

<div id="textoptions">



<button id="buttonMinus" type="button"> - </button>
<button id="buttonPlus" type="button"> + </button>
<p>Press to change size of text</p>
</div>

CSS

p {
  font: normal 20px 'Open Sans';
}

#textoptions {padding:10px;}

#textoptions button{width:35px;color:#fff;padding: 7px 10px 5px 10px;background:#a00;border:1px solid #900;font-size:20px;}

JavaScript

$("p").click(function() {
  var fontSize = parseInt($(this).css("font-size"));
  fontSize = fontSize + 1 + "px";
  $('p').css({'font-size': fontSize});
});

$("#buttonPlus").click(function() {
  var fontSize = parseInt($("p").css("font-size"));
  fontSize = fontSize + 5 + "px";
  $('p').css({'font-size': fontSize});
});

$("#buttonMinus").click(function() {
  var fontSize = parseInt($("p").css("font-size"));
  if (fontSize <= 20)
    return
  fontSize = fontSize - 5 + "px";
  $('p').css({'font-size': fontSize});
});