<p>Type something</p>
<input type="text" id="text" autofocus>
<ul id="list">
</ul>
body{
    display: flex;
}

ul{
    display: block;
    margin: 20px auto;
    width: 10%;
    list-style-type: none;
}

li{
    font-family: Arial;
    font-size: 48px;
    font-weight: 600;
    color: #507DAA;
    margin: 10px 0 10px 0;
    
}

#text{
    display: none;
}

#list > li {
  display: none;
}
// adding content
$(document).ready(function(){

let text = document.getElementById('text');
let list = document.getElementById('list');

document.addEventListener('keydown', addLetter);

function addLetter(e){
  let key = e.key;
  
  if ( /^[a-zа-яё]$/i.test(key) ) {
    list.insertAdjacentHTML('beforeend', `<li>${key}</li>`);
    console.log($('#list li:last-child'));
    $('#list li:last-child').fadeIn(1000);
  }
};

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js