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.
- index.html
- style.css
- 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 .