JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div id="js-scramble-text" data-scramble-final="Open Source">The Charles</div>

CSS

body{
    font-family: monospace;
    color: #999;
    text-align: center;
}
.finished{
    color: #333;
}

JavaScript

Array.prototype.clone = function() {
	return this.slice(0);
};

var scrambler = function(){
    var alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
    var deleteChar = "#";
    var container = $("#js-scramble-text");
    var startText = container.html().split("");
    var endText = container.data("scramble-final");
    var finishText, interval, intervalCount = 0;
    
    setTimeout(function(){
        randomEnding();
        randomString();
        interval = setInterval(function(){
            randomString();
        }, 100);
    }, 200);
    
    function randomString(){
        var sectionFinished = 0;
        var randomText = startText.clone();
        for(var i = 0; i < randomText.length; i++){
            if(finishText[i].current < finishText[i].max){
                if(finishText[i].current > finishText[i].start){
                    if(random(0,5) < 3){
                        randomText[i] = "<span>"+randomLetter().toUpperCase()+"</span>";
                    } else{
                        randomText[i] = "<span>"+randomLetter()+"</span>";
                    }
                }
                finishText[i].current++;
            } else if(finishText[i].current == finishText[i].max){
                sectionFinished++;
                console.log(sectionFinished);
                if(endText[i] != deleteChar){
                    randomText[i] = "<span class='finished'>"+endText[i]+"</span>";
                } else{
                    randomText[i] = "";
                }
            }
            if(sectionFinished >= randomText.length){
                clearInterval(interval);
            }
        }
        container.html(randomText);
    }
    
    function randomEnding(){
        finishText = startText.clone();
        for(var fi = 0; fi < finishText.length; fi++){
            finishText[fi] = {};
            finishText[fi].start = random(0,25);
           ...