JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<body>

  <h1 id='id1'></h1>
  <p id='id2'></p>
  <input id='inputBox' type='text'>

  <h1 id='test'></h1>


</body>

CSS

.addBack {
  background-color: lightblue;
}

JavaScript

$(document).ready(function() {

  var count = 0;
  var emptyArray = []; 
  var textToEnter = "HELLO";
  var textToEnterArray = textToEnter.split("");

  for (i = 0; i < textToEnterArray.length; i++) {
    emptyArray.push('<span class="noBack">' + textToEnterArray[i] + '</span>');
  }


  $('#id1').html(emptyArray);

  var inputBox = $("#inputBox");

  inputBox.keydown(function() {
    addLetter();
    $(".noBack:first").removeClass("noBack").addClass("addBack");
  });

  function addLetter() {
    //var letterVal = emptyArray[count];
    //count++;

    $('#test').append(inputBox.val());
    inputBox.val('');
  };

});