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 covers one solution to the challenge.
Code Snippets
The planets array:
const planets = [
{
name: 'Saturn',
diameter: '72,367.4 mi',
moons: '62',
temp: '-178 °C',
orbitDays: '10,756',
orbitYears: '29.5',
description: 'Saturn is the sixth planet from the Sun and the most distant that can be seen with the naked eye. Saturn is the second largest planet and is best known for its fabulous ring system that was first observed in 1610 by the astronomer Galileo Galilei.',
facts: 'Saturn was known to the ancients, including the Babylonians and Far Eastern observers. It is named for the Roman god Saturnus, and was known to the Greeks as Cronus.'
},
{
name: 'Mars',
diameter: '4,212 mi',
moons: '2',
temp: '-153 to 20 °C',
orbitDays: '687',
orbitYears: '1.9',
description: `The fourth planet from the Sun and the second smallest planet in the solar system. Named after the Roman god of war, Mars is also often described as the “Red Planet” due to its reddish appearance. It's a terrestrial planet with a thin atmosphere composed primarily of carbon dioxide.`,
facts: 'Mars has the largest dust storms in the solar system. They can last for months and cover the entire planet. On Mars the Sun appears about half the size as it does on Earth.'
}
];
Map through the planets array and return a card for each object in the array:
document.querySelector('body').innerHTML = planets.map(planet => createPlanetHTML(planet)).join('');
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
Hey, how'd it go?
0:00
Were you able to change the multi-line
string in the function to
0:01
a template literal?
0:04
If not, no worries.
0:05
You can watch my solution,
0:06
compare it to what you wrote,
then try to recreate it yourself.
0:08
The goal was to make the createPlanetHTML
function more concise and
0:11
easier to maintain using a template
literal and string interpolation.
0:16
So now I'll show you my solution,
0:19
and you can also reference my code
when you download the project files.
0:21
First you create a template
literal using backticks.
0:25
So in the return statement I'll include
a backtick at the beginning and
0:28
at the end of the string I'm creating.
0:33
And to make the code appear less
cluttered I'll bring the parent div and
0:35
the closing backtick down to
the next line, then indent the code.
0:39
Next I'll delete all the single quotes and
0:44
plus symbols between the backticks,
leaving what resembles regular HTML code.
0:47
I also deleted the spaces
inside the strong tags.
0:54
Instead I added a space
before each property, and
0:57
I removed the space before
the words days and years.
1:01
With template literals you're
able to interpolate or
1:06
embed JavaScript expressions
inside your template.
1:08
So now I'll use interpolation to
access the properties from the object
1:12
passed into the function.
1:16
And the expression syntax consists
of a dollar sign and curly brackets,
1:19
so I'll place the properties
inside dollar sign curly brackets.
1:24
And as you can tell,
our code is looking much cleaner.
1:28
Now another thing we can do is in
the object, change the description
1:32
property value from a regular
string to a template literal
1:37
by replacing the single
quotes with backticks.
1:42
And one of the benefits of doing this is
that we no longer need to worry about
1:46
including escape characters
before single quotes or
1:49
apostrophes, like in the word
It\'s I can remove the slash.
1:52
So now we have a more streamlined function
1:57
that lets us create reusable templates for
planet cards.
2:01
I can, for instance,
add another planet object.
2:06
I'll paste one in for Saturn, and
2:09
you can copy this in a bit
from the teacher's notes.
2:11
Now I'll pass the createPlanetHTML
function the new
2:15
saturn object, and
now we see the Saturn planet card.
2:19
Or I can display multiple planet
cards by creating a planet array,
2:26
then I'll place the Mars and
Saturn object literals inside the array.
2:32
And at the bottom I'll use the map method
to go through the planets array and
2:54
return a planet card for
each object in the array.
3:00
And there you have it,
the Mars and Saturn cards.
3:05
So I hope you were able to
complete this template literals
3:09
practice session successfully.
3:11
If not, why not start over and
3:13
try to write it again without
looking at my version.
3:14
Thanks everyone, and happy learning.
3:17
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