Project Nineteen: Emoji

#webdev #beginners #challenge #codingquokka

🎄 Ho-ho-ho! Christmas is almost there and I hope you're all ready to spread the holiday cheer 🎉

Which in written form wouldn't be possible without emojis!😍

Oh, those little pictures can make or break a relationship! A plain message without them sounds very serious and in some cases even angry 😅

Any more or less informal communication pretty much requires emojis - comments, posts, messages - you name it.

So what do you say about implementing an emoji keyboard and diving a bit into unicode symbols?

Emoji Keyboard: requirements and recipe

As a user I want to be access a table of available emojis so that I would be able to quickly pick and use one

The best example I can think of is Slack's implementation:

Of course, you don't need to neither support all the features it has nor limit yourself, as long as the keyboard meets the requirements:

User should be able to open and close emoji keyboard
User should be able to see all available emojis
User should be able to search through them
Keyboard should be accessible: i.e. all the labels should be present and navigation should be possible through keyboard

You can find all emojis, their names and codes in various unicode lists.

You can use Object.keys to get all available keys from a record to search by prefix or using a more complicated algorithm like soundex.

Slack, Github, Dev.to and plenty other services also allow users to type a special code for an emoji, e.g. :star: would turn into a "⭐".