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 and the DOM (Retiring) Traversing the DOM Getting the First and Last Child

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points
Posted by Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points

Can someone check my code for the last challenge?

https://w.trhou.se/fend3x5dmt

Added more comments to the code here

The code works in almost all situations except when there are only 2 list items in ul. I tried adding more if statements but it only messes up rest of my code.

The goal of the program is that in the list you should be able to move up and down & add and remove items from the list using the buttons. The challenge is that at any point of time first element should have a blue background and no up button & the last list item should have a grey background color and no down button.

I have solved for most use cases like if the first element goes down the list the next sibling gets the blue color and up button is removed etc.

The problem I am facing is if there are only 2 elements are there in the list. When using the up and down buttons they should have the appropriate color and buttons.

Also is the program using the dry method properly I feel like I have too many functions in there.

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Devjyoti I am not exactly sure what functionality you would like checked. Can you provide a little more detail on what you would like to have reviewed?

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points
Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points

I have edited the post see if that makes sense and let me know if I need to add more info. I think the challenge would be better explained by the video https://teamtreehouse.com/library/getting-the-first-and-last-child

1 Answer

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Here is a snapshot of how I may have gone about coding. Please keep in mind that this is a pretty quick and dirty attempt so I didn't make a strong attempt at styling elements or refactoring code. My Workspace

Some of the main differences are that I controlled the colors of the first and last list items with css. I also handled hiding the up button of the first item and the down button of the last item using css. (All added to the end of the css file). This approach is nice because it will hide the buttons even if the user has javascript turned off.

Everything else was pretty much handled in a handful of event listener anonymous functions. You could break those out into named functions that are called in the event listener, but since there really isn't much functionality that is repeated I chose to just use the anonymous functions instead.

The list items themselves are creating using template literals in the event listener that is adding the new list items. Here is a video in the Treehouse library explaining template literals. They are really handy in keeping code readable and compact.

If there is anything else in my code that you would like me to explain, please let me know.