1
00:00:00,300 --> 00:00:04,440
This lesson is going to be a challenge lesson where we're going to take something that we've learned

2
00:00:04,440 --> 00:00:09,390
earlier and apply it to something new, and then you think that we're introducing and the lesson is

3
00:00:09,390 --> 00:00:12,740
a template literal, so allows you to use the tactics.

4
00:00:12,750 --> 00:00:19,350
So that's just above your tab on your keyboard or to the left of the one key on your keyboard or most

5
00:00:19,350 --> 00:00:19,860
keyboards.

6
00:00:20,130 --> 00:00:24,620
And you can use these tactics in order to wrap the content of your template.

7
00:00:25,050 --> 00:00:29,460
And there's some examples as well available at the Mozilla Developer Network.

8
00:00:29,730 --> 00:00:36,060
And as well, we already got introduced to prompt, which gives us the ability to to show an input to

9
00:00:36,060 --> 00:00:42,750
the user and then use that input value, returning it into a variable and then utilize that variable

10
00:00:42,750 --> 00:00:43,680
within the code.

11
00:00:43,710 --> 00:00:50,520
So let's take a look at template literals called temperate strings prior to its 2015 specification.

12
00:00:50,790 --> 00:00:56,190
And you can see we've got the tactics and the wrapping the content, and they're allowing us to have

13
00:00:56,190 --> 00:00:57,560
line breaks in there as well.

14
00:00:57,660 --> 00:00:59,070
Calculate some JavaScript.

15
00:00:59,220 --> 00:01:05,060
So we've got a variable of A and a variable of B, so it allows us to add those together.

16
00:01:05,070 --> 00:01:11,310
So typically before the template literals or when we're using the quotes, the single quotes, we see

17
00:01:11,310 --> 00:01:17,940
that we have to break out of the quotes and whereas done in a template literal, it's a whole lot neater.

18
00:01:18,090 --> 00:01:22,890
And whenever we do have the line breaks, we don't have to do the back again.

19
00:01:22,980 --> 00:01:29,490
In order to have a line break within our console, we can simply output that simply as having that line

20
00:01:29,490 --> 00:01:30,040
break there.

21
00:01:30,300 --> 00:01:36,720
So what you can do is you can copy this and we can go to inspect, go over to the console and paste

22
00:01:36,720 --> 00:01:36,990
it in.

23
00:01:37,380 --> 00:01:41,420
And we see that we get that output and that line break is included.

24
00:01:41,580 --> 00:01:48,270
We need to have this all on one line within that expression and we can get the same output, but it's

25
00:01:48,270 --> 00:01:49,640
not as nice and clean.

26
00:01:49,800 --> 00:01:55,110
So the objective of this lesson, the challenge of this lesson is use a template literal in order to

27
00:01:55,110 --> 00:02:01,920
pull the variable value in, ask the person the name and then use that variable that gets returned as

28
00:02:01,920 --> 00:02:04,040
a template literal and then output the message.

29
00:02:04,290 --> 00:02:06,290
So go ahead and try that in your editor.

30
00:02:06,540 --> 00:02:10,320
So we need a variable in order to contain our user name.

31
00:02:10,770 --> 00:02:17,640
And we're going to collect this using the prompt, asking what is your name to the Web visitor?

32
00:02:17,640 --> 00:02:23,800
And then we'll also going to create a message variable and this is going to use a template literals.

33
00:02:23,800 --> 00:02:24,780
So we've got our back.

34
00:02:25,020 --> 00:02:30,690
And you can also enter in a line break if you want to as well, to utilize the variable.

35
00:02:30,840 --> 00:02:34,140
We use the dollar sign and the curly brackets.

36
00:02:34,260 --> 00:02:40,680
And here we just simply put in the name of the variable and we close the statement with the semicolon

37
00:02:41,070 --> 00:02:45,470
and now we can console log out message and also it gets returned.

38
00:02:45,480 --> 00:02:48,960
So when we refresh, it's asking us for our name.

39
00:02:48,960 --> 00:02:50,940
And we see we've got welcome, Lawrence.

40
00:02:51,210 --> 00:02:57,450
So if, for instance, we want it to have the name on the second line, you can see that the way that

41
00:02:57,450 --> 00:03:00,300
it works, it outputs it within the same format.

42
00:03:00,330 --> 00:03:04,920
So we don't have to have the backslash for the line break or anything like that that we normally would

43
00:03:04,920 --> 00:03:05,810
with the single quotes.

44
00:03:06,150 --> 00:03:09,510
So go ahead and try this out within your editor.