"Node.js Basics (2014)" was retired on February 14, 2017. You are now viewing the recommended replacement.
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 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