Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenge that you'll be working to complete.
Prerequisites
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
[MUSIC]
0:00
Hello coders, Brian here.
0:09
In this practice session, you'll apply
your JavaScript knowledge to tackle
0:12
dynamic and sometimes unpredictable data.
0:16
You'll be handed an array
filled with superhero objects.
0:19
Each superhero object contains
multiple properties such as name,
0:24
alias, power, equipment,
weakness, hobby, and sidekick.
0:29
However, only some superhero objects
will have all these properties or
0:34
have them listed in the same order.
0:39
Some might be missing or
have empty values.
0:42
Should you accept it,
your mission is to harness your JavaScript
0:45
skills to conditionally access
these properties' values and
0:49
dynamically integrate
them into the HTML DOM.
0:54
A truth of our developer lives is that
we often find ourselves navigating
0:57
through incomplete,
fragmented, or cluttered data.
1:02
Our data might have gaps or
irregularities, or
1:07
it might only sometimes be
structured as anticipated.
1:10
Addressing and shaping such data is
a recurring aspect of development and
1:15
this practice session mirrors
that real-world challenge,
1:19
encouraging you to wrangle
this messy data into order.
1:23
Launch the workspace with
this video to get started, or
1:28
download the project files and
use your preferred text editor.
1:31
First, peek into the app.js file.
1:35
Here you'll find the skeletal
structure of the program and
1:39
I've sprinkled a few comments
to guide your progress.
1:42
Next, open the index.html and
look at the commented out section.
1:46
This section illustrates how each
superhero's data should be structured and
1:52
highlights specific classes
associated with each object property.
1:57
These classes are essential,
as they apply our custom list item icons,
2:02
making each superhero's
stats stand out in style.
2:07
Your dynamically generated HTML
should echo this structure,
2:12
pairing each superhero property with
its corresponding class to ensure that
2:16
the correct icon and
background color are displayed.
2:21
Crafting these elements conditionally
is the heart of this challenge.
2:25
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