JSFiddle - React, Tailwind, and code Playground

by jude_pinto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<button id= "button_E">Reset
</button>
<div id="container_1" class="resize-container_E">
  <span class="heading"> Eroticism </span>
  <div id="Porn_E" class="resize-drag">
  <span id="Porn_Ea">Porn</span><span id="Porn_Eb">100%</span>
  </div>
  <div id="Fantasy_E" class="resize-drag">
    <span id="Fantasy_Ea">Fantasy</span><span id="Fantasy_Eb">100%</span>
  </div>
  <div id="In_Person_E" class="resize-drag">
 <span id="In_Person_Ea">In Person</span><span id="In_Person_Eb">100%</span>
  </div>
</div>
<button id= "button_N">Reset
</button>
<div id="container_2" class="resize-container_N">
  <span class="heading"> Nurturance </span>
  <div id="Porn_N" class="resize-drag">
      <span id="Porn_Na">Porn</span><span id="Porn_Nb">100%</span>
  </div>
  <div id="Fantasy_N" class="resize-drag">
      <span id="Fantasy_Na">Fantasy</span><span id="Fantasy_Nb">100%</span>
  </div>                                                                                        
  <div id="In_Person_N" class="resize-drag">
    <span id="In_Person_Na">In Person</span><span id="In_Person_Nb">100%</span>
  </div>
  <button id= "submit_button">Submit
</button>
</div>

CSS

.resize-drag {
  /* shape parameters */
  border-radius: 50%;
  width: 200px;
  height: 200px;
  min-height: 1px;
  min-width: 1px;
  max-height: 200px;
  max-width: 200px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  opacity: 0.5;
  align-items: auto;

  /* positioning */
  position: absolute;

  /* text location */
  display: flex;
  justify-content: center;
  align-items: center;

  /* This makes things *much* easier */
  box-sizing: border-box;

  /* font */
  color: black;
  font-family: sans-serif;
  font-size: 18px;
  user-select: none;
  touch-action: none;
}

.resize-container_E {
  display: inline-block;
  width: 450px;
  height: 400px;
  border-style: solid;
  text-align: center;
  position: relative;
}

.resize-container_N {
  display: inline-block;
  width: 450px;
  height: 400px;
  border-style: solid;
  text-align: center;
  position: relative;
}

#button_E {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
}


#button_N {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin-top: 50px;
}

#submit_button {
  background-color: #C70039; /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin: 330px 480px 100px;
}

.heading {
  color: black;
  font-family: sans-serif;
  font-size: 22px;
}

#Porn_E {
  background-color: #23b3f1;
  left: 122px;
  position: absolute;
}

#Porn_E span#Porn_Ea {
  display: inline;
}

#Porn_E:hover span#Porn_Ea {
  display: none;
}

#Porn_E span#Porn_Eb {
  display: none;
}

#Porn_E:hover span#Porn_Eb {
  display: inline;
}


#Porn_N {
  background-color: #23b3f1;
  left: 122px;
  position:...

JavaScript

//PornE Global Start Values
var Porn_E_radius = 100;
var Porn_E_start = getPos(Porn_E);
var Porn_E_startx=  Porn_E_start.x;
var Porn_E_starty= Porn_E_start.y;

//PornN Global Start Values
var Porn_N_radius = 100;
var Porn_N_start = getPos(Porn_N);
var Porn_N_startx= Porn_N_start.x;
var Porn_N_starty= Porn_N_start.y;

//FantasyE Global Start Values
var Fantasy_E_radius = 100;
var Fantasy_E_start = getPos(Fantasy_E);
var Fantasy_E_startx= Fantasy_E_start.x;
var Fantasy_E_starty= Fantasy_E_start.y;
//FantasyN Global Start Values
var Fantasy_N_radius = 100;
var Fantasy_N_start = getPos(Fantasy_N);
var Fantasy_N_startx= Fantasy_N_start.x;
var Fantasy_N_starty= Fantasy_N_start.y;

//InPersonE Global Start Values
var In_Person_E_radius = 100;
var In_Person_E_start = getPos(In_Person_E);
var In_Person_E_startx= In_Person_E_start.x;
var In_Person_E_starty= In_Person_E_start.y;

//InPersonN Global Start Values
var In_Person_N_radius = 100;
var In_Person_N_start = getPos(In_Person_N);
var In_Person_N_startx= In_Person_N_start.x;
var In_Person_N_starty= In_Person_N_start.y;



//Global Coordinate Dictionaries


var CoordinatesX_E = {
  Porn_E: Porn_E_startx,
  Fantasy_E: Fantasy_E_startx,
  In_Person_E: In_Person_E_startx
};

var CoordinatesX_N = {
  Porn_N: Porn_N_startx,
  Fantasy_N: Fantasy_N_startx,
  In_Person_N: In_Person_N_startx
};
var CoordinatesY_N = {
  Porn_N: Porn_N_starty,
  Fantasy_N: Fantasy_N_starty,
  In_Person_N: In_Person_N_starty
};

var CoordinatesY_E = {
  Porn_E: Porn_E_starty,
  Fantasy_E: Fantasy_E_starty,
  In_Person_E: In_Person_E_starty
};

//Call this function from within your .on('dragmove') method.
//It should replace your translations.



function areaOfIntersection(Ax, Ay, Ar, Bx, By, Br)
{
  var d = Math.hypot(Bx - Ax, By - Ay);
  
  if (d < Ar + Br){
  var a = Ar * Ar;
  var b = Br * Br;
  
  var x0 = (a - b + d * d) / (2*d);
  var z0 = x0*x0;
  var y0 = Math.sqrt(a-z0);
  
  if (d < Math.abs(Br - Ar)) {
  	return Math.PI * Math.min(a,b);
...