JSFiddle - React, Tailwind, and code Playground

challenge

by Travis Almand

HTML

<div id="panel">
  <button id="reset_btn">reset</button>
  <button id="hint_btn">hint</button>
  <select id="difficulty_options">
    <option value="3">easy</option>
    <option value="4">normal</option>
    <option value="5">hard</option>
    <option value="6">extreme!</option>
  </select>
</div>

<div id="count_down"></div>

<div id="container">
  <div id="color_btns">
    <button class="color-btn white"></button>
    <button class="color-btn red"></button>
    <button class="color-btn black"></button>
    <button class="color-btn orange"></button>
    <button class="color-btn green"></button>
    <button class="color-btn purple"></button>
  </div>

  <div id="color_choices"></div>
</div>

<div id="result"></div>

SCSS

#result {
  &.show:after {
    background-color: white;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: 'click to play again';
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
  }
  &.boom:after {
    background-image: url(http://orig02.deviantart.net/a97b/f/2012/020/3/1/cartoon_boom__by_vadich-d4mzprc.jpg);
  }
  &.defuse:after {
    background-image: url(https://s-media-cache-ak0.pinimg.com/564x/be/36/2a/be362a7cc01292c07ae52ca9d803cd42.jpg);
  }
}

#panel {
  border: 1px solid gainsboro;
  margin: 20px 0 0;
  padding: 20px;
}

#count_down {
  background-color: gainsboro;
  display: none;
  height: 20px;
  
  &.show {
    animation: countDown 10s forwards;
    display: block;
  }
}

#container {
  text-align: center;
}

#color_btns {
  margin: 20px 0;
  
  .color-btn {
    background-image:
        radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 80%),
        radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 80%);
    background-position: -30px -30px, 20px 20px;
    background-repeat: no-repeat, no-repeat;
    background-size: 50px 50px, 50px 50px;
    border-style: solid;
    border-width: 4px;
    border-radius: 15%;
    cursor: pointer;
    height: 50px;
    position: relative;
    width: 50px;
    
    &:active {
      transform: scale3d(0.9, 0.9, 1);
    }
    &.hint:before {
      animation: hintBlinky 0.5s infinite alternate;
      background-color: white;
      bottom: -4px;
      content: '';
      display: block;
      left: -4px;
      position: absolute;
      right: -4px;
      top: -4px;
    }
    &.white {
      background-color: rgb(200, 200, 200);
      border-top-color: darken(white, 10%);
      border-left-color: darken(white, 10%);
      border-right-color: darken(white, 25%);
      border-bottom-color: darken(white, 25%);
    }
    &.red {
     ...

JavaScript

console.clear();
var $reset_btn = document.querySelector('#reset_btn');
var $hint_btn = document.querySelector('#hint_btn');
var $result = document.querySelector('#result');
var $difficulty_options = document.querySelector('#difficulty_options');
var $color_choices = document.querySelector('#color_choices');
var $count_down = document.querySelector('#count_down');
var colorBtns = Array.from(document.querySelectorAll('.color-btn'));
var colorChoices;
var currentChoice = 0;

var allowedColors = {
  	'white': 'red orange green purple',
    'red': 'green',
    'black': 'red black purple',
    'orange': 'red black',
    'green': 'orange white',
    'purple': 'red black'
  }

$reset_btn.addEventListener('click', reset);
$result.addEventListener('click', reset);

$hint_btn.addEventListener('click', function () {
  colorBtns.forEach(function (element, index) {
    if (document.body.className.indexOf(element.classList[1]) > -1) {
      element.classList.add('hint');
    }
  });
});

$difficulty_options.addEventListener('change', function (e) {
	var number = e.target.options[e.target.options.selectedIndex].value;
	buildChoicesPanel(number);
  reset();
  $count_down.classList.toggle('show', number === e.target.options[e.target.options.length - 1].value);
});

$count_down.addEventListener('animationend', function () {
	boom();
});

colorBtns.forEach(function (element, index) {
	element.addEventListener('click', choiceMade);
});

function buildChoicesPanel (number) {
	$color_choices.innerHTML = '';
  for (var i = 0; i < number; i++) {
  	$color_choices.innerHTML += '<div class="color-choice"></div>';
  }
  colorChoices = Array.from(document.querySelectorAll('.color-choice'));
}

function clearHint () {
	colorBtns.forEach(function (element, index) {
  	element.classList.remove('hint');
  });
}

function reset (e) {
	document.body.className = '';
  $result.className = '';
  colorChoices.forEach(function (element, index) {
  	element.className = 'color-choice';
  });
 ...