Text to Emoji Translator using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023

In this article, we will explore how to create a TextEmoji Translator using HTML, CSS, and JavaScript, that allows users to convert emojis into text and text into emojis. Emojis are a fun and expressive way to add color, emotions, and context to your messages, making your conversations more lively and engaging. We’ve created a simple tool that lets you effortlessly switch between emojis and text. With our user-friendly interface, you’ll find it easy to convert emojis to text or text to emojis. Just enter your message in one input box, click ‘Submit,’ and watch the magic happen.

Note: Registration at emoji api for getting the access key.

Preview

Approach

Create a container using <div> such that there are two input boxes with two buttons for converting text to emoji and vice versa.
Now style the card made with HTML and align it at the center position by using flex properties.
In JavaScript fetch the API, check if the API working or not, and accordingly store this as a response.
Now make two functions convertIntoText() and convertIntoEmoji() for converting emoji to text and text to emoji.
Also, check if users do not enter anything in the input box then simply alert a message showing “Please, provide text to get its emoji !”

Example: This example describes the basic implementation to create a textemoji transalator using HTML, CSS, and JavaScript.

Javascript

const textInput = document.querySelector(".text-input") 
const emojiInput = document.querySelector(".emoji-input") 
const result = document.querySelector(".result") 
  
let accessKey = ""
function convertIntoText() { 
  
    const emoji = emojiInput.value; 
    if (emoji) { 
        callApi(emoji, "convertIntoText") 
    } 
    else { 
        alert("Please, provide emoji to get it's text value !") 
    } 
} 
  
function callApi(input, type) { 
  
    fetch( 
`https://emoji-api.../emojis?search=${input}&access_key=${accessKey}`) 
    .then( 
        response => response.json() 
    ).then((data) => { 
        response = data; 
        if (response.status && response.status == "error") { 
            alert("No result found for this query !") 
        } 
        else { 
            const emojiOutput = response[0] 
  
            if (type == "convertIntoEmoji") { 
                flag = false; 
                var textUnicode = ""
                var textList = [] 
                for (const item of response) { 
                    textUnicode = item.unicodeName; 
                    textList = textUnicode.split(" ") 
                    textList.shift() 
                    var textEmoji = textList.join("") 
  
                    if (textEmoji == input) { 
                        result.innerHTML =  
                            `<p>${item.character}</p>` 
                        flag = true; 
                        break; 
                    } 
                } 
                if (flag == false) { 
                    result.innerHTML =  
                        `<p>${emojiOutput.character}</p>` 
                } 
                emojiInput.value = '' 
            } 
            else { 
                flag = false; 
                for (const emoji of response) { 
                    if (emoji.character == input) { 
                        var unicode = emoji.unicodeName; 
                        var tempList = unicode.split(" ") 
                        tempList.shift() 
                        var realEmoji = tempList.join("") 
                        result.innerHTML = `<p>${realEmoji}</p>` 
                        flag = true; 
                        break; 
                    } 
                } 
                if (flag == false) { 
                    result.innerHTML =  
                        `<p>${emojiOutput.subGroup}</p>` 
                } 
                textInput.value = '' 
            } 
        } 
    }) 
} 
  
function convertIntoEmoji() { 
    const text = textInput.value; 
    if (text) { 
        callApi(text, "convertIntoEmoji"); 
    } 
    else { 
        alert("Please, provide text to get it's emoji !") 
    } 
}

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Emoji Text</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <h1>Emoji ⇔ Text Converter</h1> 
  
    <div class="container"> 
  
        <!-- Input field and button for  
            converting emoji into text -->
        <div class="emojiToText"> 
            <input type="text" class="emoji-input"> 
            <button onclick="convertIntoText()"> 
                Convert Into Text 
            </button> 
        </div> 
  
        <!-- Input field and button for  
            converting text into emoji -->
        <div class="emojiToText"> 
            <input type="text" class="text-input"> 
            <button onclick="convertIntoEmoji()"> 
                Convert Into Emoji 
            </button> 
        </div> 
  
        <!-- Output section displaying the result -->
        <div class="output"> 
            <h2>Result</h2> 
            <div class="result"> 
            </div> 
        </div> 
    </div> 
      
    <!-- Including external JavaScript file -->
    <script src="./script.js"></script> 
</body> 
  
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
  
body { 
    background-color: #2f8d46; 
} 
  
h1 { 
    color: #fff; 
    text-align: center; 
    margin-top: 40px; 
} 
  
.container { 
    height: 500px; 
    width: 500px; 
    background-color: #fff; 
    border-radius: 15px; 
    margin: auto; 
    align-items: center; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    margin-top: 1%; 
} 
  
button { 
    background-color: #2f8d46; 
    color: white; 
    width: 180px; 
    height: 50px; 
    border-radius: 10px; 
    font-size: medium; 
    border-color: #2f8d46; 
} 
  
button:hover { 
    background-color: #fff; 
    color: #2f8d46; 
    border-color: #2f8d46; 
    border: 3px solid #2f8d46; 
} 
  
input { 
    width: 200px; 
    height: 40px; 
    border-radius: 20px; 
    font-size: 17px; 
    padding-left: 10px; 
} 
  
.emojiToText { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: 60px; 
    gap: 9px; 
} 
  
.result { 
    width: 200px; 
    height: 80px; 
    background-color: #fff; 
    color: black; 
    border-radius: 10px; 
    border: 2px solid #2f8d46; 
} 
  
h2 { 
    color: #000; 
} 
  
.output { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
  
p { 
    text-align: center; 
    font-size: 20px; 
    margin: 20px; 
}