JSFiddle - React, Tailwind, and code Playground

by sajjansarkar

HTML

<input type="text" id="NoOfCircles" placeholder="Enter no of circles">
<div class='circle-container'></div>

CSS

.circle {
    width:2em;
    height:2em;
    border-radius:50%;
    background-color:orange;
}
.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: dashed 1px;
    border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-container div {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
    /* 2em = 4em/2 */
    /* half the width */
}

JavaScript

$(function () {
    /* add onchange listener */
    $("#NoOfCircles").change(function () {
        /* get the value in the textbox */
        var noOfCircles = $("#NoOfCircles").val();
        /* equally divide 360 by the no of circles to be drawn */
        var degreeAngle = 360 / noOfCircles;
        /* get handle on the wrapper canvas */
        var wrapper = $(".circle-container");
        /* clear it first */
        wrapper.html("");
        /* initialize angle incrementer variable */
        var currAngle = 0;
        /* draw each circle at the specified angle */
        for (var i = 0; i < noOfCircles; i++) {
            /* add to the wrapper */
            wrapper.append(getDiv(currAngle));
            /* increment the angle incrementer */
            currAngle = currAngle + degreeAngle;
        }

    });
    /*
        Function returns a new DIV with the angles translation using CSS.
        It also applies a random color for fun.
        stole the CSS from :http://stackoverflow.com/questions/12813573/position-icons-into-circle
    */
    function getDiv(currAngle) {
        return "<div class='circle' style='transform: rotate(" + currAngle + "deg) translate(12em) rotate(-" + currAngle + "deg);background-color:" + getRandomColor() + "'></div>"

    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

});