JSFiddle - React, Tailwind, and code Playground

by Gary Pyne

HTML

<h1 id="demo" class="pulsate">
  test1
</h1>
<h1 id="showname">
Name
</h1>

<button onclick="randomNum()">Click me</button>


<script>
var array = (null, Array(100))
var names = ["","Gary", "John", "Sue"];
var delay = 80;
var i = 0;
var result = 0;
var winname = ""

function randomNum() {
console.log()
  var refreshIntervalId = setInterval(function() {
    length = array.length
    if (i < (array.length + 1)) {

  result = document.getElementById("demo").innerHTML =
        Math.floor(Math.random() * 4) + 1;
        
       winname = names[result];
       document.getElementById("showname").innerHTML = winname;


      //   $("h1").text("Processing #" + i);
    } else {
      document.getElementById("demo").style.color = "orange";
      document.getElementById("demo").style.fontSize = "50px";

clearInterval(refreshIntervalId)

    }

    i++

  }, delay)
}
</script>

CSS

.pulsate {
  -webkit-animation: pulsate 0.5s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 1;
}

@-webkit-keyframes pulsate {
  0% {
    /* opacity: 0.5; */
    color: #f46624;
  }
  100% {
    /*   opacity: 0.5; */
    color: #ffa981;
  }
}