Emoji switcher in JavaScript same as Discord


Category: JavaScript Recommended | September 15, 2021
Author: piyushL337
Official Page: Go to website
Last Update: September 15, 2021
License: MIT

emoji switcher javascript

About:

This is Vanilla JavaScript emoji switcher that will enable your users to switch emoji icon hovering mouse on the item or on clicking/tapping the item.

How to use emoji switcher?

1. Include the CSS and JavaScript file under the <HEAD>section of your web page. Like this:

<link rel="stylesheet" href="css/style.css" />
<script src="js/main.js"></script>

2. Add the emoji switcher where you want it to display.

<div class="section">
      <button id="emoji-btn">๐Ÿ˜€</button>
</div>

3. Now, add some CSS styles to the emoji switcher.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "sans";
  user-select: none;
}
@font-face {
  font-family: "sans";
  src: url(font/sans.ttf);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #19172e;
}

h2 {
  position: absolute;
  top: 0;
  padding-top: 140px;
  color: white;
  font-size: 2rem;
  text-align: center;
}

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

4. Define the emoji’s array.

const emojis = ["๐Ÿ˜†", "๐Ÿ˜…", "๐Ÿคฃ", "๐Ÿ˜‚", "๐Ÿ˜€", "๐Ÿค‘", "๐Ÿคจ", "๐Ÿ™‚",
    "๐Ÿ˜Š", "๐Ÿ˜—", "๐Ÿ˜›", "๐Ÿ˜", "๐Ÿคฅ", "๐Ÿ˜ด", "๐Ÿฅบ", "๐Ÿ˜ง",
    "๐Ÿค—", "๐Ÿคฉ", "๐Ÿ˜Ž", "๐Ÿฅณ", "๐Ÿ˜", "๐Ÿ˜ฑ", "๐Ÿค“", "๐Ÿ˜ท",
    "๐Ÿฅด", "๐Ÿ˜ณ", "๐Ÿคฏ", "๐Ÿคซ", "๐Ÿค‘", "๐Ÿ˜ช", "๐Ÿ˜ด", "๐Ÿ˜ต"
];

5. Now make emoji switcher functional with JavaScript code.

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

And, you are done. ๐Ÿ™‚