Drum Machine - Front End Libraries Challenge

HTML-CSS
1

Hi All,

I’m sure it’s something simple I’m just missing, but I’m trying to figure out how to apply an animate.css class to a button using jQuery every time the button is clicked. With the code below, it applies it the first time it is clicked, and then the animation does not happen again on subsequent clicks. I thought it would be as simple as adding the class with jQuery then immediately removing it within the playClip function but that doesn’t seem to be working. Below is my code.

let playClip = (clicked_id) => {
  let clip = document.getElementById(clips[clicked_id]);
  clip.play();
 document.getElementById("display").innerHTML = clicked_id.toUpperCase();
  
  $(`#${clicked_id}`).removeClass("animate__animated animate__pulse");
  
    $(`#${clicked_id}`).addClass("animate__animated animate__pulse");  
};

Here is the entire code including HMTL, CSS and JS.

Thanks in advance for any assistance you can give. All tests are passing at this point, I’m just trying to add some extras now and make it better.

2

You need to remove the class.

One option might be just to toggle the class (but that might not work exactly as expected).

$(`#${clicked_id}`).toggleClass("animate__animated animate__pulse");

Or using a setTimeout to remove the class (the animate.css default animation speed is 1 second)

$(`#${clicked_id}`).addClass("animate__animated animate__pulse");

setTimeout(() => {
  $(`#${clicked_id}`).removeClass("animate__animated animate__pulse");
}, 1000);
3

@lasjorg Your second suggestion worked like a charm! Thanks much. I wasn’t very familiar with the setTimeout method but have a better understanding of it now.

I think I’ll just try to figure out how to add a volume slider to it now and call it a day for this challenge.