JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<button id="but">Start!</button>
<div id="div"></div>

JavaScript

//asynchronous callback function
//Created by Grimbode, aided by Kylian and Morgan
//Why do this? Why not.

var suffix,
    si = null,
    START = 'Start!',
    STOP = 'Stop!',
    but = document.getElementById('but'),
    div = document.getElementById('div'),
    p = document.createElement('p'),
    acb = function (callback) {
        //Using setTimeout to make it asynchronous
        setTimeout(function () {
            var data, arr = null;

            //do stuff here
            arr = dictionary[Math.floor((Math.random() * dictionary.length))];
            arr.c++;
                switch (arr.c) {
                    case 1:
                        suffix = 'st';
                        break;
                    case 2:
                        suffix = 'nd';
                        break;
                    case 3:
                        suffix = 'rd';
                        break;
                    default:
                        suffix = 'th';
                        break;
                }
                data = arr.m + ', for the ' + arr.c + suffix + ' time';
            //send info to the callback function when done
            callback(data);
        }, 0);
    },
    dictionary = [{
        m: 'Hey baby',
        c: 0
    }, {
        m: 'Hey sexy',
        c: 0
    }, {
        m: 'I love ponies',
        c: 0
    }, {
        m: 'Kylian plays pokemon',
        c: 0
    }, {
        m: 'Cedric tells Kevin to sign the sheet',
        c: 0
    }, {
        m: 'Morgan runs a command: `/dev/windows > /dev/null`',
        c: 0
    }];



but.onclick = function () {
    if(si == null){
        si = setInterval(function(){
            acb(function (data) {
                var cp = p.cloneNode();
                cp.innerHTML = data;
                div.appendChild(cp);
            });
        }, 500);
        but.innerHTML = STOP;
    }else{
        clearInterval(si);
        si = null;
        but.innerHTML = START;
    }
};