So how did it go?

Were you able to write a feature that lets users move a list item down,

just as they're able to move them up?

Even if you wrote some parts, that still good.

So now I'm gonna show you what I did.

This solution turned out to be very similar to the one that moved

list items upwards in the list, with a few subtle differences.

So I started by adding down buttons to index.html, then in app.js,

I copied the up button's handler below itself to provide a basic template,

and changed the condition to check if the target's class name is down.

Now, I still needed the list item and its parent, so I left those lines alone.

But to move the target list item down,

I needed the next sibling rather than the previous one.

So I created this nextLi variable, and used li.next.ElementSibling.

So this if statement ensures I only try to move the list item down if it

isn't the last child of the ul.

But if it is the last child, the variable nextLi would be null, and

the code in the if statement wouldn't run.

This was a little tricky because as I mentioned earlier,

there is no insert after method.

So to use insert before, the next sibling becomes the element we want to move,

and we want to put it before the target list item,

which is used as the reference node here in the insertBefore method.

This still accomplishes the move we want to make, but

it requires us to sort of reverse our thinking in a way.

Testing this in the browser,

clicking the down button gives us the behavior we're going for.

And if the element we want to move is the last item in the list,

nothing happens, great.

All right so our little list building app is starting to take shape.

As we've been adding to it, there are a few issues with it though.

So in the next video, we'll tackle some of these issues and refactor our code,

I'll see you there.