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>
<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;
 ...

JavaScript

//PornE Global Start Values

var N_or_E, rect, x_rectE, y_rectE, x_rectN, y_rectN;
var Porn_E_radius = 100;
var Porn_E_start = document.getElementById("Porn_E").getBoundingClientRect();
var Porn_E_startx= Porn_E_start.left + window.scrollX;
var Porn_E_starty= Porn_E_start.top + window.scrollY;

//PornN Global Start Values
var Porn_N_radius = 100;
var Porn_N_start = document.getElementById("Porn_N").getBoundingClientRect();
var Porn_N_startx= Porn_N_start.left + window.scrollX;
var Porn_N_starty= Porn_N_start.top + window.scrollY;

//FantasyE Global Start Values
var Fantasy_E_radius = 100;
var Fantasy_E_start = document.getElementById("Fantasy_E").getBoundingClientRect();
var Fantasy_E_startx= Fantasy_E_start.left + window.scrollX;
var Fantasy_E_starty= Fantasy_E_start.top + window.scrollY;
//FantasyN Global Start Values
var Fantasy_N_radius = 100;
var Fantasy_N_start = document.getElementById("Fantasy_N").getBoundingClientRect();
var Fantasy_N_startx= Fantasy_N_start.left + window.scrollX;
var Fantasy_N_starty= Fantasy_N_start.top + window.scrollY;

//InPersonE Global Start Values
var In_Person_E_radius = 100;
var In_Person_E_start = document.getElementById("In_Person_E").getBoundingClientRect();
var In_Person_E_startx= In_Person_E_start.left + window.scrollX;
var In_Person_E_starty= In_Person_E_start.top + window.scrollY;

//InPersonN Global Start Values
var In_Person_N_radius = 100;
var In_Person_N_start = document.getElementById("In_Person_N").getBoundingClientRect();
var In_Person_N_startx= In_Person_N_start.left + window.scrollX;
var In_Person_N_starty= In_Person_N_start.top + window.scrollY;

//Global dictionary ID
var dict_id;
//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:...