JavaScript Emoji Selector Using Fetch

We offer free trials - learn JavaScript with us!
There are APIs for just about everything. I'll take you through how to connect to an API using fetch. We'll add a feature to a chat application to toggle a menu full of emojis that are coming from the open-emoji API. Start your free trial to learn more! trhouse.co/43n...
Blog article
trhouse.co/3BR...
GitHub repository
github.com/tre...
Related Courses:
JavaScript Basics (course)
trhouse.co/3MC...
Working With the Fetch API (course)
trhouse.co/45t...
Resources:
MDN Docs - Fetch API
developer.mozi...
MDN Docs - forEach()
developer.mozi...
MDN Docs - includes()
developer.mozi...
Chapters:
0:00 Intro / Project overview
1:21 Toggling the Emoji menu
3:00 Fetching the API data
7:31 Searching through Emojis
10:29 Outro
#javascript #html #css #api
---
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
Follow Us!
Twitter: / treehouse
Instagram: / teamtreehouse
LinkedIn: / treehouse-island-inc-
Facebook: / teamtreehouse
#coding #programming #javascript

[@gabeadams2926]

As someone who has been working on data heavy Angular projects for the last few years it’s always refreshing to watch a video on plain old vanilla JS. Great content!

[@steva1312]

Really helpful and high quality video. Thank you!

[@inusahrauf1810]

Great work

[@s1ckest_]

thank you very much friend, I urgently needed to update my drives and you saved me, THANK YOU SO MUCH

[@MeonisRP]

Quite helpful!

[@markkithinji2666]

Yooow😂, this works so awesome. thanks my guy

[@Ahabib2009]

Thanks

[@flobexnet]

Only do not understand how to avoid segoe ui emoji font, because on my screen I see other emojis, when I user that API, no such design. And changing settings in css file nothing changes(

[@gotreehouse]

Hey there! Please join us on our community Discord server so we can more easily troubleshoot your code :) trhouse.co/JoinDiscord

[@RedWax.]

Thx I was going to create each emojis manually 💀

[@gotreehouse]

APIs are such a time saver! 😎

[@jatustudiobox3986]

Thanks so much. I have some problem. Does using open-emoiji API appropiate with shared component or not? Because it is use same API key. 🤔

[@gotreehouse]

I'm not sure I fully understand your question. Could you explain a bit more? 🙂

[@jatustudiobox3986]

@@gotreehouse Sorry for late reply. My purpose is creating Node-RED package. Then upload this package to npm for everyone. So, if my package has emoji-picker, which use open-emoji API "with my api key". I am not sure, could there be a problem? 😅

[@gross3352]

why i cant find the web site of api ? it diesnt existe anymore ?

[@gotreehouse]

It seems like the site has been down for a little while. Hopefully it'll come back up. Until then, feel free to google search free emoji APIs that are available and use this guide as a reference to build your own emoji selector using another API. 😃

[@gotreehouse]

Looks like the emoji-api site is back up and running! 😎

[@markkithinji2666]

@@gotreehouse Is it reliable. Like does it keep going down

[@pseuda]

It seems emoji-api site has been down for a while... Alternatives?

[@gotreehouse]

That's unfortunate that the API is down. Hopefully it'll come back up. There are other emoji APIs out there that are free. A quick google search should turn up some alternatives. I just want to note that it'll be very beneficial to read their documentation as the API may be structured differently from emoji-api so the code you write may need be adjusted.

[@gotreehouse]

Looks like the emoji-api site is back up and running! 😎