Pickr fiddle template

by unloco

HTML

<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/classic.min.css">
<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/monolith.min.css">
<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/nano.min.css">
<script src="https://simonwep.github.io/pickr/dist/pickr.es5.min.js"></script>
<div class="long_div">Long div</div>

<section class="container">
  <div class="color-pickers"></div>
  <button>Add another pickr</button>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
.container {
  height: 100%;
  width: 100;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5em;
}

.color-pickers > div {
  margin-bottom: 0.5em;
}

.container > button {
  background: #2c3e50;
  color: white;
  border: none;
  outline: none;
  padding: 0.5em 0.75em;
  cursor: pointer;
  border-radius: 0.1em;
}

.long_div {
  background-color: #0F0;
  height: 500px;
}

JavaScript

const container = document.querySelector('.color-pickers');
const btn = document.querySelector('button');


btn.addEventListener('click', () => {
  const newElement = document.createElement('div');
  container.appendChild(newElement);

  const pickr = new Pickr({
    el: newElement,
    default: '#42445A',
    theme: 'classic',
    lockOpacity: true,

    swatches: [
      'rgba(244, 67, 54, 1)',
      'rgba(233, 30, 99, 0.95)',
      'rgba(156, 39, 176, 0.9)',
      'rgba(103, 58, 183, 0.85)',
      'rgba(63, 81, 181, 0.8)',
      'rgba(33, 150, 243, 0.75)',
      'rgba(3, 169, 244, 0.7)',
      'rgba(0, 188, 212, 0.7)',
      'rgba(0, 150, 136, 0.75)',
      'rgba(76, 175, 80, 0.8)',
      'rgba(139, 195, 74, 0.85)',
      'rgba(205, 220, 57, 0.9)',
      'rgba(255, 235, 59, 0.95)',
      'rgba(255, 193, 7, 1)'
    ],

    components: {
      preview: true,
      opacity: true,
      hue: true,

      interaction: {
        hex: true,
        rgba: true,
        hsva: true,
        input: true,
        clear: true,
        save: true
      }
    }
  });
});