Welcome back.
In this lesson, we're going to be doing a quick overview of the code and functionality of this pop
up message application.
We started out by building out several elements in each one of these elements contains an attribute
called data message.
So this is our hidden message that we want showing in the pop up whenever the element gets clicked.
So they all have different messages and we've got this pop up message showing up.
We also have interaction there where we want to be able to close that pop up message and have all of
this functionality in pop ups.
So any time an element has a class of pop up or a data and a data message, then this is going to be
where we're going to be able to introduce this type of pop up functionality for that element.
So let's go quickly through the code.
We set up some styling and of course, you can customize the styling as needed and make it look a whole
lot better playing your own version of the styling.
So this was just a quick so that we don't have really basic HTML being output there.
So we've got a little bit of styling added it.
And then we went through the HTML added in the essential elements that we needed in order to interact
with and create our JavaScript interaction with.
So we have our pop up area.
So this is the window that pops up and we've got a button in order to close that, as well as a main
core message area that's going to get updated with the data message contained within each one of the
elements that we've got some elements and they all have one thing in common that they have a class of
pop up as well as a data message.
So it actually doesn't matter what it says in here or doesn't matter what type of element it is, divs,
paragraphs, whatever, they're all going to work the same way.
So they've got our content here.
That's the visible content.
And then this is the hidden message content and we needed to use JavaScript in order to create that
interaction.
So what we did is we first we selected all of the elements that have a class of pop up.
We loop through all of those elements.
And we added an event listener, the event listener that we added in is ability to get the current attribute
value, and that's the data message value.
And that's why we sent that into a function called message.
And what function called message is it retrieved that into a variable called output.
And we output that into the pop up message element.
And as the inner text as well as we removed the Hyde class, effectively showing that pop up message,
we also added in an option for an event listener to be clicked and add in the Hyde class in order to
not display the pop up message.
And we used JavaScript objects in order to select all of these elements so that we could utilize them
within our code to answer any questions, clarify content within the Q&A section of all of the content
that we've covered in the earlier lessons.
Thanks again for taking the course.
And remember, source code is included and I do encourage you to try the code out for yourself, get
familiar with it and see how it works.