JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<input type="button" id="moveDivs" value="Start move"/>
<input type="button" id="stopMoveDivs" value="Stop move"/>

JavaScript

/**
  *  2. Write a script that creates 5 div elements and moves them in circular path
  *  with interval of 100 milliseconds.
  *  The task mean ' with interval of 100 milliseconds ' otherwise 
  *  I will use this:
  *  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  *  The Paul Irish solution is much smarter for animation but calculates interval 
  *  every time.
  **/
(function() {
	"use strict";
    var radius = 100;
	var left, tops, holderDiv;
	var lineWidth = 6;
	var movingDivs = false;
    var step = 360 / 12;
	var circleDiameter = 36;

	function randomFromTo(from, to) {
		return Math.floor(Math.random() * (to - from + 1) + from);
	};

	function drawCircle() {
		for (var i = 0; i <= 360; i++) {
			var x = Math.floor((left + radius * Math.cos(i * Math.PI / 180)) - (lineWidth / 2));
			var y = Math.floor((tops + radius * Math.sin(i * Math.PI / 180)) - (lineWidth / 2));
			var circle = document.createElement("div");
			circle.style.position = 'absolute';
			circle.style.left = x + "px";
			circle.style.top = y + "px";
			circle.style.width = lineWidth + "px";
			circle.style.height = lineWidth + "px";
			circle.style.backgroundColor = "black";
			holderDiv.appendChild(circle);
		}
	};

	function generateDivs() {
		for (var i = 0; i <= 360; i += step) {
			var x = Math.floor((left + radius * Math.cos(i * Math.PI / 180)) - (circleDiameter / 2));
			var y = Math.floor((tops + radius * Math.sin(i * Math.PI / 180)) - (circleDiameter / 2));
			var circle = document.createElement("div");
			circle.className = "circleElement" + i;
			circle.style.position = 'absolute';
			circle.style.left = x + "px";
			circle.style.top = y + "px";
			circle.style.borderRadius = 50 + "%";
			circle.style.width = circleDiameter + "px";
			circle.style.height = circleDiameter + "px";
			circle.style.backgroundColor = "rgb(" + randomFromTo(0, 255) + "," + randomFromTo(0, 255) + "," + randomFromTo(0, 255) +...