JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

Welcome to your <span class="js-typing" data-adjectives="Funny, Cool, Awesome, Great">New</span> WEBSITE

CSS

body{
    text-transform: uppercase;
}

JavaScript

replaceText();

function replaceText(){
    $(".js-typing").each(function(){
        var element = $(this);
        var adjectives = element.data("adjectives").split(",");
        adjectives.unshift(element.html());
        var activeAdj = 0;
        
        // removes first space from additional adjectives
        for(var i = 0; i < adjectives.length; i++){
            var adj = adjectives[i];
            if(adj.charAt(0) == " "){
                adj = adj.slice(1,adj.length);
            }
            adjectives[i] = adj;
            
        }
        
        deleteText();
        
        function deleteText(){
            var count = 0;
            var length = adjectives[activeAdj].length;
            var timer;
            
            var adj = adjectives[activeAdj];
            timer = setInterval(function(){
                if(count > length){
                    removeLetter();
                    count++;
                } else{
                    clearInterval(timer);
                }
            },100);
            
            function removeLetter(){
                adj = adj.slice(0,adj.length-1);
                element.html(adj);
            }
        }
    });
}