Emoji Switcher using Javascript

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how to create an Emoji Switcher using Javascript. You might have seen this effect in Discord. It's a simple fun project that I have created to cleae my mind and revise my basics. Believe me, doing things other than you routine work is much more helpful than you think. Who knows, you might land on a business idea 😅

Here's a preview -

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js .

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Checkbox switch toggle Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<span id='emoji-btn'>😀</span>


</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    display: flex;
    background: #f6f7fc;
    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);
}

Step - 4: Below is the JS code for adding the functionality of the switcher. Here we have created an array "emojis" which stores all the emojis. Then we target every emoji randomly using math().random() and passing it to the HTML content.

JS

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