Author: | piyushL337 |
---|---|
Views Total: | 123 views |
Official Page: | Go to website |
Last Update: | August 16, 2021 |
License: | MIT |
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)]; })