JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<html>
<head>
  <title>XEN Crypto Reward Calculator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  
  // Initialize Variables
  var VMU = 1;
  var MintTerm = 1;
  var cRankDelta = 1;
  var AMP = 3000;
  var EAA = 10;
  
  // Calculate Reward
  function calculateReward() {
  reward = VMU * MintTerm * Math.log2(cRankDelta) * AMP * (EAA/100);
  return reward;
  }
  
  $(document).ready(function(){
  // Calculate reward on page load
  var reward = calculateReward();
  $('#reward').text(reward);
  
  // Update reward when slider value changes
  $('input[type="range"]').change(function(){
  // Update VMU
  VMU = $('#walletSlider').val();
  // Update MintTerm
  MintTerm = $('#termSlider').val();
  // Update cRankDelta
  cRankDelta = $('#rankSlider').val();
  // Update reward
  var reward = calculateReward();
  $('#reward').text(reward);
  });
  
  // Update reward when inputs are changed
  $('input[type="number"]').change(function(){
  // Update AMP
  AMP = $('#ampInput').val();
  // Update EAA
  EAA = $('#eaaInput').val();
  // Update reward
  var reward = calculateReward();
  $('#reward').text(reward);
  });
  
  });
  
  </script>
</head>
<body>
  <h1>XEN Crypto Reward Calculator</h1>
  <h2>Reward: <span id="reward"></span></h2>
  
  <h3>Number of Wallet Addresses (VMU)</h3>
  <input type="range" id="walletSlider" min="1" max="128" value="1"/>
  
  <h3>Mint Term</h3>
  <input type="range" id="termSlider" min="1" max="500" value="1"/>
  
  <h3>cRankDelta</h3>
  <input type="range" id="rankSlider" min="1" max="10000000" value="1"/>
  
  <h3>AMP</h3>
  <input type="number" id="ampInput" min="1" value="3000"/>
  
  <h3>EAA</h3>
  <input type="number" id="eaaInput" min="1" value="10"/>
  
</body>
</html>