I was working on a job today, to customize a pinboard application so that it would also have the functionality to add emojis.

I've been trying the module emoji-picker-element from which I can get hold of the selected emoji when I have its picker pop-up over the app.

The pre-existing app already has functionality to add colored stickers to the cards and post-it notes on the pinboard. This stores the id of each sticker, by it's id, for example, 'sticker-red', in the database. On reaload the app retrieves these ids from the database and repopulates all the cards with their stickers based on these ids.

I wanted my emojis to hitch a ride on this functionality, but how to store the emoji image without creating extra database code?

I was thinking, well emoji are just unicode characters, what if I put the emoji straight into the id, and store it on the database? Something like:

emojiSticker.id = 'emoji-' + event.detail.unicode;

Which created an id like:

emoji-😄

It can't possibly work, right?

Well, it did. On the render code, instead of retrieving a hard-wired image, as the stickers did, I split the id on "-", checked if the first part of the id was "emoji" and if it was, rendered a div, setting the innerHTML to the emoji taken as the second array element from splitting the id.

Nice!