JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div>
  <span>Nombre</span>
  <input id="inb" type="text" /><br>
  <span>Memoria</span>
  <input id="im" type="number" /><br>
  <input id="ic" type="color" value="#B5EAD7" list="colors"/>
  <datalist id="colors">
    <option value="#B5EAD7"/>
    <option value="#FFFFD8"/>
    <option value="#FF9AA2"/>
    <option value="#FFDAC1"/>
    <option value="#C7CEEA"/>
    <option value="#8FDBF9"/>
    <option value="#E2F0CB"/>
    <option value="#feffa3"/>
    <option value="#ffd4e5"/>
    <option value="#cbf3f8"/>
  </datalist>
  <br>
  <button id="ad">Crear</button>
</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>
<div id="list"></div>

CSS

* {
  /*margin: 0;*/
  padding: 0;
  font-family: Arial;
}

canvas:first-child{
  margin-right: 15px;
}

div {
  display: inline-block;
  width: 225px;
  float: left;
}

li {
  list-style-type: none;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}

li div{
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 1px black solid;
  border-radius:100px;
  transition: all 0.5s linear;
}


li:hover div{
  border-radius: 2px;
}

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 cx1 = c1.getContext("2d"),
  cx2 = c2.getContext("2d");
var lp = 0,
  lp2 = 0;

var a = [{
    n: "SO",
    v: 512,
    c: "#B5EAD7"
  },
  {
    n: "Chrome",
    v: 256,
    c: "#FFFFD8"
  },
  {
    n: "Office Word",
    v: 512,
    c: "#FF9AA2"
  },
  {
    n: "Windos Store",
    v: 256,
    c: "#FFDAC1"
  },
  {
    n: "Visual Studio",
    v: 128,
    c: "#C7CEEA"
  },
  {
    n: "Outlook",
    v: 128,
    c: "#8FDBF9"
  }
];

ad.onclick = (e) => {
  if (lp + (im.value * 300 / 1024) <= 600) {
    a.push({
      n: inb.value,
      v: im.value,
      c: ic.value
    });
  } else {
    alert("Memoria insuficiente");
  }
  updateBars();
}

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

function updateBars() {
  console.clear();
  console.log(a);
  list.innerHTML = '';
  lp = 0;
  lp2 = 0;
  a.forEach((e) => {
    var li = document.createElement("li");
    var box = document.createElement("div");
    box.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;
    li.appendChild(box);
    list.appendChild(li);
  });

  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].n + " / " + a[i].v + " MB","("+ lp+",", h +")");
    lp += h;

    if (lp > 300) {

     ...