Color Picker

color-picker.markdown

Color Picker

A Pen by Scott Meyers on CodePen.

License.

index.html

<main>
  <header></header>
  <div class="colors"></div>
</main>

script.js

const colorsEl = document.querySelector('.colors');

const resetSelection = () => Array.from(document.querySelectorAll('.colors div')).map((listItem) => listItem.classList.remove('selected'));

const colors = Array.from({ length: 16 }, () => {
  const color = chance.color();
  const div = document.createElement('div');
  const span = document.createElement('span');

  span.className = 'color';
  span.style.background = color;
  span.onclick = () => {
    resetSelection();
    span.parentNode.classList.toggle('selected');
    document.body.style.background = color;
  };
  
  div.append(span);
  
  colorsEl.append(div); 
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.js"></script>

style.scss

body {
  background: #B7B7B7;  
}

header {
  background: #292D43;
  color: #485f6e;
  font-size: 30px;
  font-weight: bold;
  height: 40px;
  position: relative;
  
  &::after {
    content: '—';
    position: absolute;
    right: 10px;
  }
}

main {
  background: white;
  border: 1px solid darkgray;
  box-shadow: 0px 4px 15px -2px rgba(117,117,117,1);
  margin: 10% auto 0;
  max-width: 200px;
}

.colors {
  background: #31364E;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;

  div {
    cursor: auto;
    padding: 10px 0;
    text-align: center;
    width: 25%;

    &:hover .color {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 2px rgba(205, 205, 205, .9);
      transform: scale(1.05);
    }

    &.selected {
      .color {
        opacity: .9;
        position: relative;
        transform: scale(1.25);

        &::after {
          color: azure;
          content: '✓';
          height: 100%;
          left: 0;
          line-height: 34px;
          position: absolute;
          text-indent: 0;
          width: 100%;
        }
      }
    }
  }

  .color {
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 33px;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 33px;
  }
}