I am trying to make a Whack-a-Mole game (codepen here) as part of a project on an online coding course. This is what the end result should look like, but in my code, the moles never pop up.

I only wrote the HTML and CSS — the JS was completely written by the instructors of the course.
Here is what I did in the HTML and CSS:

• I used position: absolute for the images of the mole and the hill relative to their container.
• Made a “visible” class and a “hidden” class for each mole.
• The hidden class uses transition: margin-top 0.25s and overflow: hidden for the mole to hide.
• Put the moles in a grid so they would be in 2 rows and 4 columns.
• Assigned the hidden class to all the moles.

The course instructions say once you assign the hidden class to all the moles, the JS should start working, but it doesn’t.
When I try to run the code as it is, nothing happens. I’ve checked my code multiple times and even tried doing the project from scratch step by step, and I haven’t figured out what could be stopping the JS from doing its thing.

When I change the hidden class to the visible class and add this to the JS, it toggles the mole heads between those two classes, getting it to pop up and down. This is just to test out the transition, though.

window.addEventListener('DOMContentLoaded', () => {

  setInterval(() => {
    const moleHeads = document.querySelectorAll('.wgs__mole-head');
    for (let moleHead of moleHeads) {
      moleHead.classList.toggle('wgs__mole-head--hidden');
    }
  }, 1000);

});

Any help would be appreciated!