Lite Brite project


#1

I am having trouble getting the dots to light up and the Blink button does not work. Could someone offer a little advice?

function main(){

var colorClass = '';

$('.select-color').on('click',function(){
  var selectedColor = $(this).attr('class');

    switch (selectedColor) {
      case 'select-color cyan not-selected':
      colorClass = 'cyan';
      break;

      case 'select-color yellow not-selected':
      colorClass = 'magenta';
      break;

      case 'select-color green not-selected':
      colorClass = 'green';
      break;
    }
    $(this).removeClass('not-selected');
    $(this).siblings().addClass('not-selected');

});

$('.box').on('click', function(){
  if (colorClass){
    $('.toggle-blink').toggleClass('opacity');

    setInterval(function(){
      $('.box.pink, .box.purple, .box-green').toggleClass(blink);
    }, 350);
  }

});
}
$(document).ready(main);

#2

The three colors are cyan, magenta, and yellow.

Your .box class should have its own click handler to toggle the colorClass.

  $('.box').on('click',function(){
    $(this).toggleClass(colorClass);
  });

And .toggle-blink will also have a click handler. The instuctions begin at step 11.