Hello, in this video, we are going to cover alerts of the alert component, so an alert, let me just
implement a really simple one and you can see what they are.
So you can implement them inside of a, you know, a column if you want.
You don't have to necessarily.
It's going to keep it all consistent.
If you don't, you can specify, you know, it's a weapon.
You might want to go all the way across.
You might want it to be anchored at the bottom, the sea.
You know why I'm saying that?
Because when you see you're immediately recognized from other websites so cooperative and then the device
requires a class and the class of alert, then you need essentially a theme.
I'm the primary.
I will show you the all other things that are available in a second.
You, you the roll roll, which is alert and get the word up then and then we're going to need an I.D.
This idea is optional.
We're going to be using this in a little bit later in this video via JavaScript.
Hence why or anything.
Now, again, you can call whoever you want.
I want to say warmblood alert robotics here.
You want know, depending on what the alerts say, may maybe the alert is saying, please accept, you
know, some sort of Data Protection Act agreement.
Maybe you need to reset your password.
Maybe something's going to expire in five days.
Something along those lines to refresh.
There we go.
We have this alert and it spans six columns and say 12.
It spans all the way across in this particular.
This is a basic alert.
So on the alert page.
And I'm going to provide a link to this in the description.
So don't worry, you will be able to see all this.
These are all the different theme.
So you just use no alert, a secondary or success depending on what you're trying to do, the message
you're trying to convey.
So if let's say maybe this appears when the user puts the incorrect password and email combo to log
in, you could have like an alert.
I mean, a danger alert.
If maybe they successfully posted something, you could have a green alert.
Maybe the account is going to expire in 30 days and they don't have automatic renewal.
You don't say probably one danger, maybe one morning, or if it's just some something else, you might
want some of the others as a basic alert.
So now let's cover a slightly more complex alert, but a bit more information.
Let me just duplicate that.
This is what we get.
We are on the alert and I'm going to change this just to keep things fresh on course, say danger.
I don't have no idea because we're not going to be using this in JavaScript later.
And in here, instead of just doing this, we're going to have a Hajj.
Folks are going to have a head of Tikhonov Web ahead of time you want.
I'm to have a class and the class is going to be alert in which is built in provide some styling.
And I'm just going to put the text in.
Then we're going to put a tag and in here the same name.
But this is awesome intellectual content.
And for a president to rule again, this is just Stalin and I'm going for a pizza and I'll say that's
great information.
You'll see what this produces right now.
So this is what have been produced as a result of it.
Inhealth.
Want to mention light inside of this alert and put any sort of safety.
You want your husband's Divx images, videos, I guess you never know.
You might want a YouTube video there to explain some feature of the website.
Maybe the user doesn't seem like they're aware of what they need to do.
Maybe they clicking the wrong button, for example, think whatever you want in there.
So these are just a bit more information heading from text and then some extra information, but then
you can put as much information as you want.
This is just a great example they provided on the official website.
So I thought I'd show you that.
And I did see that some rounded corners on all of it.
You could obviously modify the border radius, you know, if you wanted to use that and you'd want to
show you this.
Oh, yes.
So if you look, there's quite a big gap.
If you want to remove that, we can use a built-In monitoring utility by applying a class M.B, which
is margin bottom dash one zero.
And this removes the margin.
So obviously they still a bit of padding, but that's just for some of the other general, you know,
elements that we're using.
But it's removed it, removed it for this particular P tag and it looks a lot cleaner.
Now let me show you a Nova type alert Nova type Nova type of alert that allows you to press a close
button and fades away.
So what we are going to do is I'm going to grab the first one could you could combine into one of these,
but I'm going to have a simple one.
Don't really need anything complex owner put this out of a warning one this time, again, just for
the sake of know, very fixed up.
You need to put the class alert that dismissable, dismissable, make sure spelling it correctly the
fade and show the roll is falling.
And we do want an idea here on a collision alert.
And in here I'm going to put a strong time.
Again, this is optional.
Also the error, error, error.
Please deal with your errors immediately.
And if I say them, refresh, you get this, but we want to live export together closer to do that and
you just put the bottom tag and the type of a button class is closed.
Again, this is all just Dotan stuff.
The class put data that dismiss people's and therefore we are dismissing the alert and an area that's
label not the
equals loans.
And if we refresh that, we don't get anything because we need to actually sort of show something.
We're going to show an icon and with an open area either equally true and they're going to put some
time, some code
that we go now.
We have this fact that it disappears.
So it's a great way of showing it on an alert and maybe you want them to be able to get rid of it.
So just in case is annoying them.
You know, you see it all the time, something to pop up at the top.
You might be if you need to accept some agreement, it might be, you know, some of the cookies that
you can just dismiss it.
They might actually have a botnet, just say OK, or continue or already agreed to essentially the same
thing as having that X thing.
You could put something else in here if you want to, as long as this is still providing this, because
this this is what dismisses the alert for some simple, now ineffective use of some JavaScript to manually
show and hide an alert.
So I'm going to create up here a few buttons.
So almost any device for the buttons to keep the need simple.
All done.
Well, again, you can use whatever Thorstein Informa elements you want strong among themselves will
alert
and have an radio show alert again.
You can rename this whatever you want and keep it simple
if you want to be called high alert and it'll show the text high alert.
So if we scroll down there, we want to actually put some JavaScript.
So we will generally put it after all of the other script, times have loaded and you can even put it
in some script tags here or load and an external JavaScript file about how you this code is keeping
here.
Just to keep things simple, the first of all, we want to get the element from our website to do that
and do first alert equals document yet element Boiardi and the first alerts and this refers to.
Best of luck to you.
We're also going to get the last alert as well.
This is the murder
capital.
We're also going to get the trigger buttons, so show on high alert on the Today show trigger and this
is going to be document target element by the.
And the D I mean, the bottom had an idea of show alert,
this is going to be employed to remove the two accidentally or alert and now they're going to say,
if I am just blowing up.
So the scroll up and down along with a show trigger.
So this is just some basic JavaScript.
This is not a JavaScript, you know, video or tutorial series.
But obviously it is useful to have that knowledge function, right?
Yeah, you don't need that for this.
And here you could actually trigger a nervous function that you have created from maybe you want to
read this code and again and again or you say something like first alert style dot display to modifying
the display immediately like this.
And I want to say block.
So it will be a block level element, which is what I do if and if the bottom is pressed.
You'll change the display to none.
I so far a refresh if I click that nothing's happened in Florida that goes away, show they go the way
that that is how you hide and show a trigger, I mean, an alert or any sort of element on your website,
really via some other external trigger.
In this case, it's a button might be a timer trigger after a few seconds.
Maybe you want it to disappear.
It might be of another alert that appears.
Then you only want to see only one or a free alert period.
And now what I want to show you is how can we detect when we click the close button because of it?
Nothing useful thing to be able to detect.
Well, the last alert and eventually snuck on to listen in on close to being alert.
When it gets triggered, we call this function and in here we call a number of set of functions if we
wanted to,
and I'm done for a console log and this is going to say something close and then save that a refresh.
And if I picked up his closing, closing, closing.
So that is it for a look, I will provide this in the description and some of the cool stuff in terms
of length.
So if you do have a link in there, you could use this class and look at a bunch of really cool stuff
that you can check out on their official website.
And that will be available in the description.
If you have any questions, feel free to pour me a message.
And as usual, I look forward to seeing you in the next video.