keshon16 / Project-1-it-s-mee

0 stars 0 forks source link

question block shakes/bounces slightly #7

Closed sketchyTK closed 1 month ago

sketchyTK commented 1 month ago
`questionBlock.addEventListener('click', function () {
    // if the coin total is less that 99, then add 1
    if (coins <= 9) {
            coins++;
            coinTotal.textContent = coins;
         // coinSound.play();
         //  bump.play();
            sessionStorage.setItem('savedCoins', coins);
            questionBlock.classList.add("coinBounce");
        }
 //event listener is not working
 questionBlock.addEventListener('animationEnd', () => {
        questionBlock.classList.remove("coinBounce");
    });
      if (coins >= 9) {
        coins = 0;
      //  oneUp.play();
        coinsound.pause();
        coinTotal.textContent = coins;
        sessionStorage.setItem('savedCoins', 0);
        }   
  }
);

</script>
<style>

.coinBounce {animation: coinBounce 0.1s linear forwards;}

    @keyframes coinBounce {
       0% {
            position: relative; top: 0; 
        }
        50% {
            position: relative; top: -5px; 
        } 

       100% {
           position: relative; top: 0; 
        } 
    }
</style>`
sketchyTK commented 1 month ago

Trying to remove class "coinBounce" from the question-block element.

sketchyTK commented 1 month ago

Resolved with help from Nathan. Issue was the event listener needed to be "animationend" NOT animationEnd. :P