JSFiddle - React, Tailwind, and code Playground

by replicateur

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="switch">Run</button>
<div id="board"></div>
<div id="graph">
</div>

CSS

#board {
  margin-top: 1em;
}

.switch {
  width: 100px;
  text-align: center;
  border-radius: 131px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

#graph {
  width: 320px;
  height: 240px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
}

JavaScript

var count = 0;
var total = 0.0;
var is_running = false;
var bar = '<div class="bar"></div>';

function animate() {
  // stuff for animating goes here
  var score = Math.random();
  total += score;
  document.getElementById('board').innerHTML = score;
  if (count >= 50) {
    var tmpBar = $(bar).css({
      "height": total * 10 + 'px',
      "width": 10 + 'px',
      "background": "red",
      "float": "left"
    });
    if ($('.bar').length > 31) {
      $('.bar').remove();
    }
    $('#graph').append(tmpBar);
    count = 0;
    total = 0.0;
  }
  if (is_running) {
    count += 1;
    requestAnimationFrame(animate);
  }
}

$('.switch').on('click', function() {
  if (is_running) {
    is_running = false;
    $(this).html('Run');
  } else {
    is_running = true;
    $(this).html('Stop');
    animate();
  }
});