Hello there, I'm Ishaan, A 13-year-old passionate Full Stack Web Developer. Today, I'm going to make something super awesome and in-demand In Just 5 minutes.

You all may have noticed the emoji switcher effect on Discord. It is a super awesome idea and provides a neat User Interface (UI) to the user with good micro-interaction.

Let's Build this emoji switcher using Vanilla Javascript in just 5 minutes. So, let's get started ✌️🔥

Let's get started

Our project consists of a total of 3 files.

index.html
style.css
index.js

root/
├── index.html
├── style.css
└── index.js

Let's start coding

First of all, we can start with the HTML. The HTML is so simple, it just consists of a simple button with an emoji inside it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Emoji Switcher like Discord 😎</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--Importing CSS -->
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <span id='emoji-btn'>😀</span>

    <!--Importing Javascript -->
    <script src="index.js"></script>
</body>
</html>

Our next part is the CSS. The CSS is also very simple, we just have to align our emoji button to the center and give some basic styling to our app and make it look clean to the users. We also need to provide cool micro-interactions like hovering over the grayscale emoji and turning to the color emoji also scales a bit big.

body{
  margin: 0;
  padding: 0;
  height:100vh;
  overflow: hidden;
  width:100%;
  display: flex;
  background: #222;
  align-items: center;
  justify-content: center;
}

#emoji-btn {
  font-size: 3rem;
  filter: grayscale(1);
  transition: .1s;
  border: none;
  cursor: pointer;
}

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

Now the HTML and CSS part of our app is completed. Let's move on to the last part, which is our index.js. The index.js controls the functionality of changing the emoji on every mouse hover.

// Get emojis from https://emojipedia.org/

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

btn.addEventListener("mouseover", () => {
  btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
});

Hurray, we have successfully finished our app! The app is looking great and has some really cool micro-interactions.

Here is the demo of the working app. ✌️😅

The full source code is on the CodePen, but try to code it on your own to boost up your skills. 🚀

Hope you all enjoyed this article and were able to make your very own emoji switcher! If you have any doubts or questions, make sure to write them in the comments below. Also, please add a reaction to this article and rate it out of 10. I really appreciate it 🙏

Don’t forget to join my Discord server!

#Have a Great Day! Thank you! Happy Coding! 💻⚡

Ishaan Garg

Ishaan Garg

Let's build an emoji switcher like Discord in just 5 minutes

Let's get started

Let's start coding