JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div>
  <span>Nombre</span>
  <input id="n" type="text" /><br>
  <span>Memoria</span>
  <input id="m" type="text" /><br>
  <button id="ad">Crear</button>
  <div id="list"></div>
</div>
<div>
  <canvas id="c1" width="100" height="300" style="border: 1px black solid;border-radius:2px;"></canvas>
  <canvas id="c2" width="100" height="300" style="border: 1px black solid;border-radius:2px;"></canvas>
</div>

CSS

* {
  /*margin: 0;*/
  padding: 0:
}

JavaScript

function remove(a, v) {

  return a.filter(function(e) {
    return e.n != v;
  });

}

function rem(e) {
  e.remove();
}

function index(obj, type) {
  var items = document.getElementsByTagName(type);
  for (var i = 0; i < items.length; i++) {
    if (items[i] == obj) {
      return i;
    }
  }
}


var a = [{
    n: "a",
    v: 256,
    c: "#B5EAD7"
  },
  {
    n: "b",
    v: 512,
    c: "#FFFFD8"
  },
  {
    n: "c",
    v: 512,
    c: "#FF9AA2"
  },
  {
    n: "d",
    v: 256,
    c: "#FFDAC1"
  },
  {
    n: "e",
    v: 128,
    c: "#C7CEEA"
  },
  {
    n: "f",
    v: 128,
    c: "#8FDBF9"
  }
];


//Generar la vista de las memorias
updateBars();

function updateBars() {
  console.clear();
  list.innerHTML = '';
  a.forEach((e) => {
    var li = document.createElement("li");
    li.style.background = e.c;
    li.innerHTML = e.n + " " + e.v + "MB";
    li.onclick = function() {
      var li = document.getElementsByTagName('li');
      rem(li[index(this, 'li')]);
      a = remove(a, this.className);
      updateBars();
    }
    li.className = e.n;
    list.appendChild(li);
  });

  var cx1 = c1.getContext("2d"),
    cx2 = c2.getContext("2d");
  var lp = 0,
    lp2 = 0;

  cx1.fillStyle = "#fff";
  cx1.fillRect(0, 0, 100, 300);

  cx2.fillStyle = "#fff";
  cx2.fillRect(0, 0, 100, 300);

  for (i = 0; i < a.length; i++) {
    var color = a[i].c;
    var h = (a[i].v * 300 / 1024);

    cx1.fillStyle = color;
    cx1.fillRect(0, lp, 100, h);

    if (lp < 300) console.log('%c  ', 'background:' + color + ';', a[i].v + "Mb", lp, h);
    lp += h;

    if (lp >= 300) {

      cx2.fillStyle = color
      if (lp2 == 0) {
        cx2.fillRect(0, lp2, 100, (lp - 300) - h);
        console.log('%c  ', 'background:' + color + ';', a[i].v + "Mb", lp2, (lp - 300) - h);
      } else {
        cx2.fillRect(0, lp2, 100, h);
        console.log('%c  ', 'background:' + color + ';', a[i].v + "Mb", lp2, h);
      }

      lp2 = lp - 300;
    }

  }

  cx1.strokeStyle =...