Random Animations

to get Random EMOJIS 😍

HTML

HTML
<div id="containerheart"></div>
<button id="heart" class="button">RANDOM EMOJIS</button>

Pug

Pug
#containerheart
button#heart.button RANDOM EMOJIS

CSS

CSS
.heart{
  font-size: 40px;
  animation: fall 1s 1 forwards linear;
  z-index: 1700;
  position: fixed;
  top: 0;
} 
@keyframes fall {
  0% {
    transform: translateY(-5vh);
  }
  100% {
    transform: translateY(110vh);
  }
}

JavaScript

JavaScript
heart.addEventListener("click", (eo) => {
const heartfunc = setInterval(() => {
  const emojielement = document.createElement('div')
  emojielement.classList.add("heart")
  emojielement.style.left = `${Math.random() * 100}%`
  emojielement.innerText = "💘" // put here first thing
  const emojielement2 = document.createElement('div')
  emojielement2.classList.add("heart")
  emojielement2.style.left = `${Math.random() * 100}%`
  emojielement2.innerText = "LOVE YOU" // put here second thing
  containerheart.append(emojielement)
  containerheart.append(emojielement2)
}, 30); // control this numbers of how many emojis you want (lower is more)
setTimeout(() => {
  clearInterval(heartfunc)
  containerheart.innerHTML = "";
}, 5000); // the time of animations by ms `Notice 1000 = 1 sec`
});