JavaScript Emoji

This code helps you to create an emoji. It imports the Bootstrap CSS library and creates a form with a text input and a set of emoji images that can be clicked to insert the corresponding emoji into the text input. The form is contained within a panel with a title “Emoji” and the text input has a placeholder “Put some text in here…”. The emoji images are contained within a div with class “emoji-picker” and have unique IDs. When an image is clicked, the corresponding emoji is inserted into the text input.

How to Create JavaScript Emoji

Create the HTML structure for the emojis as follows:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='container'>
<div class='col-md-6 col-md-offset-3'>
  <div class='panel panel-default'>
     <div class='panel-body'>
       <h3>Emoji</h3>
        <form>
     <div class='form-group'>
        <label>Text Input</label>
        <input type='text' class='form-control' id='emoji_text_box' placeholder='Put some text in here...'>
        </input>
      </div>
      <div class='form-group'>
         <div class='emoji-picker'>
 <img src='https://s3-us-west-1.amazonaws.com/wellstart-marketing/Misc/emoji/smile.png' class='img img-responsive emoji-btn' id='smile_emoji'></img>
  <img src='https://s3-us-west-1.amazonaws.com/wellstart-marketing/Misc/emoji/party.png' class='img img-responsive emoji-btn' id='party_emoji'></img>
  <img src='https://s3-us-west-1.amazonaws.com/wellstart-marketing/Misc/emoji/run.png' class='img img-responsive emoji-btn' id='run_emoji'></img>
  <img src='https://s3-us-west-1.amazonaws.com/wellstart-marketing/Misc/emoji/weights.png' class='img img-responsive emoji-btn' id='weights_emoji'></img>
  <img src='https://s3-us-west-1.amazonaws.com/wellstart-marketing/Misc/emoji/ok.png' class='img img-responsive emoji-btn' id='ok_emoji'></img>
  <img src='https://s3-us-west-1.amazonaws.com/wellstart-marketing/Misc/emoji/thumb.png' class='img img-responsive emoji-btn' id='thumb_emoji'></img>
</div>
    </div>
       </form>
     </div>
</div>
</div>

Now style the emojis using the following CSS styles:

.container {
  padding-top: 50px;
}

.emoji-picker {
  display: block;
  padding-top: 0px;
  border: 1px solid lightgray;
  padding: 2px;
  margin: 0px;
  background: white;
}
.cd__main{
display: block !important;
}
.emoji-picker .emoji-btn {
  display: inline;
  max-width: 30px;
  padding-top: 0px;
}

Finally, add the following JavaScript function for their functionality:

document.getElementById("smile_emoji").addEventListener('click', function () {
    document.getElementById('emoji_text_box').value = document.getElementById('emoji_text_box').value + "😃";
});

document.getElementById("party_emoji").addEventListener('click', function () {
    document.getElementById('emoji_text_box').value = document.getElementById('emoji_text_box').value + "🎉";
});

document.getElementById("run_emoji").addEventListener('click', function () {
    document.getElementById('emoji_text_box').value = document.getElementById('emoji_text_box').value + "🏃";
});

document.getElementById("thumb_emoji").addEventListener('click', function () {
    document.getElementById('emoji_text_box').value = document.getElementById('emoji_text_box').value + "👍";
});

document.getElementById("ok_emoji").addEventListener('click', function () {
    document.getElementById('emoji_text_box').value = document.getElementById('emoji_text_box').value + "👌";
});

document.getElementById("weights_emoji").addEventListener('click', function () {
    document.getElementById('emoji_text_box').value = document.getElementById('emoji_text_box').value + "🏋️";
});

That’s all! hopefully, you have successfully created the JavaScript emoji. If you have any questions or suggestions, feel free to comment below.