JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id="canvas"></div>

CSS

html, body{
  margin:0;
  padding:0;
}
#canvas{
  background:#345;
  width:530px;
  height:340px;
}

.circle{
  display:inline-block;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#fff;
  margin:0 20px 20px;
  position:relative;
  background:#fff;
}
.circle.active{
  background:#f00 !important;
}
.circle.inradius{
  background:#00f;
}
.circle i{
  box-sizing:border-box;
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  background:transparent;
  border-radius:50%;
  border:1px solid #000;
  display:none;
}

.circle.active i{
  display:block;
}

JavaScript

var canvas = document.getElementById('canvas');
var clickRadius = 100;
var circles = getCircles(canvas, 20);

canvas.addEventListener('click', function(e){
	if(e.target.classList.contains('circle')){
    circles.forEach(function(circle){
    	circle.className = 'circle';
    	if(inRadius(e.target, circle, clickRadius)){
      	circle.classList.add('inradius');
      }
    });
    e.target.classList.add('active');
  }
});


function getCircles(canvas, circlesQuantity){
	var l = circlesQuantity || 10;
  var circles = [];
  var radius = 30;
  for(var i = 0; i < l; i++){
  	var circle = document.createElement('div');
    circle.className = 'circle';
    canvas.appendChild(circle);
    circle.setAttribute('data-x', circle.offsetLeft + radius);
    circle.setAttribute('data-y', circle.offsetTop + radius);
    circle.setAttribute('data-r', radius);
    
    var r = document.createElement('i');
    console.log(clickRadius)
    circle.appendChild(r);
    r.style.width = clickRadius*2 + 'px';
    r.style.height = clickRadius*2 + 'px';
    r.style.marginTop = -clickRadius + 'px'; 
    r.style.marginLeft = -clickRadius + 'px'; 
    
    circles.push(circle);
  }
  return circles;
}



function inRadius(clickedCircle, circle, clickRadius){
	if(getLength(clickedCircle, circle) <= clickRadius + +circle.getAttribute('data-r')){
  	console.log( clickRadius + +circle.getAttribute('data-r'))
  	return true;
  }
}

function getLength(clickedCircle, circle){
	return Math.sqrt(Math.pow(clickedCircle.getAttribute('data-x') - circle.getAttribute('data-x'), 2) + Math.pow(clickedCircle.getAttribute('data-y') - circle.getAttribute('data-y'), 2));
}