1
00:00:00,300 --> 00:00:01,920
Hello and welcome back.

2
00:00:02,010 --> 00:00:07,620
So far, you should have several different elements on the page that you can click, they're going to

3
00:00:07,620 --> 00:00:14,070
be invoking a function that's actually taking the data attribute of data message and outputting it into

4
00:00:14,070 --> 00:00:15,720
the console when it gets clicked.

5
00:00:16,110 --> 00:00:19,490
And we should have that for each one of those elements up and functioning.

6
00:00:19,770 --> 00:00:25,650
So the next part of this lesson and the section is where we're going to be setting up an output message

7
00:00:25,890 --> 00:00:30,040
so we can call this message if we want and parsing in a parameter.

8
00:00:30,060 --> 00:00:32,850
So this is going to be the output or whatever we want to call it.

9
00:00:33,240 --> 00:00:40,460
And next, instead of console log, we're going to send that output text into the function message.

10
00:00:40,740 --> 00:00:46,590
So whenever anything gets passed into message, we're going to take the element that has the output

11
00:00:47,400 --> 00:00:55,610
and let's set up a variable for that as well so we can call this up and document selecting the elements,

12
00:00:56,040 --> 00:00:57,360
the class of output.

13
00:00:58,050 --> 00:01:03,800
So selecting that entire element object we can check to make sure that we've selected it properly.

14
00:01:03,810 --> 00:01:06,450
When we do or pop up, it should be actually pop up.

15
00:01:06,450 --> 00:01:11,430
So we type in pop up into our console that we're getting the right element object.

16
00:01:11,650 --> 00:01:17,900
So now we can utilize that pop up and updates, removing out a class.

17
00:01:17,910 --> 00:01:23,340
So we've got a class list and what we want to do is remove height because remember, height is the one

18
00:01:23,340 --> 00:01:26,190
that's actually hiding it from the visible area.

19
00:01:26,310 --> 00:01:28,230
So we better move out the class of height.

20
00:01:28,860 --> 00:01:30,870
So try that out and whatever.

21
00:01:30,870 --> 00:01:36,600
We click one of these, we see that hide our pop up message shows up and the next thing that we want

22
00:01:36,600 --> 00:01:40,140
to do is output into that message area.

23
00:01:40,320 --> 00:01:42,260
We want to output that content.

24
00:01:42,750 --> 00:01:49,110
So let's set up our we can call this one pop up message document using the same format.

25
00:01:49,110 --> 00:01:56,880
So query selector like select the element with a class of message and now we can use this object and

26
00:01:56,880 --> 00:01:59,930
update the inner text or inner team.

27
00:01:59,940 --> 00:02:04,130
And because this is just text, we can output it with the contents of output.

28
00:02:04,350 --> 00:02:06,700
So now we can try that we get hello world.

29
00:02:06,720 --> 00:02:11,160
JavaScript is fun while cool so we don't have a way to close the button.

30
00:02:11,160 --> 00:02:15,330
So we need to add in one more of that listener in order to be able to close the button.

31
00:02:15,660 --> 00:02:24,690
So again, selecting our elements and using close button variable document query selector, let's add

32
00:02:24,690 --> 00:02:30,540
functionality to the close button and we can identify it by selecting the element with a class of close

33
00:02:30,540 --> 00:02:32,720
and if this close button gets clicked.

34
00:02:32,730 --> 00:02:37,560
So adding an event listener for that, listening for click, we're going to invoke the function.

35
00:02:37,580 --> 00:02:42,630
So this can also be another anonymous function and all we have to do is the actual opposite, where

36
00:02:42,630 --> 00:02:46,530
we're taking our pop up class list and where we're removing hide.

37
00:02:46,680 --> 00:02:48,990
We're going to do the opposite and add height.

38
00:02:48,990 --> 00:02:49,890
So try that out.

39
00:02:49,890 --> 00:02:53,590
So click me close, click me close, click me close.

40
00:02:53,910 --> 00:02:56,850
So now we've got our core functionality.

41
00:02:57,120 --> 00:03:01,560
And coming up next, we'll do a quick overview and a review of our functionality.

42
00:03:01,890 --> 00:03:05,800
So go ahead and add all of this interaction into your own application.

43
00:03:06,150 --> 00:03:11,640
So now, by the end of this lesson, you should have several elements on the page that share a class

44
00:03:11,640 --> 00:03:18,780
name and have a data attribute that you can click and have that open up into open up that element to

45
00:03:18,990 --> 00:03:25,380
display that element, as well as passing in the data message into the text area of that element.

46
00:03:25,620 --> 00:03:27,960
So that should be fully functioning and working.

47
00:03:28,200 --> 00:03:29,790
And we're going to move on to the next lesson.

48
00:03:29,790 --> 00:03:30,840
We're going to do a code review.

49
00:03:30,930 --> 00:03:31,710
That's coming up next.