So hopefully now you're getting pretty comfortable with events.
So I think what we'll do in this video is we'll put everything together that we've learned so far in
this chapter and just do a little annoying pop up that you sometimes see on websites.
So you can see that I'm starting with a blank index.html page.
We do have a style sheet linked up at the top right here, Styles.css.
And that is over here as well.
Nothing in there whatsoever at the minute.
And also at the bottom we have a script to pop up.
JS Which is over here.
Again, nothing in there at the minute.
So we're going from the complete start here and the first thing we're going to do is make the template.
So we're going to have a button and this is going to trigger the pop up.
So sometimes you see on websites it automatically pops up after 20s we're not going to do something
that annoying.
We're going to let the user click the button to show the pop up.
So I'm going to say click me inside this button.
Then below that we need a div and this is going to be the pop up hyphen wrapper.
Now this pop up wrapper is going to act as kind of like a mask for the rest of the content.
You know, when a pop up appears on a web page and the rest of the background kind of fades out a bit,
that's what this is going to be used for ultimately.
Now, inside that pop up wrapper, we want the actual pop up.
So let me do now another div with a class of pop up and inside that we need the pop up content.
So I'll say div dot pop up hyphen contents and inside the content we'll do an H2 which says Ninja Sale.
Okay?
And then after that we'll do a P tag and inside there we'll say 50% of all ninja clothing.
Ninja clothing, don't miss out.
Okay, brilliant offer.
And then finally, we'll do an anchor tag to take you to the clothing.
And we won't go anywhere with this.
We'll just say view clothing.
Okay, So now we have a simple template for this pop up.
Now we need one more thing inside the pop up, and that is a cross that the user can click.
So let's do a div for that and call it pop up hyphen close and inside here just do a little x.
So when they click on that, it's going to close the pop up.
So if we save this and view it in a browser, it's going to look absolutely cruddy.
So let's add some CSS to it so it doesn't look quite so cruddy.
So I'm going to go through this quite quickly because this isn't a CSS course, it's JavaScript, but
I will still write them out.
First of all, we need to get the button and what I'm going to do is display that as block.
Then I'm going to give this a margin of 20 pixels, top and bottom auto left and right.
Then we'll say the background color of this button is going to be crimson.
So that's like a ready color.
Then the color of the text is going to be white and we'll give this a border of zero to take away any
default borders.
And then also a padding of six pixels, top and bottom, ten pixels left and right.
So let's preview that looking a lot better.
Okay, so let's style the pop up now.
Now the first thing I want to do is style the pop up wrapper.
That's this thing, remember?
And I said that this is going to be the big thing, the big wrapper that fades the rest of the content
out on the page in the background.
So what I'm going to do is get the pop up hyphen wrapper and first of all, give this a background which
is semi-transparent black.
So to do that, I'm going to use RGB A and that A stands for the Alpha channel that controls the opacity.
So we can say 000, that's RGB and that gives us black.
Then the Alpha channel, which is going to be 0.5, meaning it's semi-transparent.
This is a decimal between 0 and 1.
If it's one, it means it's fully there.
If it's zero, it means it's completely see through 0.5 means it's going to be half see through.
So it's going to fade everything out in the background.
Now I'm also going to give this a position of fixed.
So it's always on the screen and I'm going to say the top position is going to be zero and left is zero.
So this is where it starts in the top left of the screen.
Then I'm going to say it has a width of 100%.
So it takes up the whole browser and also a height of 100% as well.
Now, if I save this, we're going to see that thing over here.
So when we click on the button, it's going to show this kind of thin veil right here.
So we'll sort out all that functionality later.
For now, let's crack on with the pop up styles.
So let's now grab the pop up itself and we'll say Font hyphen family is going to be Ariel and oops,
let's spell that correctly.
Ariel.
And then after that we'll say the text hyphen align is going to be in the center.
We'll also give this a width of 100% and then we'll say the max width is 300 pixels.
So for small screens it's going to take up 100% of the width.
But for larger ones, the max width is going to be 300 pixels.
Okay.
So the margin is going to be about 10% from the top.
So it's not right at the top of the page.
And then auto left and right.
It is going to censor it.
Then we'll say padding inside the pop up is going to be about 20 pixels.
The background is going to be white.
And then finally, position relative.
And I do this because I want to position something absolutely inside it later on the cross.
So if we save that and view now, we can see this is looking a bit better.
So this is the pop up and this is the pop up wrapper that's faded behind it.
Okay, So let's just do a couple more things.
And in fact, what I'm going to do is just copy these from my repo and paste them in here and then walk
you through them.
So first of all, we have the pop up anchor tag, which has a background of crimson, a color of white
text, decoration of none, and this padding.
So it's going to look more like a button.
And then the pop up close, which is the cross absolutely positioned relative to this thing right here,
the top five pixels, Right.
Eight pixels.
So it should be in the top, right.
And then the cursor when we hover over is a pointer.
So if we save that now, view it in a browser and this is looking a lot better.
So now we just need to hook up the JavaScript functionality.
Now by default, we don't want any of this pop up to show on the page.
So to begin with, I want to take the whole surrounding element, which is the pop up wrapper and set
the display to none.
So let me come to the pop up wrapper and say display is going to be none to begin with.
Save that and preview and we can see it's not there.
Now.
We only want to show that when we click the button.
So let's go to pop up JS and flesh out the JavaScript for this.
The first thing we need to do is get a reference to the button.
So I'll say const button is going to be equal to document dot query selector and we want the button.
So let's pass that in there.
So now we can attach an event listener to this button because we're listening for a click event on that
button.
So we'll say button, dot, add event listener.
And we want to listen to a click event.
So let's pass that in here.
The callback function inside is going to eventually show the pop up.
Now, to do that, we need to get a reference on the pop up to show it.
So I'm going to say up here, const pop up, I have to spell that correctly.
Yep.
Is equal to document dot query selector and we want the pop up wrapper.
That's the thing that we ultimately want to show.
We set that to display none here.
We're going to show it when we click on this.
So let's grab the pop up wrapper and then inside the callback function, we'll take this pop up right
here and then we'll say Style dot display is now going to be equal to block.
So we're setting it from none originally, and now we're setting it equal to block.
So let me first preview this and see if it works.
I'm going to click on this button and now we can see the pop up come up.
Awesome.
But we also need to attach an event listener to this cross so that when we click this, it closes the
pop up and also this overlay thing right here, the wrapper itself.
Because normally when you click on this on a website, it closes the pop up as well.
So let's first of all, attach one to this thing over here.
First, we need to get a reference to that close button.
So I'll say const close is equal to document dot query selector and we want the close button which has
a class I think of pop up close right here.
So let me copy that and paste it over here inside with a dot in front of it.
Okay, so we're getting that close button now.
We need to attach an event listener to it.
What I'm going to do is just copy this dude and paste it down here.
Then we'll change button to close since that's what we're attaching a click event to.
And then inside the callback function, we want to change the pop up style display to none.
Instead, because we're closing this now, does that make sense?
So let's save it and try it out.
I can see an error over there.
It says document is not defined, so let's change that to document, save again and refresh.
Now if we click it, it opens.
If we click the cross, it closes.
Awesome.
One last thing to do.
Just attach an event listener to this wrapper itself.
So if we click anywhere on the black overlay over here, it's going to close the pop up as well.
So let's do one more thing.
I'm going to copy this again and come down here.
This time we want to attach the event listener to the pop up itself, the pop up wrapper, because that
means if we click anywhere over here, it's going to close.
So I'm going to get the pop up, which we already have a reference to here.
And that again is going to set the display of the pop up to none.
So let's save it and click over here, click the cross and click over here.
Absolutely fine.
Sweet.
So there we go, my friends.
We've put a lot of the things together that we've learned about click events to make this pop up in
a web page.
