Append color-palette and unicode symbols as examples to page

palette.js

const html = (template = '') => document.createRange().createContextualFragment(template);
const body = document.querySelector('body');

const append = (values) => {
  const palette = document.querySelector('#palette');
  if (palette) palette.remove();
  const container = html(`
  <div id="palette" style="
      min-height: 150px;
      position: fixed;
      background: white;
      padding: 12px;
      width: 100%;
      z-index: 200;
      z-index:2000;      
  ">${values.join('')}
  </div>`);
  body.insertBefore(container, body.firstChild);
};

const pStyle = `
      border: dotted 1px silver;
      color: black;      
      height: auto;
      display: inline-block;
      margin: 1px;
      padding: 5px;
      text-align: center;`;

const palette = (...colors) =>
  append(
    colors.map(
      (c) =>
        `<p style="
        ${pStyle}
        background-color: ${c};
        height: 75px;
        width: 75px;           
        "> ${c}</p>`
    )
  );

const unicode = (a = 0, b = 100) =>
  append(
    Array.from(Array(b - a).keys())
      .map((i) => i + a)
      .map(
        (i) => `<p style="
      width: 55px;
      ${pStyle}
      ">  ${String.fromCodePoint(parseInt(i, 16))}<br />
          <span>${i}</span>
      </p>`
      )
  );

global.unicode = unicode;
global.palette = palette;