JavaScript Emoji Selector [Article] | Treehouse Weblog

I’d like to indicate you ways we will create an easy-to-use emoji selector for any web site or software. We’ll use the browser’s built-in fetch API to connect with the open-emoji API to show a listing of all emojis. If you happen to’d wish to code together with me, you’ll want to obtain the repository for this venture to your machine and observe together with this weblog article.

Getting Began

I’ve constructed out a easy chat-app software. The HTML markup in addition to the types for this venture are already accomplished. We’ll solely be going over the JavaScript performance inside the app.js file. So with that mentioned, the one stipulations could be to know some primary JavaScript. Our JavaScripts Fundamentals Course (linked beneath) can get you began with that if you happen to want a refresher. I’ll additionally listing beneath a course that goes into rather more element with fetch().

Let’s get began!

Treehouse Course: JavaScript Fundamentals Course

Treehouse Course: Working with the Fetch API

How one can Toggle the Emoji Menu

Step one in constructing out this function 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 venture 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 straight above that’s truly our menu. By default, it’s hidden but when we give it a category of energetic, it is going to 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 have now 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 must now see the menu open and shut when clicking the emoji icon.

How one can use the fetch API

Subsequent, we’ll want so as to add in our emojis. You’ll discover within the HTML that inside 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 must see a subject so that you can put in your e mail handle with a button saying get a key. Go forward and put in a legitimate e mail handle. You’ll then obtain your API key.

Don’t copy my key. You should definitely create your individual by offering your e mail handle. Upon getting your API key, scroll all the way down to “Documentation” and also you’ll discover all of the totally different API endpoints. The one one we’ll be utilizing for this venture is the primary one titled “Listing all emojis”. You must discover your API key on the finish of the hyperlink for the API after “?access_key=”. If not, you’ll want 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 together with your API key. As a result of fetch returns a promise, we will 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’ll get again some information. You’ll discover that I’m taking this information and logging it to the console. I sometimes at all times do that when working with an API to ensure 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’ll need to loop over each emoji and create a list-item for that emoji. Then append that list-item to our mum or dad ul. This may be excellent for a perform. We are able to cross the information holding our emojis from the API name as a parameter and run a forEach loop on that information. That is what that can appear like:

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

Above, I created a perform named loadEmoji and handed in information as a parameter. Inside this perform, we’re working a loop on information, which can maintain every merchandise in our array that we’re coming back 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 mum or dad ul. That’s all we’ll want for our perform. So now we have to name it. Lets substitute our console.log(information) in our .then() methodology to loadEmoji(information). Now after we get again information from our API name, it’ll run that perform, which loops over all the info and creates a li ingredient with our emoji because the textContent.

🥳 🎉 Nice work! You must now see all of the emojis when clicking on the emoji icon!

Your completed code ought to appear 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))

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

Till subsequent time, have enjoyable and completely satisfied coding! 🙂