Create a Emoji Generator Using HTML CSS & JavaScript

Last Updated : 18 Oct, 2023

While communicating with our friends, we always use the emoji to represent our feelings and emojis. There are many emojis that represent our emotions and feelings. As developers, we can generate a random emoji on every click of the button, and we can also copy that emoji and paste it into our chat box or in the messaging area.

This project has HTML, CSS, and JavaScript files, in which the HTML file contains the entire layout and structure of the application; CSS contains the styling and color effects; and the JS code has the complete behavior of the application, like generating the emoji and copying the emoji functionality.

Preview Image:

Prerequisites

Approach

In this interactive application, user can be able to generate the random emoji with a sinlge click, user can also view the name of the emoji and also user has the feature to copy the emoji to the clipboard. Once the user copies the emoji to the clipboard, he/she can paste it in any of the platform for seemless communication in terms of emojis. This application is simple and interactive for emoji generation.

Example: This example shows the use of the above-explained appraoch.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>Emoji Generator</title> 
    <link rel="stylesheet" href="styles.css" /> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>GFG Emoji Generator</h1> 
        <div class="emoji-container"> 
            <div id="emoji" class="emoji"></div> 
            <p id="emoji-name" class="emoji-name"></p> 
        </div> 
        <div class="feeling-buttons"> 
            <button class="btn feeling-button" 
                    data-feeling="Happy"> 
                Happy 
            </button> 
            <button class="btn feeling-button" 
                    data-feeling="Sad"> 
                Sad 
            </button> 
            <button class="btn feeling-button" 
                    data-feeling="Angry"> 
                Angry 
            </button> 
            <button class="btn feeling-button" 
                    data-feeling="Excited"> 
                Excited 
            </button> 
        </div> 
        <button id="generate-random-btn" 
                class="btn generate-random-button"> 
            Generate Random Emoji 
        </button> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    font-family: "Arial", sans-serif; 
    background: linear-gradient(135deg, 
                    #f4fb8f, #ff6b6b); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    margin: 0; 
} 
  
.container { 
    background-color: rgba(255,255,255,0.9); 
    border-radius: 20px; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
    padding: 2rem; 
    text-align: center; 
    animation: fadeIn 1s ease; 
    width: 80%; 
    max-width: 500px; 
} 
  
h1 { 
    color: #00a136; 
    font-size: 2.5rem; 
    margin-bottom: 1rem; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
} 
  
.emoji-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
} 
  
.emoji { 
    font-size: 5rem; 
    transition: transform 0.3s ease-in-out; 
    color: #ff6b6b; 
} 
  
.generate-random-button { 
    background-color: #4e6bff; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 10px; 
    font-size: 1rem; 
    cursor: pointer; 
    transition: background-color 0.3s ease-in-out, 
        transform 0.2s ease-in-out; 
    width: 100%; 
    margin-top: 20px; 
} 
  
