(upbeat music)
- [Instructor] Ready for another challenge?
Here I want you to take everything you've learned so far
and put it all together to build an advanced function.
This is kind of a mega challenge.
In the exercise files for this challenge,
I've updated our projects
to provide a new folder called components
that holds our Backpack class,
as well as this new file called data.js.
Inside data.js, we import Backpack,
then we create two new Backpack object,
one with the name everydayPack,
and one with the name frogPack, and then down here,
we create a new constant called backpackObjectArray
that sets up an array
that contains these two Backpack objects.
So now we have an array of objects.
This Backpack object array is what's exported here down
at the bottom of data.js.
Your task is to now import that new object array
into script.js and then create a loop
that loops through each of the items of the array
to output the Backpack objects one at a time in the page.
That way, instead of having a page
that just has one Backpack,
you'll have a page that has two Backpacks.
Here's a breakdown of what you need to do.
First off, map through the data array
to output an HTML article for each of the objects.
And here we already have all the setup
for the HTML object and everything,
you just need to figure out how to grab each object
and pass it in and then have a variable names
that actually work.
And then secondly, you need to append each article
to the main elements,
so you can see them both in the browser.
You can solve this challenge
by expanding the code already in the exercise files
and do not take more than 20 minutes.
If by the end of 20 minutes you haven't solved it yet,
just stop what you're doing, go to the next movie
and watch my solution and then you can come back
to the challenge and try to solve it again.