JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

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

JavaScript

/* MODULE */

var GreenRedGradient = (
  function() {
    return {
      getGrade: function(count) {
        if (!count) {
          return false
        }
        count = parseInt(count, 10);
        if (count > 255) {
          count = 255;
        }
        var mod = 255 / count;
        mod = parseInt(mod, 10);
        var Gradient = new Map();

        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;
            //g = 255
            b = 0;
          }
          Gradient.set(i, "rgb(" + r + "," + g + "," + b + ")")
        }
        return Gradient;
      }
    };
  })();

/*TEST : */
var box = document.getElementById('box');
var str = ""
var cnt = 16; /// len of grade
var grade = GreenRedGradient.getGrade(cnt, {max: 500, min: -200})

console.warn('A')
for (let i = 0; i <= cnt; i++) {
  str += "<div class='container' id='container' style='background:" + grade.get(i) + "'>" + i + "</div>";
}
box.innerHTML = str;