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

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello there, I am Savio Martin, A 13-year-old passionate Full Stack Web Developer from India. Today, I'm gonna make something super awesome and in-demand project In Just 5 Minutes.

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

Let's Build the Emoji switcher in vanilla Javascript in just 5 minutes. So, Let's get started ✌️πŸ”₯

Let's get started

Our project consists of total 3 pages.

  1. index.html
  2. style.css
  3. index.js
root/
β”œβ”€β”€ index.html
β”œβ”€β”€ style.css
└── index.js

Let's start coding

First of all, we can start with HTML. The HTML is so simple, it just consists of a simple button in which there is an emoji inside it. We are also linking the HTML page with CSS and JS pages.

<!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 CSS. CSS is also so simple, we just have to align our emoji button to the centre and give some basic styling to our app just to make our app look majestic to the users. We also need to provide cool micro interactions like on hovering the grayscale emoji turn to 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. Lets move on to the last part that is our index.js. The index.js controls the functionality of changing the emoji on every mouse hover. It is so simple, lets build it.

// 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 and is to be reviewed. The app is looking great and have really cool micro-interactions. Isn't it so simple, write it up in the comments below.

Here is the demo of the working app. βœŒοΈπŸ˜…

Full Code is here but try to code on your own and boost up your skills. πŸš€πŸš€

Hope you all loved this articles and was able to make your emoji switcher. If you have any doubts or queries, write it up in the comments below. Also, do reactions on this article. Do rate this article out of 10. Thanks for your time. πŸ™

Don’t forget to follow me on Github and Instagram .

Wishing You A Good Day! Thank you! Happy Hacking! πŸ’»βš‘

Ayush Agarwal's photo

The starting line of you being 13 years old got me to click the article.

I read it to full and have to say its a great article, very clean and easy to follow.

Great Work!

Savio Martin's photo

Thanks, bro πŸ™βš‘

Usman Sabuwala's photo

Thank you so much for this article Savio Martin! I was looking around for something like this. I think this is the easiest way to do it.

Wouldn't you mind if I make a video according to this article for my YouTube channel?

Savio Martin's photo

Glad I could help you πŸ”₯πŸ˜…

You can make video according to my article, no probs πŸ₯°

Mohd Shad Mirza's photo

Concise and cool πŸ‘. Kudos on the gif cover as well 😁

Aman Kumar's photo

Nice work bro !!!

Savio Martin's photo

Thanks bro !!

amirul asyraf's photo

Super cool dude, Thanks πŸ”₯