HTML
<div id="containerheart"></div>
<button id="heart" class="button">RANDOM EMOJIS</button>
to get Random EMOJIS 😍
<div id="containerheart"></div>
<button id="heart" class="button">RANDOM EMOJIS</button>
#containerheart
button#heart.button RANDOM EMOJIS
.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);
}
}
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`
});