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

Posted by Ben Hobgood
Ben Hobgood
1,791 Points

My solution for javascript list (disabling functionality buttons)

My Solution: https://w.trhou.se/olqht3o4o9

I personally didn't like the idea of a visual jump of buttons being added and created. I felt like it would give me a head ache to watch the buttons jump around. Additionally it would be a bad user experience if Up could be positioned where Down usually is. So instead I opted to 'gray out' and disable the buttons at the top and the bottom of the list.

Change Log from Original Script:

  1. Refactored repeated code in Button creation to be an arrow function.
  2. Created two functions to handle disabling & activating buttons.
  3. Created a function to crawl through the list and then adds buttons if they need to be added and updates the buttons to reflect the list item's position ( could be optimized further for performance).
  4. Created a function to create new list items
  5. Created a new event listener that adds a list item on hitting the 'return' key within the input field.
  6. Added crawl function to events to initialization of script & any listeners that affected order (addition / movement / subtraction)

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Nice enhancements! :+1: I also found that simply disabling the buttons created a more pleasant UX.

A couple of minor things I spotted in the code:

  • you don't need to use explicit css changes when you disable unless you don't like the default "dimmed" look
  • I don't think "cssText" (line 26) is actually a "style" property :point_left: turns out it is!
Ben Hobgood
Ben Hobgood
1,791 Points

Hey Steven. Thanks for the feedback. I was applying the style changes for visual reasons and cssText was used to wipe out the inline stylings I was using by setting the style attribute to blank. I wasn't sure of a better way to reset the button other then using class names to toggle between styles.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

You taught me something new! I was not previously aware of the properties of a CSSStyleDeclaration other than the style properties themselves.

And my comment about the default disabled appearance doesn't apply since these buttons are not using the default appearance.