(bright music)
- [Instructor] All right, one final challenge.
Here you'll be adding event listeners
to our existing project.
In this challenge, you'll create an event listener
to allow the user to update the strap length
for each of the backpacks independently,
and each backpack has two straps.
The end result is what you'll see here in my browser.
For each of the backpacks, we now have two input fields,
one for left and one for right.
And if I add a new value here and click update,
you'll see just this left strap length updates
and then just the right strap length updates.
And we can do that independently for each of the bags.
This entire functionality is powered by two forms,
so there's a form for each of these items.
Inside the form is an input field and a button.
And there's an event listener
listening to the submit event on the form.
Then when the submit event is triggered,
the script grabs the value from the input
and then passes the value up into the HTML here
as you can see the output.
Now while this is a form and we haven't worked
with forms before, everything that is done here
has been covered in the course already.
A form is just like any other element
and you can grab properties out of that element
and use it in different ways.
For this challenge, I've created two different paths
for you to choose from.
You can choose the intermediate path or the advanced path.
In the exercise files,
these two are captured in two separate files.
We have a script intermediate.js
and script advanced js.
And to start the exercise, you pick one of these two files
and then just change its file name to script.js
and that becomes your main file that you work with.
The difference between the two is
in the script intermediate you are focusing solely
on the event listener and nothing else.
It's described at the top here:
"Create an event listener by adding an event listener
"to each of the strap length forms."
And then updating strap length value
to the value submitted in the form.
In script advanced, there's a lot more going on.
Here, you have to set up the entire functionality.
So you have to first find the two elements
with the backpack strap class,
then create a function to output the strap length form,
iterate through each of the items,
then capture the value of the data site attribute
to indicate the strap side,
either left or right,
create a form element, populate the form element
with an input and a submit button,
and finally add an event listener and output the content.
This mention here, data side attribute,
if you scroll down into the content,
you'll see that each of these two items here
with the class backpack strap has
a data side attribute, left or right,
and you can use these to indicate
which one of the sides you are on right now
with classes and such.
If you choose script intermediate,
I encourage you to finish the challenge,
then watch my solution where I explain
how script advanced works, and then go back
and redo challenge using script advanced
to immediately solidify your learning.
After all, the purpose of these challenges
is not for me to test your knowledge,
but for you to challenge yourself.
And what better way to do that
than to first do a simple challenge and then expand
and do an advanced version of the same challenge?
Like I said, everything that's in this challenge
has already been covered in this course.
There's nothing new introduced
except that we're using a form
and forms work exactly like any other elements in HTML.
This challenge is the last one in the course
and I made it quite challenging.
So we'll set aside a good 20 minutes
before you jump to the next movie to see how I solved it.