Emoji selector in html webpage

Question

I have made a live-chat webpage with socket.io found it cool if there could also be an emoji selector button that brings up a list of emojis, just like you can use the "windows key + . period" but instead, just a button that can show a tab like that.

Would I need to use any API's or would there just be a manual feature I could just make, but copy all the emojis available into the tab when the button is clicked. At least, is there anything as the easiest option of making this?

Then when the "smile emojj" is clicked I would like it to make a div appear with all emojis like:

user_8964160 · Answer

Here is a very much a bare-bones version, but you could try something like this. I just copy and pasted a couple of emojis from here into the HTML and then used a bit of JS to add them to the end of the input. If you wanted to get more advanced you could try making it not lose focus when you click an emoji and insert it after the cursor instead of the end of the value.

function addEmoji(emoji) {
  let inputEle = document.getElementById('input');
  
  input.value += emoji;
}

function toggleEmojiDrawer() {
  let drawer = document.getElementById('drawer');
  
  if (drawer.classList.contains('hidden')) {
    drawer.classList.remove('hidden');
  } else {
    drawer.classList.add('hidden');
  }
}

.emoji-drawer {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    width: 100px;

    margin-bottom: 32px;
    transition: opacity 0.2s;
}

.hidden {
  opacity: 0;
}

.emoji {
    text-align: center;
    font-size: 24px;
    padding: 8px;
}

.emoji:hover {
    cursor: pointer;
}

Emoji selector in html webpage

1 Answers