JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="main_text">
    <h1>Change Headings</h1>
  </div>


  <select id="selection">
    <option value="h1">H1</option>
    <option value="h2">H2</option>
    <option value="h3">H3</option>
    <option value="h4">H4</option>
    <option value="h5">H5</option>
  </select>

  <div class="color_picker">
    <h3>Choose Text Color</h3>
    <input type="color" id="color_picker">
  </div>

  <div class="change_font">
    <h3>Change Font</h3>
    <select id="select_font">
      <option value="Sans-serif">Sans-serif</option>
      <option value="Monospace">Monospace</option>
      <option value="Serif">Serif</option>
      <option value="Fantasy">Fantasy</option>
      <option value="Verdana">Verdana</option>
      <option value="Impact">Impact</option>
    </select>
  </div>

  <div class="change_size">
    <h3>Font Size</h3>
    <select id="change_font_size">
      <option value="14">14</option>
      <option value="18">18</option>
      <option value="22">22</option>
      <option value="24">24</option>
      <option value="26">26</option>
    </select>
  </div>

</div>

JavaScript

var tag = localStorage.tag || $('#selection').val();
var color = localStorage.color || $('#color_picker').val();
var font = localStorage.font || $('#select_font').val();
var size = localStorage.font_size || $('#change_font_size').val();
$('.main_text').css({
  "color": color,
  "font-family": font,
  "font-size": size
});
$('#selection').val(tag);
$('#color_picker').val(color);
$('#select_font').val(font);
$('#change_font_size').val(size);

$('#selection').change(function() {
  var tag = $(this).val();
  $(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
});
$('#color_picker').change(function() {
  var color_p = $(this).val();
  localStorage.color = color_p;
  $('.main_text').css("color", color_p);
});
$('#select_font').change(function() {
  var change_font = $(this).val();
  localStorage.font = change_font;
  $(".main_text").css("font-family", change_font);
});
$("#change_font_size").change(function() {
  var font_size = $(this).val();
  localStorage.font_size = font_size;
  $('.main_text > *').css("font-size", font_size + "px");
});