Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

$(function () {
  $('body').append(getPhrase('yii framework'));
  
  $(this).on('keypress', function (e) {
    var char = String.fromCharCode(e.which);
    
    char.match(/[A-Za-z]/)
      ? $('.' + char).toggleClass('highlight')
      : e.preventDefault();
  });
});

function getPhrase(phrase) {
  var html = '';
  
  for (var i = 0; i < phrase.length; i++) {
    html += '<span class="' + phrase[i] + '">' + phrase[i] + '</span>';
  }
  
  return html;
}

/* Styles go here */

.highlight {
  color: red;
  font-weight: bold;
}