1 00:00:00,120 --> 00:00:00,880 Welcome back. 2 00:00:00,900 --> 00:00:06,150 In this lesson, we're going to be doing a quick overview of the code and functionality of this pop 3 00:00:06,150 --> 00:00:08,060 up message application. 4 00:00:08,100 --> 00:00:13,590 We started out by building out several elements in each one of these elements contains an attribute 5 00:00:13,590 --> 00:00:14,550 called data message. 6 00:00:14,730 --> 00:00:19,620 So this is our hidden message that we want showing in the pop up whenever the element gets clicked. 7 00:00:19,800 --> 00:00:23,830 So they all have different messages and we've got this pop up message showing up. 8 00:00:23,850 --> 00:00:28,110 We also have interaction there where we want to be able to close that pop up message and have all of 9 00:00:28,110 --> 00:00:30,450 this functionality in pop ups. 10 00:00:30,610 --> 00:00:36,510 So any time an element has a class of pop up or a data and a data message, then this is going to be 11 00:00:36,510 --> 00:00:41,020 where we're going to be able to introduce this type of pop up functionality for that element. 12 00:00:41,370 --> 00:00:42,990 So let's go quickly through the code. 13 00:00:43,290 --> 00:00:49,560 We set up some styling and of course, you can customize the styling as needed and make it look a whole 14 00:00:49,560 --> 00:00:52,670 lot better playing your own version of the styling. 15 00:00:52,710 --> 00:00:57,690 So this was just a quick so that we don't have really basic HTML being output there. 16 00:00:57,810 --> 00:00:59,430 So we've got a little bit of styling added it. 17 00:00:59,430 --> 00:01:06,150 And then we went through the HTML added in the essential elements that we needed in order to interact 18 00:01:06,150 --> 00:01:09,080 with and create our JavaScript interaction with. 19 00:01:09,300 --> 00:01:10,920 So we have our pop up area. 20 00:01:10,950 --> 00:01:16,410 So this is the window that pops up and we've got a button in order to close that, as well as a main 21 00:01:16,410 --> 00:01:22,080 core message area that's going to get updated with the data message contained within each one of the 22 00:01:22,080 --> 00:01:27,300 elements that we've got some elements and they all have one thing in common that they have a class of 23 00:01:27,300 --> 00:01:29,550 pop up as well as a data message. 24 00:01:29,790 --> 00:01:34,260 So it actually doesn't matter what it says in here or doesn't matter what type of element it is, divs, 25 00:01:34,260 --> 00:01:37,590 paragraphs, whatever, they're all going to work the same way. 26 00:01:37,770 --> 00:01:39,900 So they've got our content here. 27 00:01:39,900 --> 00:01:41,070 That's the visible content. 28 00:01:41,160 --> 00:01:46,620 And then this is the hidden message content and we needed to use JavaScript in order to create that 29 00:01:46,620 --> 00:01:47,270 interaction. 30 00:01:47,520 --> 00:01:52,740 So what we did is we first we selected all of the elements that have a class of pop up. 31 00:01:53,070 --> 00:01:55,350 We loop through all of those elements. 32 00:01:55,590 --> 00:02:02,640 And we added an event listener, the event listener that we added in is ability to get the current attribute 33 00:02:02,640 --> 00:02:05,310 value, and that's the data message value. 34 00:02:05,550 --> 00:02:09,480 And that's why we sent that into a function called message. 35 00:02:09,660 --> 00:02:14,250 And what function called message is it retrieved that into a variable called output. 36 00:02:14,490 --> 00:02:18,360 And we output that into the pop up message element. 37 00:02:18,630 --> 00:02:26,430 And as the inner text as well as we removed the Hyde class, effectively showing that pop up message, 38 00:02:26,700 --> 00:02:34,800 we also added in an option for an event listener to be clicked and add in the Hyde class in order to 39 00:02:34,800 --> 00:02:37,080 not display the pop up message. 40 00:02:37,380 --> 00:02:43,290 And we used JavaScript objects in order to select all of these elements so that we could utilize them 41 00:02:43,290 --> 00:02:50,070 within our code to answer any questions, clarify content within the Q&A section of all of the content 42 00:02:50,070 --> 00:02:51,840 that we've covered in the earlier lessons. 43 00:02:52,050 --> 00:02:53,700 Thanks again for taking the course. 44 00:02:53,970 --> 00:02:59,460 And remember, source code is included and I do encourage you to try the code out for yourself, get 45 00:02:59,460 --> 00:03:01,310 familiar with it and see how it works.