Treehouse Code Adventures > Message Pins Component

Message Pins 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: 5 hours

JavaScript Basics

In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.

JavaScript Numbers

In this course, you'll learn how to use numbers for useful tasks in your JavaScript programs, including doing math, converting strings to numbers, generating random numbers, and more.

JavaScript Functions

JavaScript functions let you create reusable chunks of code. They make programming faster, easier, and less error-prone.

JavaScript Loops

Loops are a way of repeating code -- they're handy for repetitive tasks. Loops are frequently used for actions that need to run a particular number of times or until a certain condition is true.

JavaScript and the DOM

JavaScript lets you create interactive web pages which can respond to a user's actions. In this course, you'll learn how to bring web pages to life using the power of JavaScript.

Interacting with the DOM

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener.

DOM Scripting By Example

Use JavaScript to build an RSVP web application. Many of the features you'll build are common to other web applications.

Create a Chat App UI

In this live demonstration, Dustin builds a chat app UI (user interface) using HTML, CSS, and JavaScript. The slick design includes a toggle button for dark mode. The GitHub link in the teacher's notes includes both the starter files and the completed code. You can follow along and build the project yourself, as well as study Dustin's version. Note that he builds only the UI, not the chat app itself.

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 message app with various conversations.
2
Add logic to allow users to "pin" a message to the top of the UI for easy access.
3
As always, ensure that the code is accessible and adheres to WCAG standards.