JSFiddle - React, Tailwind, and code Playground

by adem

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="wrapper">
    <h1 class="intro">Hi, I'm Adem, a 21 years old web developer and beatboxer based in Germany.<span class="caret">_</span></h1>
</div>

CSS

html { 
    font: 12px/1.5 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; 
    background: #2a2b2a; 
    color: white
}

.wrapper { 
    width: 48em; 
    margin: 3em auto;
}

/* 
 * Simulate :after to add an animation
 */
.ready {
    animation: blink .8s infinite ease-in-out;
}

@keyframes blink {
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}

JavaScript

function charsToArray(str){
      var arr = [];
        for (var i = 0; i < str.length; i++){
        console.log(str);
          arr.push(str.substr(i,1));
        }
        return arr;
      }
    charArr = charsToArray(document.getElementsByClassName('intro')[0].childNodes[0].data);
    document.getElementsByClassName('intro')[0].childNodes[0].data = "";
    
    var i = 0;
      var concatenateChars = setInterval(function(){
        console.log(arguments);
        document.getElementsByClassName('intro')[0].childNodes[0].data += charArr[i];
        i++;
        
        if (i == (charArr.length)) {
            clearInterval(concatenateChars);
            document.getElementsByClassName('caret')[0].className += " ready"
        }
      }, 25)