1
00:00:00,400 --> 00:00:01,410
Hey, how'd it go?

2
00:00:01,410 --> 00:00:04,480
Were you able to change the multi-line
string in the function to

3
00:00:04,480 --> 00:00:05,860
a template literal?

4
00:00:05,860 --> 00:00:06,720
If not, no worries.

5
00:00:06,720 --> 00:00:08,280
You can watch my solution,

6
00:00:08,280 --> 00:00:11,380
compare it to what you wrote,
then try to recreate it yourself.

7
00:00:11,380 --> 00:00:16,100
The goal was to make the createPlanetHTML
function more concise and

8
00:00:16,100 --> 00:00:19,530
easier to maintain using a template
literal and string interpolation.

9
00:00:19,530 --> 00:00:21,230
So now I'll show you my solution,

10
00:00:21,230 --> 00:00:25,290
and you can also reference my code
when you download the project files.

11
00:00:25,290 --> 00:00:28,870
First you create a template
literal using backticks.

12
00:00:28,870 --> 00:00:33,300
So in the return statement I'll include
a backtick at the beginning and

13
00:00:33,300 --> 00:00:35,570
at the end of the string I'm creating.

14
00:00:35,570 --> 00:00:39,979
And to make the code appear less
cluttered I'll bring the parent div and

15
00:00:39,979 --> 00:00:44,930
the closing backtick down to
the next line, then indent the code.

16
00:00:44,930 --> 00:00:47,960
Next I'll delete all the single quotes and

17
00:00:47,960 --> 00:00:54,060
plus symbols between the backticks,
leaving what resembles regular HTML code.

18
00:00:54,060 --> 00:00:57,850
I also deleted the spaces
inside the strong tags.

19
00:00:57,850 --> 00:01:01,380
Instead I added a space
before each property, and

20
00:01:01,380 --> 00:01:04,880
I removed the space before
the words days and years.

21
00:01:06,070 --> 00:01:08,800
With template literals you're
able to interpolate or

22
00:01:08,800 --> 00:01:12,250
embed JavaScript expressions
inside your template.

23
00:01:12,250 --> 00:01:16,856
So now I'll use interpolation to
access the properties from the object

24
00:01:16,856 --> 00:01:19,130
passed into the function.

25
00:01:19,130 --> 00:01:24,430
And the expression syntax consists
of a dollar sign and curly brackets,

26
00:01:24,430 --> 00:01:28,860
so I'll place the properties
inside dollar sign curly brackets.

27
00:01:28,860 --> 00:01:32,500
And as you can tell,
our code is looking much cleaner.

28
00:01:32,500 --> 00:01:37,340
Now another thing we can do is in
the object, change the description

29
00:01:37,340 --> 00:01:42,210
property value from a regular
string to a template literal

30
00:01:42,210 --> 00:01:46,750
by replacing the single
quotes with backticks.

31
00:01:46,750 --> 00:01:49,370
And one of the benefits of doing this is
that we no longer need to worry about

32
00:01:49,370 --> 00:01:52,660
including escape characters
before single quotes or

33
00:01:52,660 --> 00:01:57,820
apostrophes, like in the word
It\'s I can remove the slash.

34
00:01:57,820 --> 00:02:01,130
So now we have a more streamlined function

35
00:02:01,130 --> 00:02:04,810
that lets us create reusable templates for
planet cards.

36
00:02:06,965 --> 00:02:09,880
I can, for instance,
add another planet object.

37
00:02:09,880 --> 00:02:11,797
I'll paste one in for Saturn, and

38
00:02:11,797 --> 00:02:15,220
you can copy this in a bit
from the teacher's notes.

39
00:02:15,220 --> 00:02:19,740
Now I'll pass the createPlanetHTML
function the new

40
00:02:19,740 --> 00:02:24,710
saturn object, and
now we see the Saturn planet card.

41
00:02:26,220 --> 00:02:32,050
Or I can display multiple planet
cards by creating a planet array,

42
00:02:32,050 --> 00:02:35,730
then I'll place the Mars and
Saturn object literals inside the array.

43
00:02:54,040 --> 00:03:00,283
And at the bottom I'll use the map method
to go through the planets array and

44
00:03:00,283 --> 00:03:04,460
return a planet card for
each object in the array.

45
00:03:05,940 --> 00:03:09,090
And there you have it,
the Mars and Saturn cards.

46
00:03:09,090 --> 00:03:11,840
So I hope you were able to
complete this template literals

47
00:03:11,840 --> 00:03:13,520
practice session successfully.

48
00:03:13,520 --> 00:03:14,820
If not, why not start over and

49
00:03:14,820 --> 00:03:17,180
try to write it again without
looking at my version.

50
00:03:17,180 --> 00:03:18,640
Thanks everyone, and happy learning.