compareProfiles

by tedbeer

HTML

<template id="profile-template">
<li class="metrics"><span class="name"></span><span class="value"></span><span class="rest"></span></li>
</template>
<ul class="list" id="profiles">
</ul>

SCSS

.list {
  width: 300px;
  
}
.metrics {
  display: flex;
  width: 100%;
}
.name {
  display: inline-block;
  min-width: 80px;
}
.value {
  display: inline-block;
  border: 1px solid #999;
  height: 10px;
}

JavaScript

(async function(){
const colors = await fetch('https://raw.githubusercontent.com/Jam3/nice-color-palettes/master/100.json').then(response => response.json());
const randomColor = () => {
  const cnt = parseInt(Math.random() * 5 * colors.length);
  return colors[parseInt(cnt / 5) % colors.length][cnt % 5];
};
const profileTemplate = document.querySelector('#profile-template');
const profiles = document.querySelector('#profiles');

const addProfile = ({name, color, value}) => {
    const clone = profileTemplate.content.cloneNode(true);
    clone.querySelector('.name').textContent = name;
    const elValue = clone.querySelector('.value');
    elValue.style.backgroundColor = color;
    elValue.style.width = `${value}%`;
    profiles.appendChild(clone);
}
const data = [
  { name: 'account', value: 20 },
  { name: 'admin', value: 80 },
  { name: 'seller', value: 30 },
];

  data.sort((a, b) => a.value > b.value ? -1 : (a.value == b.value ? 0 : 1)).forEach(item =>
    addProfile({...item, color: randomColor()}));
})();