Message Reactions Component
Message Reactions Component
Want to add reactions to your messages? Completing this Code Adventure will allow you to have a functioning emoji menu to add reactions to your favorite messages!
Created: 04/26/2024 by Dustin Usey
Skill level: advanced
Topics used: HTML CSS JavaScript
Estimated completion time: 6 hours
Want to add reactions to your messages? Completing this Code Adventure will allow you to have a functioning emoji menu to add reactions to your favorite messages!
Using Local Storage With JavaScript
Local Storage is part of the Web Storage API, and allows you, as a developer, to store data in a user's browser.
Working with the Fetch API
Learn how to use the Fetch API to fetch resources.
JavaScript Array Iteration Methods
Learn how to access and transform data in arrays with JavaScript's array iteration methods.
JavaScript Array Methods: filter()
Have you ever needed to filter array elements by certain criteria? For example, to get numbers within a range, or strings that contain certain characters? Luckily, there is an easy way to do this in JavaScript by using the filter() method. Follow along as Dustin dives into how to use this method and what it can do. Then, he offers a challenge (and a solution) so you can get some practice using it right away.
JavaScript Emoji Selector Using Fetch
There are APIs for just about everything. In this workshop, 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.
JavaScript Search
Letting users search through data in your application or website is a great UX feature. Building out this type of functionality isn't as hard as you may think. With some basic JavaScript, we can tackle the filtering and searching of data. Follow along as I add a search feature with vanilla JavaScript that allows the user to search for a specific author in a list of authors!
-
0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
-
1
Follow the mockups to replicate as best you can a reactions component with which is populated with emojis from an emoji API.
-
2
Add logic to allow the user to select an emoji from a list of emojis. Upon selecting that emoji, it appears at the bottom of another user's message. You should be able to add multiple emojis.
-
3
As always, ensure that the code is accessible and adheres to WCAG standards.
-
4
Extra Challenge: Allow a "history" or "most popular" emoji view that users can use to select recently/frequently used emojis.
-
5
Extra Challenge: Use localstorage to save history/frequently used emojis.
-
6
Extra Challenge: Allow users to search for an emoji by keyword.