I am in desperate need of some assistance regarding my code below for the Lite Brite Project. Could someone please review this and tell me my mistakes.
function main() {
var colorClass = '';
$('.select-color').on('click', function() { //this is the click function
var selectedColor = $(this).attr('class'); //this saves the selected color
switch(selectedColor) {
case 'select-color blue not-selected':
colorClass = 'blue';
break;
case 'select-color yellow not-selected':
colorClass = 'yellow';
break;
case 'select-color orange not-selected':
colorClass = 'orange';
break;
}
$(this).removeClass('not-selected'); // this makes the buttons light up once selected
$(this).siblings().addClass('not-selected'); // this make sure all selected colors won't stay lit
});
$('.box').on('click', function() { // this is click function for boxes
$(this).toggleClass(colorClass); // selects the box clicked and picks a color
});
$('.toggle-blink').on('click', function() {
if(colorClass) {
$('.toggle-blink').toggleClass('opacity');
setInterval(function() {
$('.box.blue, .box.yellow, .box.orange').toggleClass('blink');
}, 350);
}
});
}
$(document).ready(main); //calls back function main