JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<div class="wrapper">
     <h1></h1>
</div>

JavaScript

(function (exports) {

    function Typewriter() {}

    Typewriter.prototype = {

        start: function (options) {
            key = Math.floor(Math.random() * options.text.length) + 1;
            
            var text = options.text[key],
                splitText = this._splitChars(text);
            options.element.textContent = '';
            if (splitText.length) {
                this.insertSingle(options.element, splitText, options.speed, options.delay);
            }
        },

        insertSingle: function (el, text, speed, delay, key) {
            var self = this,
                chr, 
                length, 
                rSpeed = speed;

            (function addChar() {
                setTimeout(function () {
                    length = text.length;
                    chr = text.pop();
                    if (length) {
                        var write = window.options.element.textContent + chr;
                        window.options.element.textContent = write;
                        addChar();
                    } else {
                        setTimeout(function() {
                            self.untype(el, speed);
                        }, delay)
                    }
                }, speed);
            }());
        },
        _splitChars: function (text) {
            return text.split('').reverse();
        },
        untype: function (el, speed) {
            var self = this;
            untyping = setInterval(function() {
                if(window.options.element.innerHTML.length) {
                    window.options.element.innerHTML = window.options.element.innerHTML.slice(0, - 1);
                } else {
                    window.clearInterval(untyping);
                    options = (window.options);
                   self.start(options)
                }
            }, speed);
        }
    };
    exports.Typewriter = new Typewriter();
}(window));

options = {
    element : document.querySelectorAll('h1')[0],
...