Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Objects Loop Through Objects Display an Array of Objects on the Page – One Solution

Posted by Berian Lowe
Berian Lowe
22,438 Points

My solution to displaying an array of objects on a page.

Hi all,

Thought I'd share my solution to this task. I've been going through the courses and taking inspiration from the exercises provided and tried to improve on them.

In my version, I've styled the page using DaisyUI and Tailwind CSS, added a larger array of objects, which render in a random order as cards on the page. Hovering over these cards will apply a subtle zoom to the card. There is a search bar which filters the array in realtime.

The page is also responsive, so the number of cards in a row is different dependant on what device (or browser size) is used.

See my solution here.

Kind regards, Berian

Martin Balon
Martin Balon
43,651 Points
Martin Balon
Martin Balon
43,651 Points

Well done. Just two things to consider: The first media query needs repeat to be set to 2 not 1, so you have 1, 2, 3, and 4 col layout. Also, specify break points in em instead of pixels. Specifying break points in em proved to be most consistent across all browsers and devices.

Berian Lowe
Berian Lowe
22,438 Points

Thanks Martin,

Your feedback is very appreciated! I will apply these changes when I get chance later!

Kind regards, Berian

3 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Those frameworks really make that exercise look good! :+1:

My only suggestion is that the zoom effect was a bit sudden, but adding about 200ms transition to it makes it really nice.

Berian Lowe
Berian Lowe
22,438 Points
Berian Lowe
Berian Lowe
22,438 Points

Thank you both for the feedback, I've made some amends including what you both spoke about!

  • The zoom effect now has a transition
  • The media query has been fixed, looks like this was a typo, as it didn't make any sense to why I set that to one!
  • I've manually over-ridden tailwind's media breakpoints to use em rather than px.
  • Added a no pets found alert when a search returns no results.
jessegauthier4
PLUS
jessegauthier4
Courses Plus Student 35 Points
jessegauthier4
jessegauthier4
Courses Plus Student 35 Points

You did a very good job with displaying the objects.

My thoughts:

Using JavaScript to apply the card transition and transform would be best applied in your CSS file utilizing the hover selector. Doing so helps retain cleaner more readable code, and scalable code.

Two Things to consider: 1) Would your code run without errors or a reduced user experience if one of the objects arrays was to have an invalid image path? 2) If the number of pets was to increase in a large scale, would your webpage provide the same loading speed for the user?