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_E_Actions_Behaviors" class="resize-container_E">
  <span class="heading"> Eroticism </span>
  <div id="Porn_E_Actions_Behaviors" class="resize-drag">
  <span id="Porn_Ea">Porn</span><span id="Porn_Eb">50%</span>
  </div>
  <div id="Fantasy_E_Actions_Behaviors" class="resize-drag">
    <span id="Fantasy_Ea">Fantasy</span><span id="Fantasy_Eb">50%</span>
  </div>
  <div id="In_Person_E_Actions_Behaviors" class="resize-drag">
 <span id="In_Person_Ea">In Person</span><span id="In_Person_Eb">50%</span>
  </div>
</div>
  <button id= "NextButton">Submit
</button>

CSS

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

  /* 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;
}



#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;
}


#sNextButton {
  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: 0px 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;
}


#Fantasy_E {
  background-color: #f1cf23;
  top: 156px;
  left: 40px;
  position: absolute;
}

#Fantasy_E span#Fantasy_Ea {
  display: inline;
}

#Fantasy_E:hover span#Fantasy_Ea {
  display: none;
}

#Fantasy_E span#Fantasy_Eb {
  display: none;
}

#Fantasy_E:hover span#Fantasy_Eb {
  display: inline;
}



#In_Person_E {
  background-color: #f14723;
  top: 156px;
  left: 200px;
  position: absolute;
}

#In_Person_E span#In_Person_Ea {
 ...

JavaScript

//PornE Global Start Values
var Porn_E_Actions_Behaviors_radius = document.getElementById("Porn_E_Actions_Behaviors").clientWidth/2;
var Porn_E_Actions_Behaviors_start = findCentroid(getPos1(Porn_E_Actions_Behaviors), getPos2(Porn_E_Actions_Behaviors));
var Porn_E_Actions_Behaviors_startx=  Porn_E_Actions_Behaviors_start.x2;
var Porn_E_Actions_Behaviors_starty= Porn_E_Actions_Behaviors_start.y2;


//FantasyE Global Start Values
var Fantasy_E_Actions_Behaviors_radius = document.getElementById("Fantasy_E_Actions_Behaviors").clientWidth/2;
var Fantasy_E_Actions_Behaviors_start = findCentroid(getPos1(Fantasy_E_Actions_Behaviors), getPos2(Fantasy_E_Actions_Behaviors));
var Fantasy_E_Actions_Behaviors_startx= Fantasy_E_Actions_Behaviors_start.x2;
var Fantasy_E_Actions_Behaviors_starty= Fantasy_E_Actions_Behaviors_start.y2;

//InPersonE Global Start Values
var In_Person_E_Actions_Behaviors_radius = document.getElementById("In_Person_E_Actions_Behaviors").clientWidth/2;
var In_Person_E_Actions_Behaviors_start =  findCentroid(getPos1(In_Person_E_Actions_Behaviors), getPos2(In_Person_E_Actions_Behaviors));
var In_Person_E_Actions_Behaviors_startx= In_Person_E_Actions_Behaviors_start.x2;
var In_Person_E_Actions_Behaviors_starty= In_Person_E_Actions_Behaviors_start.y2;




//Global Coordinate Dictionaries
var CoordinatesX_E = {
  Porn_E_Actions_Behaviors: Porn_E_Actions_Behaviors_startx,
  Fantasy_E_Actions_Behaviors: Fantasy_E_Actions_Behaviors_startx,
  In_Person_E_Actions_Behaviors: In_Person_E_Actions_Behaviors_startx
};


var CoordinatesY_E = {
  Porn_E_Actions_Behaviors: Porn_E_Actions_Behaviors_starty,
  Fantasy_E_Actions_Behaviors: Fantasy_E_Actions_Behaviors_starty,
  In_Person_E_Actions_Behaviors: In_Person_E_Actions_Behaviors_starty
};

//Global Intersection Dictionaries:

var Porn_Intersections = {Porn_Area: (Math.PI * (Porn_E_Actions_Behaviors_radius * Porn_E_Actions_Behaviors_radius)), Porn_Minus_Fantasy: 0, Porn_Minus_In_Person: 0,...