JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div id="js-typing"></div>

CSS

.removing{
    background: red;
}

JavaScript

typing("Smarter Faster. This is our DNA.");

var container = document.getElementById("js-typing");

var typingSpeed = 10000;

function typing(string){
    var count = 0;
    var length = string.length;
    var newString = "";
    var timer;
    var removeTimer;
        
    timer = setInterval(function(){
        if(count < length){
            addLetter();
        } else{
            removeLetter(3);
            clearInterval(timer);
        }
    }, 50);
    
    // addLetters
    function addLetter(){
        newString = newString + string.charAt(count);
        container.innerHTML = newString;
        count++;
    }
    
    // remove letter
    function removeLetter(char){
        char = char-1; // for readability, making it start at 1 index
        var array = newString.split("");
        var chosen = array[char];
        var beforeChosen = array.splice(0, char).join("");
        var afterChosen = array.splice(char-1, array.length).join("");
        var aTimer;
        removeTimeout = setTimeout(function(){
            clearTimeout(removeTimeout);
            return postLetter();
        }, 400);
        
        function postLetter(){
            container.innerHTML = beforeChosen + "<span class='removing'>" + chosen + "</span>" + afterChosen;
            newString = beforeChosen + afterChosen;
            aTimer = setTimeout(function(){
                container.innerHTML = beforeChosen + afterChosen;
                clearTimeout(aTimer);
            }, 400);
        }
    }
}