.generate-random-button:hover { 
    background-image: linear-gradient(45deg, 
            #4e6bff, 
            #ff6b6b); 
    transform: scale(1.05); 
} 
  
.emoji-name { 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: #444; 
} 
  
.feeling-buttons { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
    margin-top: 20px; 
} 
  
.btn { 
    background-color: #4e6bff; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 10px; 
    font-size: 1rem; 
    cursor: pointer; 
    transition: background-color 0.3s ease-in-out, 
        transform 0.2s ease-in-out; 
    width: 45%; 
} 
  
.btn:hover { 
    background-image: linear-gradient(45deg, 
            #4e6bff, 
            #ff6b6b); 
    transform: scale(1.05); 
} 
  
.copied { 
    animation: pulse 1s ease infinite; 
} 
  
@keyframes pulse { 
    0% { 
        transform: scale(1); 
    } 
  
    50% { 
        transform: scale(1.1); 
    } 
  
    100% { 
        transform: scale(1); 
    } 
}

Javascript

function emojiCallFunction(cb) { 
    fetch("emojis.json") 
        .then((response) => { 
            if (!response.ok) { 
                throw new Error( 
                    "Emoji Fetch Failed"
                ); 
            } 
            return response.json(); 
        }) 
        .then((data) => { 
            cb(data); 
        }) 
        .catch((error) => { 
            console.error( 
                "Error Occured:", 
                error 
            ); 
            cb({}); 
        }); 
} 
  
function randomEmoji(emojiIn) { 
    const randombtn = 
        document.getElementById( 
            "generate-random-btn"
        ); 
    randombtn.addEventListener( 
        "click", 
        () => { 
            emojiShow(emojiIn); 
        } 
    ); 
} 
  
function emojiShow(emojiInfo) { 
    const Moodfeel = 
        Object.keys(emojiInfo); 
    const randomFeel = 
        Moodfeel[ 
            Math.floor( 
                Math.random() * 
                    Moodfeel.length 
            ) 
        ]; 
    const emojiIcon = 
        emojiInfo[randomFeel]; 
    if ( 
        emojiIcon && 
        emojiIcon.length > 0 
    ) { 
        const anyEmoji = 
            emojiIcon[ 
                Math.floor( 
                    Math.random() * 
                        emojiIcon.length 
                ) 
            ]; 
        previewEmoji( 
            randomFeel, 
            anyEmoji.emoji 
        ); 
    } 
} 
  
function previewEmoji(mood, emo) { 
    document.getElementById( 
        "emoji-name"
    ).textContent = mood; 
    document.getElementById( 
        "emoji"
    ).textContent = emo; 
} 
  
function defaultEmoji() { 
    emojiCallFunction(function ( 
        emojiData 
    ) { 
        document 
            .querySelectorAll( 
                ".feeling-button"
            ) 
            .forEach((button) => { 
                button.addEventListener( 
                    "click", 
                    () => { 
                        const feeling = 
                            button 
                                .dataset 
                                .feeling; 
                        const emoji = 
                            emojiData[ 
                                feeling 
                            ]; 
                        if ( 
                            emoji && 
                            emoji.length > 
                                0 
                        ) { 
                            const anyEmoji = 
                                emoji[ 
                                    Math.floor( 
                                        Math.random() * 
                                            emoji.length 
                                    ) 
                                ]; 
                            previewEmoji( 
                                feeling, 
                                anyEmoji.emoji 
                            ); 
                        } 
                    } 
                ); 
            }); 
        randomEmoji(emojiData); 
        emojiShow(emojiData); 
    }); 
} 
  
defaultEmoji();

Javascript

// Emoji.json 
{ 
    "Happy": [ 
        { "emoji": "????", "name": "Grinning Face" }, 
        { "emoji": "????", "name": "Beaming Face with Smiling Eyes" }, 
        { "emoji": "????", "name": "Smiling Face with Open Mouth and Smiling Eyes" }, 
        { "emoji": "????", "name": "Grinning Face with Big Eyes" }, 
        { "emoji": "????", "name": "Grinning Squinting Face" }, 
        { "emoji": "????", "name": "Grinning Face with Sweat" }, 
        { "emoji": "????", "name": "Slightly Smiling Face" }, 
        { "emoji": "????", "name": "Smiling Face with Smiling Eyes" }, 
        { "emoji": "????", "name": "Smiling Face with Halo" }, 
        { "emoji": "????", "name": "Smiling Face with Hearts" }, 
        { "emoji": "????", "name": "Heart Eyes" }, 
        { "emoji": "????", "name": "Star-Struck" }, 
        { "emoji": "????", "name": "Face Blowing a Kiss" }, 
        { "emoji": "????", "name": "Kissing Face" }, 
        { "emoji": "????", "name": "Kissing Face with Smiling Eyes" }, 
        { "emoji": "????", "name": "Face Savoring Food" }, 
        { "emoji": "????", "name": "Face with Tongue" }, 
        { "emoji": "????", "name": "Winking Face with Tongue" }, 
        { "emoji": "????", "name": "Partying Face" }, 
        { "emoji": "????", "name": "Grinning Cat Face" } 
    ], 
        "Sad": [ 
            { "emoji": "????", "name": "Disappointed Face" }, 
            { "emoji": "????", "name": "Pensive Face" }, 
            { "emoji": "????", "name": "Crying Face" }, 
            { "emoji": "????", "name": "Loudly Crying Face" }, 
            { "emoji": "????", "name": "Weary Face" }, 
            { "emoji": "????", "name": "Tired Face" }, 
            { "emoji": "????", "name": "Suffering Face" }, 
            { "emoji": "????", "name": "Confounded Face" }, 
            { "emoji": "????", "name": "Anxious Face with Sweat" }, 
            { "emoji": "????", "name": "Fearful Face" }, 
            { "emoji": "????", "name": "Downcast Face with Sweat" }, 
            { "emoji": "????", "name": "Sad but Relieved Face" }, 
            { "emoji": "????", "name": "Pleading Face" }, 
            { "emoji": "????", "name": "Crying Face" }, 
            { "emoji": "????", "name": "Crying Cat Face" }, 
            { "emoji": "????", "name": "Disappointed Face" }, 
            { "emoji": "????", "name": "Worried Face" }, 
            { "emoji": "????", "name": "Slightly Frowning Face" }, 
            { "emoji": "☹️", "name": "Frowning Face" }, 
            { "emoji": "????", "name": "Confounded Face" } 
        ], 
            "Angry": [ 
                { "emoji": "????", "name": "Angry Face" }, 
                { "emoji": "????", "name": "Pouting Face" }, 
                { "emoji": "????", "name": "Face with Symbols on Mouth" }, 
                { "emoji": "????", "name": "Face with Steam From Nose" }, 
                { "emoji": "????", "name": "Expressionless Face" }, 
                { "emoji": "????", "name": "Unamused Face" }, 
                { "emoji": "????", "name": "Pouting Cat Face" }, 
                { "emoji": "????", "name": "Confused Face" }, 
                { "emoji": "????", "name": "Slightly Frowning Face" }, 
                { "emoji": "☹️", "name": "Frowning Face" }, 
                { "emoji": "????", "name": "Confounded Face" }, 
                { "emoji": "????", "name": "Suffering Face" }, 
                { "emoji": "????", "name": "Tired Face" }, 
                { "emoji": "????", "name": "Angry Face" }, 
                { "emoji": "????", "name": "Pouting Face" }, 
                { "emoji": "????", "name": "Face with Symbols on Mouth" }, 
                { "emoji": "????", "name": "Face with Steam From Nose" }, 
                { "emoji": "????", "name": "Unamused Face" }, 
                { "emoji": "????", "name": "Pouting Cat Face" }, 
                { "emoji": "????", "name": "Confused Face" } 
            ], 
                "Excited": [ 
                    { "emoji": "????", "name": "Grinning Face with Big Eyes" }, 
                    { "emoji": "????", "name": "Star-Struck" }, 
                    { "emoji": "????", "name": "Smiling Face with Sunglasses" }, 
                    { "emoji": "????", "name": "Partying Face" }, 
                    { "emoji": "????", "name": "Beaming Face with Smiling Eyes" }, 
                    { "emoji": "????", "name": "Grinning Squinting Face" }, 
                    { "emoji": "????", "name": "Zany Face" }, 
                    { "emoji": "????", "name": "Grinning Face" }, 
                    { "emoji": "????", "name": "Smiling Face with Open Mouth and Smiling Eyes" }, 
                    { "emoji": "????", "name": "Face with Tears of Joy" }, 
                    { "emoji": "????", "name": "Rolling on the Floor Laughing" }, 
                    { "emoji": "????", "name": "Grinning Face with Sweat" }, 
                    { "emoji": "????", "name": "Slightly Smiling Face" }, 
                    { "emoji": "????", "name": "Smiling Face with Smiling Eyes" }, 
                    { "emoji": "????", "name": "Smiling Face with Halo" }, 
                    { "emoji": "????", "name": "Smiling Face with Hearts" }, 
                    { "emoji": "????", "name": "Heart Eyes" }, 
                    { "emoji": "????", "name": "Face Blowing a Kiss" }, 
                    { "emoji": "????", "name": "Kissing Face" }, 
                    { "emoji": "????", "name": "Kissing Face with Closed Eyes" } 
                ] 
}