1
00:00:00,090 --> 00:00:00,840
Welcome back.

2
00:00:00,840 --> 00:00:05,610
In this lesson, we are going to be practicing what we learned in the earlier lessons with the tip calculator,

3
00:00:05,610 --> 00:00:10,740
producing another little mini application that's going to have an input, a button that gets clicked

4
00:00:10,890 --> 00:00:12,300
and then we're going to output.

5
00:00:12,450 --> 00:00:18,600
Hello and welcome to our Web page to whatever name is added in here within that input field.

6
00:00:18,840 --> 00:00:22,590
And you can also add in name there within the input field.

7
00:00:23,160 --> 00:00:26,530
So it's more exact on what type of data that we're expecting.

8
00:00:26,880 --> 00:00:32,520
So we want the user to come into our Web page, enter in their name and then click message and provide

9
00:00:32,520 --> 00:00:33,990
a message back to them.

10
00:00:33,990 --> 00:00:39,320
And we're going to do this all using JavaScript, what we learned within the previous lesson.

11
00:00:39,870 --> 00:00:45,960
So the first thing that we want to do is select our button, grabbing our button object, creating a

12
00:00:45,990 --> 00:00:51,540
constant variable called button, using documents, query selector.

13
00:00:51,690 --> 00:00:56,070
We want to select that button element in order to put into the object.

14
00:00:56,520 --> 00:01:03,510
And we know within our page we only have one element with a tag of button so we can type in button here

15
00:01:03,750 --> 00:01:06,510
and that will select that particular element.

16
00:01:07,200 --> 00:01:13,890
Always good idea to make sure that we do have that particular element selected so we can refresh and

17
00:01:13,890 --> 00:01:16,080
we see that we do have that element selected.

18
00:01:16,380 --> 00:01:20,310
Next to that we want to do is we want to add an event listener to Button.

19
00:01:20,580 --> 00:01:26,970
So taking a button, we're going to use add event listener method and then specifying which event we

20
00:01:26,970 --> 00:01:32,400
want to listen to and then what we want to happen whenever the button gets clicked.

21
00:01:33,640 --> 00:01:42,880
And we want to run a function called short message next, let's set up a function that's going to show

22
00:01:42,880 --> 00:01:47,160
the message and for now, we are not going to have a whole lot happening in here.

23
00:01:48,100 --> 00:01:50,470
So once again, refresh try that out.

24
00:01:50,830 --> 00:01:51,810
Click the message.

25
00:01:51,820 --> 00:01:54,630
We see that we do have hello being output there.

26
00:01:54,940 --> 00:01:56,550
So everything is working.

27
00:01:56,830 --> 00:02:00,010
The next step is that we want to select our output area.

28
00:02:00,220 --> 00:02:02,400
So that's contained within class output.

29
00:02:02,650 --> 00:02:10,680
So let's set up a variable for that one as well, using documents, selector selecting the class output.

30
00:02:10,960 --> 00:02:17,560
So don't forget to put the dot in front of output because this is a class that we are selecting and

31
00:02:17,560 --> 00:02:20,230
now what we want to do instead of console log.

32
00:02:20,230 --> 00:02:26,320
Hello, let's use our output element and update the inner HTML to be.

33
00:02:26,320 --> 00:02:26,730
Hello.

34
00:02:27,220 --> 00:02:28,190
So try that one out.

35
00:02:29,350 --> 00:02:32,890
So now a refresh message and we get hello being output.

36
00:02:32,890 --> 00:02:38,980
There was one last thing that we need to do and that's make a selection of the value that's contained

37
00:02:38,980 --> 00:02:43,150
within this input and then output that within that output field.

38
00:02:43,450 --> 00:02:48,340
So you can go ahead and pause the video and try this for yourself and I'll show you the solution as

39
00:02:48,340 --> 00:02:48,700
well.

40
00:02:49,460 --> 00:02:52,180
So hope you had an opportunity to try that out for yourself.

41
00:02:52,390 --> 00:02:59,560
And the next thing that we want to do is we want to update that inner HTML with the value so we can

42
00:02:59,560 --> 00:03:04,810
set it up as CONSED and we'll just call it my name query selector.

43
00:03:05,080 --> 00:03:11,320
We want to select the input and then once we've got that input object, we want to make use of the input

44
00:03:11,320 --> 00:03:16,010
variable and then a comma and then we can add in the my name.

45
00:03:16,360 --> 00:03:21,230
Don't forget to add in value and then we can close off the each one and try that out.

46
00:03:21,250 --> 00:03:23,000
So refresh message.

47
00:03:23,720 --> 00:03:24,160
Hello.

48
00:03:24,190 --> 00:03:25,450
Welcome Lawrence.

49
00:03:25,630 --> 00:03:32,830
You can update the name now and send brand new messages to your users, having them fill out their name

50
00:03:32,980 --> 00:03:38,380
and then output a welcome message, customized welcome message to them on your page.

51
00:03:38,830 --> 00:03:44,770
Go ahead and try this out for yourself and build out this little mini application that welcomes users

52
00:03:44,770 --> 00:03:45,490
to your page.