Lite Brite Project - I got stuck


#1

I'm not sure what i did wrong in the code, but when ever i click on one of the three top buttons i see the text "class" beside them
and im not able to color any of the buttons.

function main() {

var colorClass = '';

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

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

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

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

});

$('.box').on('click', function(){

$(this).toggleClass(ColorClass);

});

$('.toggle-blink').on('click', function(){

if(colorClass) {
  $('.toggle-blink').toggleClass('opacity');

  setInterval(function(){
    $('.box.cyan, .box.yellow, .box.magenta').toggleClass('blink');
  }, 350);
}

});
}

$(document).ready(main);


#2

you used after() instead of attr() so your fourth line should be:

var selectedColor = $(this).attr('class');

also in the click event handler for .box you have ColorClass instead of colorClass (remember Javascript is case sensitive).

and lastly, in your switch statement in the third case for magenta, your .not-selected class is missing a dash