Open In App

Create a Emoji Generator Using HTML CSS & JavaScript

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

Screenshot-2023-09-19-at-18-20-42-Emoji-Generator

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 JavaScript JavaScript

Output:


Next Article
Create an QR Code Generator Project using HTML CSS & JavaScript

G
gauravggeeksforgeeks
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox