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 Template Literals!
You have completed Practice Template Literals!
Preview
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
compare it to what you wrote,
then try to recreate it yourself.
0:00
The goal was to make the createPlanetHTML
function more concise and
0:02
easier to maintain using a template
literal and string interpolation.
0:07
So now I'll show you my solution,
0:10
and you can also reference my code
when you download the project files.
0:12
First you create a template
literal using backticks.
0:16
So in the return statement I'll include
a backtick at the beginning and
0:19
at the end of the string I'm creating.
0:24
And to make the code appear less
cluttered I'll bring the parent div and
0:26
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