JSFiddle - React, Tailwind, and code Playground

by shmish

HTML

<body>Is this it?
    <button id="go">&raquo; Run</button>
    <button id="stop">&raquo; Stop</button>
    <div id="randomFloat">Is it??</div>

CSS

.randomFloat {
    color: red;
    transition: 0.5s left, 0.5s top;
}

JavaScript

var nameArray = [
    "Jimmy",
    "Sonny",
    "Sammy",
    "Henry",
    "Hank",
    "Susan",
    "Sebby",
    "Alyssa",
    "Pepper",
    "Ken",
    "Steve",
    "Kandi",
    "Wes"
    ];
var numberStudents = nameArray.length;
  var interval;  
  for(n = 0; n < numberStudents; n++){
        var divName = "#floatName" + n;
        console.log(divName);
        var names = nameArray[n];
        var divTag = document.createElement('div');
        divTag.id = divName;
        divTag.innerHTML = names;
        divTag.style.position = "absolute";
        divTag.className = "randomFloat";
        document.body.appendChild(divTag);
  };

  $( document ).on('click', '#go', function() {
    var gotime = 1;
    interval = setInterval(function () {
      for(i = 0; i < 12; i++){
        var nameofDiv = "#floatName" + i;
        console.log(nameofDiv);
        $( nameofDiv ).animate({
        	left: Math.random()*500 + "px",
        	top: Math.random()*500 + "px"
        });
      };
      gotime += 1;
      if (gotime > 100) {
        clearInterval(interval);
      }
    }, 500) 
  });

  $( "#stop" ).click(function() {
        clearInterval(interval);
  });