JSFiddle - React, Tailwind, and code Playground

by patrickfd

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px"></div>

<div id="Progress"><div id="Bar"></div></div>

<button onclick="move()">Click Me</button>

CSS

#Progress {
  width: 500px;
  background-color: #ddd;
}

#Bar {
  width: 0%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 30px;
  color: white;
}

JavaScript

const unsortedPoints = {
   100: 83,
   130: 100,
   20:  17,
   0:   0,
   50:  50,
};




function getPercent(x, samplingPoints) {
  const sortedXCoordinates = Object.keys(samplingPoints).sort((a, b) => a-b);
  var xLowerBound = 0;
  var yLowerBound = 0;
  
  var xUpperBound = 0;
  var yUpperBound = 0;

  if (x < 0) {
    return 0;
  }

  for (var i = 0; i < sortedXCoordinates.length - 1; i++) {
    if ((x >= sortedXCoordinates[i]) && (x < sortedXCoordinates[i + 1])) {
      xLowerBound = sortedXCoordinates[i];
      yLowerBound = samplingPoints[xLowerBound];

      xUpperBound = sortedXCoordinates[i+1];
      yUpperBound = samplingPoints[xUpperBound];


      var percent = (yUpperBound - yLowerBound) / (xUpperBound - xLowerBound) * (x - xLowerBound) + yLowerBound;

      return percent;
    }
  }

  return 100;

}





/*
  _____ _____ _____ _________     __
 |  __ \_   _|  __ \__   __\ \   / /
 | |  | || | | |__) | | |   \ \_/ / 
 | |  | || | |  _  /  | |    \   /  
 | |__| || |_| | \ \  | |     | |   
 |_____/_____|_|  \_\ |_|     |_|   
*/                                    
                                    

const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-15, 120, 160, -15],
  axis: true
});

var graph = board.create('functiongraph', [function(x) {
  return getPercent(x, unsortedPoints);
}, -15, 160], {
  strokewidth: 2
});
var movingPoint = board.create('point', [0, 0], {
  face: 'circle',
  size: 2,
  name: ''
});

for (var x in unsortedPoints) {
  board.create('point', [x, unsortedPoints[x]], {
    fixed: true,
    name: "(" + x + "|" + unsortedPoints[x] + ")"
  });
}

function roundToInt(num) {
  return +(Math.round(num + "e+0") + "e-0");
}

var i = 0;

function move() {
  if (i == 0) {
    var elem = document.getElementById("Bar");
    var width = roundToInt(getPercent(i, unsortedPoints));
    i = 1;
    var id = setInterval(frame, 30);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
   ...