Treehouse Code Adventures > Message Reactions Component

Message Reactions Component

Ever notice on iMessage or other various messaging services, you can pin your favorite conversations? This Code Adventure will allow you to write the functionality to do just that. Use any tech you'd like; vanilla JavaScript, React, Vue, etc. to build out a message pins component!

Start Adventure

Created: 04/26/2024 by Dustin Usey

Skill level: advanced

Topics used: HTML CSS JavaScript

Estimated completion time: 6 hours

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.