Are you ready for another challenge?
This is challenge number two, where we're going to take a list using an unordered list and also add
an input element, take the value from the input element when the button gets clicked and add it to
our list items.
We've got some source code here that you can use or you can use the default document that we've been
using earlier.
So it doesn't matter as long as you've got an unordered list and input as well as a button in order
to activate that input.
And also as a bonus, if you do want to try this, you can add a condition to check to see if the input
value has more than three characters.
And if it does, then that's the only time that that item gets added to the list.
So you can add that in as well.
And in order to get back the value from an element, from an input element, so you need to select the
element the same way that we've selected the other elements.
And in this case, in order to get the value, you can select Dorte value.
So that's where that value is contained within that object.
So you can pause the video here.
I'll give you a quick sneak peek at the solution where we've got the input element, dot value, and
that's returning back the value of that input element.
So pause the video, try it out and I'll walk you through the solution coming up.
So with our editor and we do need to add one other thing we've added in an input field.
So this is just we only have the one input field.
And I'm also going to add in a button.
And I can just simply just to add to the button.
So if you have more than one input field, more than one button, then you're going to have to make
them more unique.
But in this case, I only have the two on the page and I'm going to select them by the tag name.
So first, we need to select our mailing list that we're going to be using.
And this is going to be where we're going to have all of the unordered lists.
So all of the under the unordered list and the list items are all going to be sitting within this main
list.
So when I refresh this and if I look at the main list object, you can see that we've selected the unordered
list and we only, of course, only have the one on the page.
There's also the input element.
So we want to get the value that's contained within the input element.
And once again, only one of those available on the page so we can select it using query selector.
So input tag and let's just double check that we have it.
So we do have that.
And if I put a value in here, select value, you can see the value gets returned.
So that's how we can get the value from the input field.
And then also we need to track the button, so need to add an event listener to the button.
So again, only one button.
So it makes it really easy to make that selection.
So selecting the button and this is where we're adding the event listener and the event that we're listening
for is a click and we can just do it as an anonymous function.
So whatever the button gets clicked, then that's when we want to invoke our function and we want to
append.
So we want to create a new element and append it to the list with the contents of the input.
So let's first create a list.
So using document creates element and the element that we're creating is a list item.
We also want to have a text node.
So temp text and this is where we're going to create text node and the value of the text node is going
to be coming from the input element.
So that's the same value that's contained within there at the time when we click the button.
So we're just going to select that value.
And of course, we do need to specify it's the value of that object that we want to use it.
Next, we need to upend the temp text to the list item.
So append the text content and then selecting our main list, we're going to append a child to it.
And the child that we're pending is the list item object that we've just created.
So let's try that.
And going down to here, we hit test and you can see that it's getting added to the list.
And I know this is this is kind of small.
I'll make it a little bit bigger and we'll go on the bigger screen.
So whatever I type into here, you can see it gets added to the end of the list.
And if we do inspect on that element, you can see these elements are being created.
There's not a whole lot being contained within them.
All the new ones just are just regular list items, what the text node inside.
And you can become more creative if you want to as well.
So there was a bonus to this and that was to check to see if the input element value length is greater
than three.
And if it is, then that's when we only add it, otherwise we're not going to add it.
So going down here, if we only have two values, it's not going to add it three values, it's not going
to add it, but it will add that to the list when there's four characters within the input value.
So coming up, one more challenge that's still to come.