JSFiddle - React, Tailwind, and code Playground

by kristenconnal

HTML

<div id="container"></div>

CSS

body {
    width: 1000px;
    height: 750px;
    margin: auto;
}
.dot {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
}

JavaScript

/*
 * This fuction displays the dots on the page.
 *
 * @param   pointsArray - Array containing the [top,left] dot positions
 * @param   colorsArray - Array of Colors
 * @param   maxDots     - max number of Array elements
 */
function displayDots(pointsArray, colorsArray, maxDots) {
    var container = document.getElementById('container');
    container.innerHTML = "";

    for (var i = 0; i < maxDots; i++) {
        // get current element from the Array
        var element = pointsArray[i]; // this is a two-dimensional Array [top,left]
        var top     = element[0];     // first element in two-dim Array
        var left    = element[1];     // second element
        
        // get color
        var color = colorsArray[i];

        // create new div element
        var dot = document.createElement('div');

        // assign attribute prop to new div element
        dot.id = "dot_" + i;
        dot.style.top  = top + "px";
        dot.style.left = left + "px";
        dot.className = "dot";
        dot.style.backgroundColor = color;

        // create new textNode
        var txtNode = document.createTextNode(i + 1);

        // add textNode to div
        dot.appendChild(txtNode);

        // add new div element to the container element
        container.appendChild(dot);
    }
}

/*
 * This fuction populates the pointsArray top/left positions
 * for the number of dots passed in the maxDots param.
 *
 * @param   maxDots     - max number of Array elements
 * @return  dotsArray   - Array containing maxDots number of [top, left] positions in two-dimensional Arrays
 */
function getDots(maxDots) {
    var dotsArray = [];
    var TOP_MAX   = 250;
    var LEFT_MAX  = 1000;

    for (var i = 0; i < maxDots; i++) {
        // http://www.w3schools.com/jsref/jsref_random.asp
        // http://www.w3schools.com/jsref/jsref_floor.asp
        var top  = Math.floor((Math.random() * TOP_MAX));
        var left = Math.floor((Math.random() * LEFT_MAX));

        //...