Discord Style Emoji Switcher

Category: Javascript | August 16, 2021
Author:piyushL337
Views Total:52 views
Official Page:Go to website
Last Update:August 16, 2021
License:MIT

Preview:

Discord Style Emoji Switcher

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)];
})

You Might Be Interested In:


Leave a Reply