Hello and welcome back.
So far, you should have several different elements on the page that you can click, they're going to
be invoking a function that's actually taking the data attribute of data message and outputting it into
the console when it gets clicked.
And we should have that for each one of those elements up and functioning.
So the next part of this lesson and the section is where we're going to be setting up an output message
so we can call this message if we want and parsing in a parameter.
So this is going to be the output or whatever we want to call it.
And next, instead of console log, we're going to send that output text into the function message.
So whenever anything gets passed into message, we're going to take the element that has the output
and let's set up a variable for that as well so we can call this up and document selecting the elements,
the class of output.
So selecting that entire element object we can check to make sure that we've selected it properly.
When we do or pop up, it should be actually pop up.
So we type in pop up into our console that we're getting the right element object.
So now we can utilize that pop up and updates, removing out a class.
So we've got a class list and what we want to do is remove height because remember, height is the one
that's actually hiding it from the visible area.
So we better move out the class of height.
So try that out and whatever.
We click one of these, we see that hide our pop up message shows up and the next thing that we want
to do is output into that message area.
We want to output that content.
So let's set up our we can call this one pop up message document using the same format.
So query selector like select the element with a class of message and now we can use this object and
update the inner text or inner team.
And because this is just text, we can output it with the contents of output.
So now we can try that we get hello world.
JavaScript is fun while cool so we don't have a way to close the button.
So we need to add in one more of that listener in order to be able to close the button.
So again, selecting our elements and using close button variable document query selector, let's add
functionality to the close button and we can identify it by selecting the element with a class of close
and if this close button gets clicked.
So adding an event listener for that, listening for click, we're going to invoke the function.
So this can also be another anonymous function and all we have to do is the actual opposite, where
we're taking our pop up class list and where we're removing hide.
We're going to do the opposite and add height.
So try that out.
So click me close, click me close, click me close.
So now we've got our core functionality.
And coming up next, we'll do a quick overview and a review of our functionality.
So go ahead and add all of this interaction into your own application.
So now, by the end of this lesson, you should have several elements on the page that share a class
name and have a data attribute that you can click and have that open up into open up that element to
display that element, as well as passing in the data message into the text area of that element.
So that should be fully functioning and working.
And we're going to move on to the next lesson.
We're going to do a code review.
That's coming up next.