JSFiddle - React, Tailwind, and code Playground

by Brad Chesney

HTML

<div id="spr"></div>
<div id="spz"></div>
<!--
See the document.ready block to see how to instantiate the code.

To use the feature, enter text into the textarea and then removing your cursor from the textarea (ex tab advancing from the textarea, clicking anywhere outside the text area, and in general changing the focus from the text area to anything else...).
-->

JavaScript

var RustySpritz = function (uniqueInstanceId) {
    var that = this,
        spritzContainer = $('#' + uniqueInstanceId)[0];
    //let's create a property to represent the element we will be working in
    this.uniqueInstanceId = uniqueInstanceId;
    this.spritzContainer = spritzContainer;

    //let's set up our object's configurable default properties
    var wpm = 650,
        fontColor = 'FFFFFF',
        locusColor = 'DE7102',
        backColor = '000000';
    this.wpm = wpm;
    this.fontColor = fontColor;
    this.locusColor = locusColor;
    this.backColor = backColor;

    //and a few default processing properties
    var status = 'waiting';
    this.status = status;
    var currentWord = 0;
    this.currentWord = currentWord;
    var wordsArray = [[]];
    this.wordsArray = wordsArray; //won't know this until we get some text to be parsed
    var totalWords = '';
    this.totalWords = totalWords; //won't know this until we get some text to be parsed
    var part = [];
    var wordPartsArray = [[]];
    this.wordPartsArray = wordPartsArray; //won't know this until we get some text to be parsed

    //now we will begin building the structure of the tool using the base element
    var wordsDiv =  $('<div>').attr('id', 'words' + uniqueInstanceId).appendTo(spritzContainer);
    for (var i = 0; i < 3; i++) {
        part[i] = $('<span>').attr({'id': 'part' + i + uniqueInstanceId,'class': 'spritzed'}).appendTo(wordsDiv);
    }
    var buttonDiv = $('<div>').attr('id', 'buttons' + uniqueInstanceId).appendTo(spritzContainer);
    var readButton = $('<button>').attr('id', 'read' + uniqueInstanceId).html('Read').appendTo(buttonDiv);
    var pauseButton = $('<button>').attr('id', 'pause' + uniqueInstanceId).html('Pause/Options').appendTo(buttonDiv);
    var restartButton = $('<button>').attr('id', 'restart' + uniqueInstanceId).html('Restart').appendTo(buttonDiv);
    var settingsDiv = $('<div>').attr('id', 'settings' + uniqueInstanceId).appendTo(spritzContainer);
...