Preview
Video Player
00:00
00:00
One Solution
3:19This video covers one solution to the challenge.
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