Toggle - color blind - JS - SCSS

by Lio Fleishman

HTML

<div id="colorBlindContainer">
  <div class="titleContainer">
    <span>Color Blind</span>
  </div>
  <p>i'm color blind</p>
  <div class="bigSwitch">
    <span class="smallSwitch"></span>
  </div>
  <div class="selectColors">
    <ul>
      <li>
        <div class="bColors firstColors">
          <span id="pat1"></span>
          <span id="pat2"></span>
          <span id="pat3"></span>
          <span id="pat4"></span>
          <span id="pat5"></span>
          <span id="pat6"></span>
          <span id="pat7"></span>
          <span id="pat8"></span>
          <span id="pat9"></span>
          <span id="pat10"></span>
        </div>
      </li>
      <li>
        <div class="bColors secondColors">
          <span id="pat1a"></span>
          <span id="pat2a"></span>
          <span id="pat3a"></span>
          <span id="pat4a"></span>
          <span id="pat5a"></span>
          <span id="pat6a"></span>
          <span id="pat7a"></span>
          <span id="pat8a"></span>
          <span id="pat9a"></span>
          <span id="pat10a"></span>
        </div>
      </li>
      <li>
        <div class="bColors thirdColors">
          <span id="pat1b"></span>
          <span id="pat2b"></span>
          <span id="pat3b"></span>
          <span id="pat4b"></span>
          <span id="pat5b"></span>
          <span id="pat6b"></span>
          <span id="pat7b"></span>
          <span id="pat8b"></span>
          <span id="pat9b"></span>
          <span id="pat10b"></span>
        </div>
      </li>
    </ul>
  </div>
</div>

SCSS

$titlePadding: 5px;
$marginLeft: 40px;
$switchWidth: 58px;
$switchHeight: 24px;
$marginSwitch: 2px;
$borderRadiusSwitch: 3px;

$blind_colors1:(
pat1: #dfc48c,
pat2: #9b869c,
pat3: #9b869c,
pat4: #777,
pat5: #EC55EC,
pat6: #D491D4,
pat7: #F52727,
pat8: #9b869c,
pat9: #9b869c,
pat10: #9b869c);

$blind_colors2:(
pat1a: #000,
pat2a: #6d6f71,
pat3a: #a7a9ac,
pat4a: #d1d3d4,
pat5a: #1c3ed0,
pat6a: #5db7fe,
pat7a: #a5d7ff,
pat8a: #ffe347,
pat9a: #ff8c47,
pat10a: #58411f);

$blind_colors3:(
pat1b: #ffffff,
pat2b: #ebb3d0,
pat3b: #f9e471,
pat4b: #aab9fb,
pat5b: #d1d3d4,
pat6b: #f2ae6b,
pat7b: #f5fbb2,
pat8b: #4662db,
pat9b: #522b6d,
pat10b: #c820e6);

$keysmap: map-keys($blind_colors1);
$val: map-values($blind_colors1);

$keysmapa: map-keys($blind_colors2);
$vala: map-values($blind_colors2);

$keysmapb: map-keys($blind_colors3);
$valb: map-values($blind_colors3);

$class-slug: pat !default;

body {
  background-color: #c1c1c1;
  font-family: 'helvetica neue', arial;
}

#colorBlindContainer {
  width: 370px;
  height: 105px;
  overflow: hidden;
  transition: all .5s;
  box-shadow: 4px 10px 15px rgba(121, 121, 121, 0.5);
  margin: 50px;
  background-color: #fff;
  .titleContainer {
    box-sizing: border-box;
    color: #fff;
    background-color: #297fb8;
    padding: $titlePadding;
    span {
      margin-left: $marginLeft - $titlePadding;
    }
  }
  p {
    display: inline-block;
    margin-left: $marginLeft;
    vertical-align: super;
  }
  .bigSwitch {
    width: $switchWidth;
    height: $switchHeight;
    background-color: #AEB3B0;
    border-radius: $borderRadiusSwitch;
    display: inline-block;
    margin-top: 23px;
    margin-left: 120px;
    cursor:pointer;
    &.active {
      .smallSwitch {
        transform: translateX(25px);
      }
    }
    .smallSwitch {
      border-radius: $borderRadiusSwitch;
      width: 50%;
      height: $switchHeight - ($marginSwitch * 2);
      background-color: #e2e8e4;
      display: block;
      margin: $marginSwitch;
     ...

JavaScript

var moveSwitch = function(switchEl) {
  var string = ' active';
  var substring = switchEl.target.className;
  var bigS = switchEl.target;
  var bigCard = document.getElementById('colorBlindContainer');

  if (substring.indexOf(string) > -1) {
    switchEl.target.className = 'bigSwitch';
    bigS.style.backgroundColor = '#AEB3B0';
    bigCard.style.height = '105px';
  } else {
    switchEl.target.className += ' active';
    bigS.style.backgroundColor = '#41cc7b';
    bigCard.style.height = '315px';
  }
}

var switchEl = document.getElementsByClassName('bigSwitch');

for (var i = 0; i < switchEl.length; i++) {
  switchEl[i].addEventListener('click', moveSwitch);
}