JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div id="center"></div>

CSS

#center {
    width:300px;
    height:220px;
    border-radius:100%;
    background: black;
    position:relative;
    left:200px;
    top:100px;
}

.point {
    width:24px;
    height:24px;
    border-radius:12px;
    background: blue;
    position:absolute;
}

.point.boll:after,
.point.bollLeft:after,
.point.center:after{
    content:"testing the text here";
    white-space: pre;
    position:absolute;
    border:1px solid red;
    margin-left:24px;
}

.point.bollLeft:after {
    margin-right:24px;
    right:0; 
}

.boll {
    border:1px solid green;
}

.side {
    position:absolute;
    height:100%;
}

.side.left {
    border:1px solid red;
    width:100%;
    left:-100%;
}

.side.right {
    border:1px solid green;
    width:100%;
    right:-100%;
}

.side.center {
    border:1px solid green;
    width:100%;
}

.point.center:after{
   left:50%;
   margin-left:0;
   transform:translateX(-50%)
}

JavaScript

var array = ["apple", "orange", "mango", "banana", "pineApple"];
var leftMin = 135;
var leftMax = 225;
var leftSpace = leftMax - leftMin;
console.log( leftSpace/2 + 135);

var rightMin = -45;
var rightMax = 45;
var rightSpace = rightMax - rightMin;
var value = 0;
var divideLength = 0;


var values = [135,155,175,205,225, -45,-25, 5, 25, 45];
var element = $('#center');
var width = element.width()/2;
var height = element.height()/2;

var isOdd = array.length % 2 === 1 ? true : false;

var spaceMaker = function () {
	if(isOdd) {
    	divideLength = array.length-1 / 2;
    }

    return value	=  	leftSpace / 2 ;
    
}

spaceMaker();

var point = 12;
for(var i = 0; i < array.length; i++) {
    
  $(document.createElement('div')).addClass(function(){
      
      if(i===0 && isOdd) {
      	//value = 270;
        return 'center';
      }
      
      if( i % 2 === 0 ) {
        value += (value );
        //console.log( "value", value);
      }
      
      if( i % 2 === 1 ) {
      	//console.log("right", array[i] );
      }
      
      if(values[i] < 90){
      	return 'boll';
      }
      
      return 'bollLeft'
  	
  }).css({
    left: width - 12 + (width+point) * Math.cos(value * Math.PI / 180),
    top: height - 12 + (height+point) * Math.sin(value * Math.PI / 180)
  }).addClass('point').appendTo("#center");
}