JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<div class="button">start</div>

<div class="counter"></div>

CSS

.button, .counter {
    width: 80%;
    height: 60px;
    margin: 60px auto;
    background-color: #000;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 60px;
    font-size: 2rem;
  }
  .counter {
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
  }

JavaScript

var myArray = ['a','b','c','d','e','f','g'];
function play(status) {

  if (status === "stop") { }

  var playLoop = function(i) {
      if (myArray[i]) {
          setTimeout(function(){
              playLoop(i+1);
              $('.counter').text(i + myArray[i]);
          }, 1000);
      }
  }
playLoop(0);
}

var button = 1;
$('.button').click(function() {
	switch (button) {
	case 1:
  // start
		$(this).text("stop");
    play("play");
		button = 2;
		break;
	case 2:
  // stop
		$(this).text("start");
    play("stop");
		button = 1;
		break;
	}
});