JavaScript Emoji Selector [Article] | Treehouse Blog

I’d like to indicate you the way we are able to create an easy-to-use emoji selector for any web site or utility. We’ll use the browser’s built-in fetch API to hook up with the open-emoji API to show a listing of all emojis. If you happen to’d wish to code together with me, make sure to obtain the repository for this challenge to your machine and observe together with this weblog article. If movies are extra your factor, try our step-by-step video tutorial blow.

Getting Began

I’ve constructed out a easy chat-app utility. The HTML markup in addition to the types for this challenge are already accomplished. We are going to solely be going over the JavaScript performance within the app.js file. So with that stated, the one conditions can be to grasp some primary JavaScript. Our JavaScripts Fundamentals Course (linked beneath) can get you began with that when you want a refresher. I’ll additionally listing beneath a course that goes into far more element with fetch().

Let’s get began!

Treehouse Course: JavaScript Fundamentals Course

Treehouse Course: Working with the Fetch API

Easy methods to Toggle the Emoji Menu

Step one in constructing out this characteristic to our chat-app is to indicate and conceal the emoji menu when the emoji icon is clicked. That is very straightforward to do, so let’s get began there.

If you happen to check out the challenge within the browser after which examine the web page, you’ll see that the emoji icon is a listing merchandise with the id of emojiSelectorIcon. The listing merchandise immediately above that’s truly our menu. By default, it’s hidden but when we give it a category of energetic, it will likely be seen. This listing merchandise for our menu has an id of emojiSelector. Let’s use each of those ids and create some variables.

In our app.js file:

const emojiSelectorIcon = doc.getElementById('emojiSelectorIcon');
const emojiSelector = doc.getElementById('emojiSelector');

Now that we now have the variables arrange for our emoji-icon and our emoji-selector, let’s toggle that energetic class on the menu when the icon is clicked.

In our app.js file:

emojiSelectorIcon.addEventListener('click on', () => {
    emojiSelector.classList.toggle('energetic');
});

You need to now see the menu open and shut when clicking the emoji icon.

Easy methods to use the fetch API

Subsequent, we’ll want so as to add in our emojis. You’ll discover within the HTML that within our list-item for our menu, there’s a ul with the id of emojiList. That is the place we’ll append all of our emojis to the DOM.

Head on over to the Open Emoji API

You need to see a discipline so that you can put in your e mail tackle with a button saying get a key. Go forward and put in a sound e mail tackle. You’ll then obtain your API key.

Don’t copy my key. Remember to create your individual by offering your e mail tackle. Upon getting your API key, scroll right down to “Documentation” and also you’ll discover all of the totally different API endpoints. The one one we’ll be utilizing for this challenge is the primary one titled “Listing all emojis”. You need to discover your API key on the finish of the hyperlink for the API after “?access_key=”. If not, make sure to copy that hyperlink after which add in your API key.

https://emoji-api.com/emojis?access_key=<YOUR API KEY>

As soon as all of that’s prepared, it’s time to hop again into our `app.js` file and begin connecting to this API.

In our app.js file:

fetch('https://emoji-api.com/emojis?access_key=<YOUR API KEY>')
   .then(res => res.json())
   .then(information => console.log(information))

Inside the '' in our fetch methodology, paste in your API endpoint along with your API key. As a result of fetch returns a promise, we are able to chain on a .then() methodology. If our response comes again okay (res.standing === 200) we’ll convert it to json by writing .then(res => res.json()). We are going to get again some information. You’ll discover that I’m taking this information and logging it to the console. I usually at all times do that when working with an API to verify we’re getting information again. If you happen to hit save and checkout the console in your browser, it’s best to see an array holding all of our emojis.

We are going to wish to loop over each emoji and create a list-item for that emoji. Then append that list-item to our mother or father ul. This might be good for a operate. We will go the information holding our emojis from the API name as a parameter and run a forEach loop on that information. That is what that may seem like:

operate loadEmoji(information) {
    information.forEach(emoji => {
        let li = doc.createElement('li');
        li.textContent = emoji.character;
        emojiList.appendChild(li);
    });
}

Above, I created a operate named loadEmoji and handed in information as a parameter. Inside this operate, we’re operating a loop on information, which can maintain every merchandise in our array that we’re returning from our API name. Every array merchandise within the array is an object with that particular emoji’s information. Right here is one for instance:

character: "?",
codePoint: "1F47B",
group: "smileys-emotion",
slug: "ghost",
subGroup: "face-costume",
unicodeName: "ghost"

We’re first creating a brand new li ingredient after which setting the textContent of our li to the character of our object. Then, we’re appending that new li to our mother or father ul. That’s all we’ll want for our operate. So now we have to name it. Lets substitute our console.log(information) in our .then() methodology to loadEmoji(information). Now once we get again information from our API name, it’ll run that operate, which loops over all the info and creates a li ingredient with our emoji because the textContent.

? ? Nice work! You need to now see all of the emojis when clicking on the emoji icon!

Your completed code ought to seem like this:

const emojiSelectorIcon = doc.getElementById('emojiSelectorIcon');
const emojiSelector = doc.getElementById('emojiSelector');

emojiSelectorIcon.addEventListener('click on', () => {
   emojiSelector.classList.toggle('energetic');
});

fetch('https://emoji-api.com/emojis?access_key=<YOUR API KEY>')
   .then(res => res.json())
   .then(information => loadEmoji(information))

operate loadEmoji(information) {
   information.forEach(emoji => {
       let li = doc.createElement('li');
       li.textContent = emoji.character;
       emojiList.appendChild(li);
   });
}

Till subsequent time, have enjoyable and blissful coding! ?