Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice JavaScript Basics: Conditional Strings!
You have completed Practice JavaScript Basics: Conditional Strings!
Preview
This video covers one solution to the challenge.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
How did it go?
0:01
Did you get the superheroes displayed?
0:02
Don't worry if you didn't.
0:05
Keep watching to see one solution and
then go ahead and give it another try.
0:07
Let's start from the top.
0:12
First, I assign the array of objects
to the superheroes variable.
0:14
This allowed us to access and
manipulate the data provided directly.
0:20
For the dynamic insertion
into the webpage,
0:25
I targeted the main element which
will hold our superheros sections.
0:28
I cycled through each superhero in
our array using a classic for loop.
0:34
By doing this, I could work with
each superhero object individually.
0:40
I assembled a new HTML string for
each superhero inside this loop,
0:45
starting with an opening section tag,
an h2 element for the superhero's name.
0:51
Then, an unordered list to contain
the superhero's properties.
0:58
We used a set of if statements from
here to add li elements to our list
1:03
conditionally.
1:08
This method ensures that only
the properties that exist and
1:10
have values are added.
1:14
Also, by attaching the appropriate
class to each list item,
1:16
for instance, superhero alias for
the alias property,
1:20
we ensure that each
property's specific icon and
1:24
background color are displayed
alongside it, courtesy of our CSS.
1:28
Once we finished examining each property,
1:35
we closed off our unordered list and
section tag,
1:38
then appended our new superhero section
to the main element using inner HTML.
1:42
And that's it,
1:48
we successfully created a dynamic
webpage to display our superhero data.
1:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up