Discord Style Emoji Switcher

Preview:

Description:

A Vanilla JS emoji switcher that allows users to switch between emoji on hover & click as seen on Discord.

How to use it:

1. Add the initial emoji to the page.

<div class="section">
  <button id="emoji-btn">😀</button>
</div>

2. Style the emoji switcher in CSS.

button#emoji-btn {
  border: none;
  font-size: 5rem;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(25px);
  border-radius: 10px;
  filter: grayscale();
  padding: 15px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

button#emoji-btn:hover {
  transform: scale(1.3);
  filter: grayscale(0);
}

3. Add an array of emoji to the emoji switcher.

const emojis = 
  ["😆", "😅", "🤣", "😂", "😀", "🤑", "🤨", "🙂",
   "😊", "😗", "😛", "😏", "🤥", "😴", "🥺", "😧",
   "🤗", "🤩", "😎", "🥳", "😍", "😱", "🤓", "😷",
   "🥴", "😳", "🤯", "🤫", "🤑", "😪", "😴", "😵"
];

4. Enable the button to switch between emoji on hover & click.

const btn = document.getElementById('emoji-btn');
btn.addEventListener('mouseover', () => {
  btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
})
btn.addEventListener('click', () => {
  btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
})