Javascript Lite Brite Boxes don't work

Good day, everyone, i need a little help with https://www.codecademy.com/courses/learn-javascript/projects/lite-brite Lite Brite task. I was following instruction carefully, but i think im missing something. Trying to post code. The problem is that only names of the colors are working. The dots which should be coloured don’t react

function main(){
  
  var colorClass = '';
  
  $('.select-color').on('click', function() {
    var selectedColor = $(this).attr('class');
    switch (selectedColor) {
      case 'selected-color cyan not-selected':
        colorClass = 'cyan';
        break;
      case 'selected-color yellow not-selected':
        colorClass = 'yellow';
        break;
      case 'selected-color magenta not-selected':
        colorClass = 'magenta';
        break;
    }
  $(this).removeClass('not-selected');
$(this).siblings().addClass('not-selected');
  })
$('.box').on('click', function() {
  $(this).toggleClass(colorClass);
  if (colorClass) {
    $('.toggle-blink').toggleClass('opacity');
  }
  
});
$('.toggle-blink').on('click', function() {
  setInterval(function() {
    $('.box.cyan, .box.yellow, .box.magenta').toggleClass('blink');
  }, 350);
})
}

$(document).ready(main);

Thanks in advance

1 Like

Found it myself

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 = 'yellow';
        break;
      case 'select-color magenta not-selected':
        colorClass = 'magenta';
        break;

idk how it happened was copying from the instruction xD

1 Like

Even though. i started following the video and thought everything will be fine, now i cant make it blink. here the code

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 = '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 (blinking) {
    blinking = false;
    clearInterval(interval);
  } else {
    blinking = true;
    if (colorClass) {
      $('.toggle-blink').toggleClass('opacity')
      interval = setInterval(function(){
        $('.box.cyan, .box.yellow, .box.magenta').toggleClass('blink')
      }, 100)
    }
  }
})
}

$(document).ready(main);
1 Like

~nvm, i fixed it no problem xD

1 Like