JavaScript Emoji Selector Using Fetch

[MUSIC] 0:00 Hey everyone, what's up? 0:09 My name's Dustin, and I'm a developer and technical evangelist here at Treehouse. 0:10 Take a look at this simple chat app that I built. 0:14 Want to know how I got all these emojis in here? 0:17 Well, I'll give you a hint. 0:20 I didn't code each one in. 0:21 I used fetch to connect to the Open Emoji API. 0:23 These are all coming in dynamically and it's not hard to do. 0:28 In this tutorial, I'll show you how I got this done. 0:31 And also, be sure to stick around to the end and 0:34 I'll show you how we can search through all these emojis. 0:37 It'll be pretty fun. 0:40 Before we get started, I do wanna mention that I won't be coding out the UI for 0:42 this tutorial. 0:46 I'll only be going over the JavaScript, but 0:47 if that is something that you'd like to see, be sure to let me know. 0:49 Most of the concepts covered in this tutorial can be found in our 0:53 JavaScript Basics course. 0:57 So if you need a refresher or 0:58 some of these concepts just don't make sense to you yet, that's totally okay. 1:00 Be sure to check out the teacher's notes or description to get a link to that 1:05 course, as well as other resources to help get you started with JavaScript. 1:09 Lastly, make sure to download the GitHub repo associated with this project if 1:14 you'd like to follow along. 1:18 So let's get started. 1:19 As I mentioned, the styles for this are already done, and 1:22 we are only gonna be working on the JavaScript. 1:25 So the first thing that we'll wanna do is basically toggle our 1:28 menu when we click on the emoji icon. 1:33 So if we take a look at this in the browser, 1:36 we can see that we have an ID of emoji selector icon. 1:39 And above it, we have an ID of emoji-selector, which this is the actual 1:44 menu that holds all the emojis, and giving it a class of active shows it. 1:49 So let's go ahead and do that in the JavaScript. 1:54 We can start by setting up some variables. 1:57 We can write, const emojiSelectorIcon = 2:00 document.getElementById('emojiSelectorIco- n'). 2:04 And for the menu we can write, const emojiSelector = 2:09 document.getElementById('emojiSelector'). 2:13 Now once we have that, all we need to do is just write an event listener for 2:22 our emojiSelectorIcon. 2:27 So we can do emojiSelectorIcon.addEventListener, and 2:28 we wanna listen for clicks. 2:32 So we'll give it the click event. 2:35 And inside of this, we will just toggle the active class on our menu, 2:37 which is the emojiSelector. 2:42 So we can write, emojiSelector.classList.toggle('active'). 2:44 And if we hit save and we check out the browser, our menu now pops up and 2:50 goes away as we click the emoji icon. 2:55 Perfect, now that our menu displays when we click on the icon, 2:58 we need to start adding in our emojis. 3:02 So head on over to emoji-api.com, and your page might not look like this. 3:05 I've already set this up with my email, so wherever you go to this page, 3:11 it should look similar to this, where you need to put in your email address and 3:16 click on the get a key button. 3:20 Once you've set this up with your email and you have an API key, scroll down 3:24 to the documentation and you'll see a list of all emojis, searching for emojis, 3:29 getting a single emoji, categories, and emojis in a category. 3:35 But the only one that we're gonna be working with is just listing out 3:40 all the emojis, and your API key should be in this link that they provide. 3:44 So let's copy that and let's head back into our app.js file. 3:50 So to get started using fetch, just write fetch as a method, and 3:57 inside paste in that link as a string. 4:01 Now, because fetch returns a promise, we can use .then, 4:04 and we can take the response and convert it to JSON. 4:08 If the response comes back successful, we'll get some data back from this API. 4:14 So let's log that in the console. 4:18 We can do another .then and console.log(data). 4:22 If we hit save and check out the browser console, we should see a really, 4:27 really big array full of emojis, and sweet, we do. 4:33 Awesome, I'll click on one of these and see what type of data we're getting back. 4:38 So it looks like we get a whole bunch of things. 4:44 We'll definitely be using the character, as well as the slug. 4:46 So first thing, let's just start adding all these emojis to the page, and 4:49 we'll create a function to do this for us. 4:54 We can call this function loadEmoji, and 4:57 it'll take the data that we get back from the API as a parameter. 5:00 So let's change console.log in the .then to loadEmoji. 5:05 And underneath, we'll have our function for our loadEmoji. 5:11 So what do we wanna do? 5:16 Well, we want to create a new list item that holds the emoji for 5:18 each emoji that we get back from this API. 5:23 So let's take our data parameter and run a loop on this. 5:27 We can write data.forEach, and for each emoji we'll create a brand new list item. 5:32 So we'll do let li = document.createElement('li'). 5:38 I mentioned earlier that we will add a search feature to this, 5:44 so in order to grab a unique piece of data tied to each emoji, 5:48 we'll set an attribute on each li that has the emoji name. 5:53 So for this we can just write, li.setAttribute, and 5:57 the first parameter will be the attribute name, which will be emoji-name. 6:01 And if we go back into the console and take a look at the data we get back, 6:06 we'll notice that slug has the name of the emoji. 6:11 So for the second parameter we'll do emoji.slug. 6:14 And now we should get a attribute for emoji-name on each list item. 6:18 And then we can just set the list item's textContent equal to the character. 6:24 So we'll do emoji.character. 6:30 That should be everything that we need for our list item, so 6:34 the only thing left to do is to append this list item. 6:37 So we need to grab the ul that these list items live in. 6:40 So if we check out the console, 6:44 we'll see that emoji selector has a ul inside of it with the ID of emoji-list. 6:47 So let's create a variable for this. 6:53 We'll write, const emojiList = document.getElementById('emojiList'). 6:56 And at the bottom of our for each loop that we're running on our data, 7:03 we can just write emojiList.appendChild(li). 7:09 And this should be all that we need inside of our loadEmoji 7:15 function to load all of our emojis. 7:20 So, let's check it out in the browser, and 7:23 it looks like we have all of our emojis now in our emoji selector. 7:26 Sweet, so the next step would be to be able to 7:30 add a searching feature to our emoji selector. 7:34 And this is pretty simple. 7:38 So let's hop back into our app.js file, 7:40 and underneath our function for loadEmoji, 7:44 we will create a event listener on our input. 7:48 And we'll notice that this input has an ID of emojiSearch. 7:53 So as always, let's set up a variable. 7:56 We'll write, const emojiSearch = 7:59 document.getElementById('emojiSearch'), and 8:02 we'll come back down to the bottom of the file underneath our loadEmoji function. 8:06 And we'll write our event listener, so 8:13 we'll write emojiSearch.addEventListener, and we want to listen for keyup. 8:16 And we wanna take in the event. 8:21 So let's first log our value. 8:25 Let's write, let value = event.target.value, and 8:28 we'll log this to the console just to make sure this is all working. 8:32 So let's hit save, and we will go hop into our browser and jump into the console. 8:36 We'll click on our menu and start typing, and, sweet, 8:44 it looks like everything's getting logged to the console. 8:46 So, let's go ahead and delete our console.log, 8:49 since we know that this is working, and let's grab every instance of our emojis. 8:52 So, we can write, let emojis = document.querySelectorAll, 8:58 and we will target the ul emojiList, and all list items inside of it. 9:04 So now that we have a variable that holds all of our emojis, 9:12 let's run a forEach loop on this. 9:15 We can write emojis.forEach, and we'll set up a variable called emoji. 9:17 And we're just gonna test that what we type in our input field is equal to 9:23 the emoji name. 9:27 So we can just write, if emoji.getAttribute('emoji-name'), 9:28 and we'll do .toLowerCase just to make sure everything works. 9:34 And we'll write .includes our value, and if this is true, 9:38 we want to make sure that emoji is showing. 9:43 So we'll set that emoji's display property to flex, 9:47 since in the styles we are using flex for the li items. 9:51 So we write emoji.style.display = 'flex';, else we wanna hide it, 9:55 so we can write emoji.style.display = 'none', so that should be all we need. 10:00 Let's hit save and check out the browser. 10:06 If we click on our menu and start typing, it looks like it's working. 10:09 If I type in cat, we see all the cat emojis, and if I type in hearts, 10:13 we start seeing hearts. 10:18 Perfect, we now have a fully functioning emoji selector for our chat app. 10:19 And it really did not take a whole lot of JavaScript. 10:25 Pretty neat. 10:28 You can surely make some pretty awesome and powerful websites and 10:29 apps using the browser's built-in fetch API. 10:33 I hope this guide helps, and I'll see you in the next one. 10:35 As always, have fun and happy coding. 10:38

You need to sign up for Treehouse in order to set up Workspace

Sign up