Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > Data Sorting Component

Data Sorting Component

Data Sorting Component

Giving the end-user multiple ways to sort/view their data is a great UX feature. This can be relatively easily by thinking ahead and writing some good CSS. Of course, minimal JavaScript as well.

Create a component that will allow users to see the exact same data in a minimum of 2 ways. As per the mockups; card view and list view.

Use vanilla JavaScript or any framework you'd like to tackle this Code Adventure!

Mobile icon Tablet icon
Start Adventure

Created: 04/26/2024 by Dustin Usey

Skill level: intermediate

Topics used: HTML CSS JavaScript

Estimated completion time: 2 hours

    Giving the end-user multiple ways to sort/view their data is a great UX feature. This can be relatively easily by thinking ahead and writing some good CSS. Of course, minimial javascript as well.

    Create a component that will allow users to see the exact same data in a minimum of 2 ways. As per the mockups; card view and list view.

    Use vanilla javascript or any framework you'd like to tackle this Code Adventure!

Code adventure mockup image

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.
Code adventure mockup image

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!
Code adventure mockup image

CSS Transitions and Transforms

With CSS transitions and transforms, you can create simple animations that enhance user interactions in websites and apps.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Create the UI as closely to the mockups as possible.

  3. 2

    Be sure to set up a "default view" with the corresponding icon having an active state.

  4. 3

    Upon clicking on a different view, active states should update respectively.

  5. 4

    Data should sort according to the active icon.

  6. 5

    Extra Challenge: Every item (card, list, etc) should have an animation.