Ben Hobgood1,791 Points
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:
- Refactored repeated code in Button creation to be an arrow function.
- Created two functions to handle disabling & activating buttons.
- 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).
- Created a function to create new list items
- Created a new event listener that adds a list item on hitting the 'return' key within the input field.
- Added crawl function to events to initialization of script & any listeners that affected order (addition / movement / subtraction)
Steven Parker171,041 Points
Nice enhancements! 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" propertyturns out it is!