JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE HTML>
<HTML>
<head>
	<title>XEN Max Term Graph</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
	<h1>XEN Max Term Calculator</h1>
  
  	<div>
		<label>Global Rank:</label><br>
		<input type="range" min="1000" max="100000000000" step="1000" id="globalRankInput" value="6000">
		<input type="number" value="6000" min="1000" max="100000000000" step="1000" id="globalRankNumberInput">
	</div>

	<div>
		<label>Max Term:</label>
		<output id="maxTermOutput"></output>
	</div>
  
	<canvas id="myChart" width="400" height="150"></canvas>

	<script>
  
  function abbreviateNumber(num,digits) {
    let units = [' Thousand', ' Million', ' Billion', ' Trillion', ' Quadrillion', ' Quintillion', ' Sextillion', ' Yotta'];
    let floor = Math.floor(Math.abs(num).toString().length / 3);
    let value=+(num / Math.pow(1000, floor))
    return value.toFixed(value > 1?digits:2) + units[floor - 1];

}

   function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}
  
  		let globalRankInput = document.getElementById("globalRankInput");
		let globalRankNumberInput = document.getElementById("globalRankNumberInput");
		
		// Update value in input box when slider is moved
		globalRankInput.addEventListener("input", function() {
			globalRankNumberInput.value = globalRankInput.value;      
		});
		
		globalRankNumberInput.addEventListener("input", function() {
			globalRankInput.value = globalRankNumberInput.value;      
		});
		
		// Calculate max term when either slider or input box is changed
		globalRankInput.addEventListener("input", function() {
			let maxTerm = _calculateMaxTerm(globalRankInput.value);
			document.getElementById("maxTermOutput").innerHTML = `<b>${maxTerm} days</b> (for Global Rank: ` + numberWithCommas(parseInt(globalRankNumberInput.value)) + ')';
     ...