JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<div id='box'></div>

JavaScript

/* MODULE */
var GreenRedGradient = (
  function() {
    return {
      getGrade: function(oParam) {
        var _oParam = Object.assign({
          size: 8,
          max: 80,
          min: 0
        }, oParam);
        var max = _oParam.max;
        var min = _oParam.min;
        var count = _oParam.size;
        count = parseInt(count, 10);
        if (count > 255) {
          count = 255;
        }
        var delta = max - min;
        var chunk = delta / count;
        if (!count) {
          return false;
        }
        var mod = 255 / count;
        mod = parseInt(mod, 10);
        var Gradient = [];
        var r = 255;
        var g = 0;
        var b = 0;
        for (let i = 0; i <= count; i++) {
          if ((0 + i * (mod * 2)) < 255) {
            r = 255;
            g = (0 + i * (mod * 2));
            b = 0;
          }
          if ((0 + i * (mod * 2)) >= 255) {
            r = (512 - (i * mod) * (2));
            g = 255;
            b = 0;
          }
          Gradient.push({
            value: parseFloat((min + chunk * i).toFixed(0)),
            color: "rgb(" + r + "," + g + "," + b + ")"
          });
        }
        return {
          grade: Gradient,
          getColorByValue: function(value) {
            var res = null
            for (var i = 0; i < this.grade.length; i++) {
              if (this.grade[i].value >= value) {
                res = this.grade[i];
                break;
              }
            }
            if (!res) res = this.grade[this.grade.length - 1]
            return res;
          }
        };
      }
    };
  })();

/* TEST: */
var grade = GreenRedGradient.getGrade({
  size: 8,
  max: 9990,
  min: -5000
} /**/ );

var box = document.getElementById('box');
var str = ""

grade.grade.forEach(e => {
  str += "<div style='background:" + e.color + "'>" + e.value + "</div>";
})

box.innerHTML = str;