Now that we've got Temel set up, we're ready to bring the JavaScript in and we need to create some
interaction within our form elements.
So we've got a number of different form elements.
We've got a select as well as inputs that we want to make interactive, starting out with selecting
the element for select so that whenever one of these options is changed, let's first set that up within
an object.
I just call that cell and then using a document and we can use query selector.
We only got the one so we can use query selector for this one and selecting the element that has the
tag of we can refresh and then make sure that we do have the right object.
We can ready to adding an event listener for that.
And then we've got a series of inputs.
So let's set up an object for that as well, where we can use JavaScript to get all of the input.
We can call it input all.
And we're going to use document, query, selector and query selector also that we're selecting all
of the element inputs and then as they get clicked, then we can distinguish between them next adding
in the event listener.
So we've got our sell object that we see over here doing add event listener and the event listener that
we're listening for is change.
And whenever it changes, then we're going to invoke a function and we can call that function, build.
So run that function, build.
And next, we also want to add event listener.
We need to create that function.
Of course, let me create that, creating a blank placeholder for that right now.
It will pass in the event object actually won't matter which element triggers the build event, because
we are going to be looking through all of these inputs in order to create our string so so we can set
them all to be.
Invoking the same function, and we see that here, we've got a. list so we can loop through the node
list and with six we can use for each.
And if you're using earlier versions, if you want compatibility, you can use just a regular for loop.
But in this case, let's do this within this type of format where we're going to use for each and this
will loop through each one of the items.
So using a function and then we've got the item that we can list out.
I'll see what that looks like before we add the event.
Listener and as we refresh, we see we've got all of the inputs get listed in our console.
So that's actually exactly what we want.
Want all of these inputs listed in the console so that we can attach that listeners to them.
So that's where we've got item.
And because this is now in an object format, we can add the event listener change to that item.
So refresh one more time.
And now whenever I make any of these changes, you're going to see that this gets invoked.
So if I type something in here, if I update the color, if I update this color, you see that we're
always invoking this function build and we're adding something within the console, within the console
message.
So coming up next, our objective is to take the values that we've got within these input fields and
then simply add them into our string.
So that's still to come in the upcoming lesson where we're going to build out our placeholder image
path.
So set up your event listeners to your inputs and test them out, make sure that they're working using
the console log.