JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div><span id="js-scramble-text"
    data-scramble-start="Smarter Faster."
    data-scramble-final="Sm##t#r F#st#r.">Smarter Faster.</span> <span class="finished">This is our DNA.</span></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(randomText[i] == " " || randomText[i] == "."){
                    } else{
                        if(random(0,5) < 3){
                            randomText[i] = randomLetter().toUpperCase();
                        } else{
                            randomText[i] = randomLetter();
                        }
                    }
                }
                finishText[i].current++;
            } else if(finishText[i].current == finishText[i].max){
                sectionFinished++;
                console.log(sectionFinished);
                if(endText[i] != deleteChar){
                    randomText[i] = "<span class='finished'>"+startText[i]+"</span>";
                } else{
                    randomText[i] = "<span class='finished'>"+"</span>";
                }
            }
            if(sectionFinished >= randomText.length){
                clearInterval(interval);
            }
        }
        container.html(randomText);
    }
    
    function randomEnding(){
        finishText = startText.clone();
        for(var fi = 0; fi <...