JSFiddle - React, Tailwind, and code Playground

by princeofabyss

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="progressbar"></div>
<div id="counter"></div>

CSS

div.ui-progressbar {
  border: solid 4px lightgray;
  border-radius: 20px;
  background-color: #fff;
}

JavaScript

$(function() {
    var progressTimer;
    var progressbar = $("#progressbar");
    // 60 Seconds is 60,000 Milliseconds, divide by 100 parts
    var progressTime = [
      600,
      1200,
      1800
    ];
    var quizType = 1;

    function updateCounter(index) {
      var count = Math.floor((progressTime[index] * progressbar.progressbar("value")) / 1000);
      $("#counter").html(count);
    }

    // Example Gradient Calculator: https://jsfiddle.net/002v98LL
    function interpolateColor(color1, color2, factor) {
      var result = color1.slice();
      factor = 1 - (factor / 100);
      for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
      }
      console.log(result, factor);
      return "rgb(" + result.join(",") + ")";
    }

    progressbar.progressbar({
      value: 100,
      change: function() {
        $(".ui-progressbar-value", progressbar).css("backgroundColor", interpolateColor([0, 0, 255], [255, 0, 0], parseInt($(this).progressbar("value"))));
      },
    });

    function progress() {
      var pVal = progressbar.progressbar("value") || 100;
      progressbar.progressbar("value", --pVal);
      updateCounter(quizType);
      if (pVal > 0) {
        progressTimer = setTimeout(progress, progressTime[quizType]);
      } else {
        clearTimeout(progressTimer);
        console.log("finished");
      }
    }

    progress();
  });