Author: | piyushL337 |
---|---|
Views Total: | 193 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)]; })