List Print Scramble

creates a div elements within a given parent element, and then prints list items from an array with a snazzy scrambled effect

by mmansion

HTML

<button id="btn">click</button>

<div id="holder">
</div>

CSS

#holder {
 background: lightblue;    
 width: 300px;
 min-height: 100px;
 padding-top: 5px;
}

.inner {
 background: orange;
 margin-left: 5px;  
 width: 290px;
 height: 20px;
 border: thin black solid;
}

JavaScript

var holder = document.getElementById("holder");
var charCount = 0;
var timerID = {};
var list = ['one', 'two', 'three'];
var listCount = 0;

function createElement(parent) {
  var div = document.createElement('div');
  div.setAttribute('class', 'inner');
  parent.appendChild(div);
  return div;
}
  
  
btn.addEventListener('click', function() {
   if(listCount < list.length) {
       console.log(list.length);
    var div = createElement(holder);
    printLetters(list[listCount], div);
    listCount++;    
   }
});


function printLetters(listItem, uiElem, nextChar) {
    var thisCount = charCount;  
 
    if(charCount >= listItem.length) {
        clearTimeout(timerID);
        charCount = 0;
        return;
    } else {
        
      var charToFind = listItem[charCount];
      var asciiCode  = String.charCodeAt(charToFind); //get ascii
      
    if(asciiCode !== 32) { //test for 'space'(ascii 32)           
        var randPick = letterRandomizer(); 
       
        if(nextChar || uiElem.innerHTML.length < 1) {
           uiElem.innerHTML += randPick; 
        } else {
           var str = uiElem.innerHTML;
           var substr = str.substring(0, str.length-1);
           uiElem.innerHTML = substr + randPick;
        }
        if(randPick === charToFind) {
            charCount++;
        }           
    } else {
      uiElem.innerHTML += "&nbsp;";
      charCount++;
    }
  }
    timerID = setTimeout(function() {
        var nextChar = (thisCount < charCount)? true: false;
        printLetters(listItem, uiElem, nextChar);
      
    }, 20);
}

function letterRandomizer() {  
  var randChar = String.fromCharCode(Math.ceil(96+Math.random()*26));
  return randChar;
}