JSFiddle - React, Tailwind, and code Playground

by Kirouthika K

HTML

<div id="container"></div>
<p class="log"></p>
<p class="nearby"></p>
<p class="try"></p>

CSS

.circle {
  border-radius: 50%;
  position: absolute;
}

#container {
  width: 500px;
  height: 300px;
  position: relative;
  border: 3px solid #353535;
}

.nearby {
  color: purple;
  font-size: 25px;
}

JavaScript

/****************** reference *********************/
//----- http://jsfiddle.net/outis/bA8YE/1/ -------//
/****************** reference *********************/
function getRandomColor() {
  var colours = ["#00c0f1", "#add036", "#ec2426", "#ffc116"];
  return colours[Math.floor(Math.random() * 4)]
}
var maxDiam = 50;
var circleNum = 5;
var container = $("#container")
var containerWidth = container.width();
var containerHeight = container.height();


$(document).ready(function() {
  for (var i = 0; i < circleNum; i++) {
    var newCircle = $("<div />")
    var d = Math.floor(Math.random() * maxDiam) + 15;

    newCircle.addClass("circle");

    newCircle.css({
      width: d,
      height: d,
      left: Math.random() * Math.max(containerWidth - d, 0),
      top: Math.random() * Math.max(containerHeight - d, 0),
      backgroundColor: getRandomColor()
    });
    container.append(newCircle);
    $(".circle:first-child").css("border", "5px solid #550B9E");
  }

  $("#container").on("mousemove", function(event) {

    $(".log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
    //detect the mousehover event happened {{http://jsfiddle.net/roXon/dJgf4/}}
    $(".circle").mouseenter(function() {
      $('.nearby').text("pageX: " + event.pageX + ", pageY: " + event.pageY);
      var nearDivX = event.pageX;
      var nearDivY = event.pageY;
      /*newPosX = nearDivX + 10,
      newPosY = nearDivY + 10;*/
      $(this).css('top', newPosX);
      $(this).css('top', newPosY);
      
    });
    $(".circle").mouseleave(function() {
      $('.nearby').text(" ");
    });
  });

});