1
00:00:01,070 --> 00:00:10,490
Hello, in this video, we are going to cover alerts of the alert component, so an alert, let me just

2
00:00:10,490 --> 00:00:15,460
implement a really simple one and you can see what they are.

3
00:00:15,480 --> 00:00:18,530
So you can implement them inside of a, you know, a column if you want.

4
00:00:18,560 --> 00:00:20,030
You don't have to necessarily.

5
00:00:20,300 --> 00:00:21,740
It's going to keep it all consistent.

6
00:00:21,890 --> 00:00:24,530
If you don't, you can specify, you know, it's a weapon.

7
00:00:24,530 --> 00:00:26,460
You might want to go all the way across.

8
00:00:26,480 --> 00:00:28,770
You might want it to be anchored at the bottom, the sea.

9
00:00:28,790 --> 00:00:30,020
You know why I'm saying that?

10
00:00:30,170 --> 00:00:38,030
Because when you see you're immediately recognized from other websites so cooperative and then the device

11
00:00:38,090 --> 00:00:46,120
requires a class and the class of alert, then you need essentially a theme.

12
00:00:46,850 --> 00:00:48,250
I'm the primary.

13
00:00:48,290 --> 00:00:53,840
I will show you the all other things that are available in a second.

14
00:00:54,110 --> 00:01:02,140
You, you the roll roll, which is alert and get the word up then and then we're going to need an I.D.

15
00:01:02,480 --> 00:01:03,940
This idea is optional.

16
00:01:04,190 --> 00:01:09,620
We're going to be using this in a little bit later in this video via JavaScript.

17
00:01:09,620 --> 00:01:11,360
Hence why or anything.

18
00:01:11,480 --> 00:01:14,240
Now, again, you can call whoever you want.

19
00:01:14,430 --> 00:01:18,550
I want to say warmblood alert robotics here.

20
00:01:18,560 --> 00:01:24,800
You want know, depending on what the alerts say, may maybe the alert is saying, please accept, you

21
00:01:24,800 --> 00:01:27,440
know, some sort of Data Protection Act agreement.

22
00:01:27,680 --> 00:01:30,050
Maybe you need to reset your password.

23
00:01:30,050 --> 00:01:32,420
Maybe something's going to expire in five days.

24
00:01:32,430 --> 00:01:35,390
Something along those lines to refresh.

25
00:01:35,540 --> 00:01:35,990
There we go.

26
00:01:35,990 --> 00:01:41,600
We have this alert and it spans six columns and say 12.

27
00:01:42,020 --> 00:01:45,800
It spans all the way across in this particular.

28
00:01:46,190 --> 00:01:47,750
This is a basic alert.

29
00:01:48,150 --> 00:01:50,270
So on the alert page.

30
00:01:50,270 --> 00:01:52,490
And I'm going to provide a link to this in the description.

31
00:01:52,730 --> 00:01:54,690
So don't worry, you will be able to see all this.

32
00:01:54,860 --> 00:01:56,300
These are all the different theme.

33
00:01:56,300 --> 00:02:02,660
So you just use no alert, a secondary or success depending on what you're trying to do, the message

34
00:02:02,660 --> 00:02:03,520
you're trying to convey.

35
00:02:03,800 --> 00:02:12,650
So if let's say maybe this appears when the user puts the incorrect password and email combo to log

36
00:02:12,650 --> 00:02:14,270
in, you could have like an alert.

37
00:02:14,270 --> 00:02:15,470
I mean, a danger alert.

38
00:02:15,680 --> 00:02:20,000
If maybe they successfully posted something, you could have a green alert.

39
00:02:20,210 --> 00:02:26,420
Maybe the account is going to expire in 30 days and they don't have automatic renewal.

40
00:02:26,600 --> 00:02:32,270
You don't say probably one danger, maybe one morning, or if it's just some something else, you might

41
00:02:32,270 --> 00:02:36,440
want some of the others as a basic alert.

42
00:02:36,770 --> 00:02:43,790
So now let's cover a slightly more complex alert, but a bit more information.

43
00:02:44,060 --> 00:02:46,460
Let me just duplicate that.

44
00:02:46,740 --> 00:02:47,630
This is what we get.

45
00:02:47,630 --> 00:02:54,820
We are on the alert and I'm going to change this just to keep things fresh on course, say danger.

46
00:02:55,590 --> 00:02:59,840
I don't have no idea because we're not going to be using this in JavaScript later.

47
00:03:00,350 --> 00:03:05,390
And in here, instead of just doing this, we're going to have a Hajj.

48
00:03:05,390 --> 00:03:08,690
Folks are going to have a head of Tikhonov Web ahead of time you want.

49
00:03:09,020 --> 00:03:15,320
I'm to have a class and the class is going to be alert in which is built in provide some styling.

50
00:03:15,560 --> 00:03:17,690
And I'm just going to put the text in.

51
00:03:18,290 --> 00:03:22,370
Then we're going to put a tag and in here the same name.

52
00:03:22,730 --> 00:03:31,070
But this is awesome intellectual content.

53
00:03:32,990 --> 00:03:43,850
And for a president to rule again, this is just Stalin and I'm going for a pizza and I'll say that's

54
00:03:43,850 --> 00:03:45,440
great information.

55
00:03:46,100 --> 00:03:48,570
You'll see what this produces right now.

56
00:03:48,590 --> 00:03:51,830
So this is what have been produced as a result of it.

57
00:03:51,830 --> 00:03:52,350
Inhealth.

58
00:03:52,370 --> 00:03:56,720
Want to mention light inside of this alert and put any sort of safety.

59
00:03:56,960 --> 00:04:02,630
You want your husband's Divx images, videos, I guess you never know.

60
00:04:02,630 --> 00:04:07,130
You might want a YouTube video there to explain some feature of the website.

61
00:04:07,130 --> 00:04:12,290
Maybe the user doesn't seem like they're aware of what they need to do.

62
00:04:12,300 --> 00:04:15,810
Maybe they clicking the wrong button, for example, think whatever you want in there.

63
00:04:15,830 --> 00:04:20,930
So these are just a bit more information heading from text and then some extra information, but then

64
00:04:20,930 --> 00:04:22,980
you can put as much information as you want.

65
00:04:23,000 --> 00:04:26,930
This is just a great example they provided on the official website.

66
00:04:26,930 --> 00:04:29,930
So I thought I'd show you that.

67
00:04:29,930 --> 00:04:33,080
And I did see that some rounded corners on all of it.

68
00:04:33,300 --> 00:04:44,390
You could obviously modify the border radius, you know, if you wanted to use that and you'd want to

69
00:04:44,390 --> 00:04:45,490
show you this.

70
00:04:45,630 --> 00:04:46,000
Oh, yes.

71
00:04:46,000 --> 00:04:49,390
So if you look, there's quite a big gap.

72
00:04:49,440 --> 00:04:56,600
If you want to remove that, we can use a built-In monitoring utility by applying a class M.B, which

73
00:04:56,600 --> 00:04:58,670
is margin bottom dash one zero.

74
00:04:58,970 --> 00:05:00,550
And this removes the margin.

75
00:05:00,710 --> 00:05:07,910
So obviously they still a bit of padding, but that's just for some of the other general, you know,

76
00:05:08,210 --> 00:05:09,320
elements that we're using.

77
00:05:09,440 --> 00:05:15,800
But it's removed it, removed it for this particular P tag and it looks a lot cleaner.

78
00:05:16,190 --> 00:05:25,340
Now let me show you a Nova type alert Nova type Nova type of alert that allows you to press a close

79
00:05:25,340 --> 00:05:26,720
button and fades away.

80
00:05:27,500 --> 00:05:34,750
So what we are going to do is I'm going to grab the first one could you could combine into one of these,

81
00:05:34,760 --> 00:05:36,560
but I'm going to have a simple one.

82
00:05:36,840 --> 00:05:43,730
Don't really need anything complex owner put this out of a warning one this time, again, just for

83
00:05:43,730 --> 00:05:47,450
the sake of know, very fixed up.

84
00:05:47,690 --> 00:05:55,700
You need to put the class alert that dismissable, dismissable, make sure spelling it correctly the

85
00:05:55,710 --> 00:05:59,950
fade and show the roll is falling.

86
00:05:59,960 --> 00:06:03,650
And we do want an idea here on a collision alert.

87
00:06:04,580 --> 00:06:09,590
And in here I'm going to put a strong time.

88
00:06:09,620 --> 00:06:10,700
Again, this is optional.

89
00:06:10,880 --> 00:06:15,560
Also the error, error, error.

90
00:06:20,740 --> 00:06:28,460
Please deal with your errors immediately.

91
00:06:30,430 --> 00:06:37,710
And if I say them, refresh, you get this, but we want to live export together closer to do that and

92
00:06:37,720 --> 00:06:49,710
you just put the bottom tag and the type of a button class is closed.

93
00:06:49,720 --> 00:06:51,430
Again, this is all just Dotan stuff.

94
00:06:51,430 --> 00:07:00,510
The class put data that dismiss people's and therefore we are dismissing the alert and an area that's

95
00:07:00,550 --> 00:07:03,520
label not the

96
00:07:09,320 --> 00:07:12,100
equals loans.

97
00:07:12,850 --> 00:07:18,690
And if we refresh that, we don't get anything because we need to actually sort of show something.

98
00:07:18,720 --> 00:07:32,660
We're going to show an icon and with an open area either equally true and they're going to put some

99
00:07:32,710 --> 00:07:34,300
time, some code

100
00:07:37,150 --> 00:07:38,290
that we go now.

101
00:07:38,290 --> 00:07:40,980
We have this fact that it disappears.

102
00:07:41,290 --> 00:07:47,730
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.

103
00:07:47,740 --> 00:07:50,110
So just in case is annoying them.

104
00:07:50,260 --> 00:07:53,370
You know, you see it all the time, something to pop up at the top.

105
00:07:53,380 --> 00:08:00,730
You might be if you need to accept some agreement, it might be, you know, some of the cookies that

106
00:08:00,730 --> 00:08:02,050
you can just dismiss it.

107
00:08:02,170 --> 00:08:07,690
They might actually have a botnet, just say OK, or continue or already agreed to essentially the same

108
00:08:07,690 --> 00:08:09,700
thing as having that X thing.

109
00:08:10,140 --> 00:08:16,350
You could put something else in here if you want to, as long as this is still providing this, because

110
00:08:16,360 --> 00:08:26,110
this this is what dismisses the alert for some simple, now ineffective use of some JavaScript to manually

111
00:08:26,170 --> 00:08:28,920
show and hide an alert.

112
00:08:29,320 --> 00:08:34,840
So I'm going to create up here a few buttons.

113
00:08:35,980 --> 00:08:40,870
So almost any device for the buttons to keep the need simple.

114
00:08:42,250 --> 00:08:42,750
All done.

115
00:08:43,060 --> 00:08:50,610
Well, again, you can use whatever Thorstein Informa elements you want strong among themselves will

116
00:08:50,620 --> 00:08:51,160
alert

117
00:08:55,030 --> 00:08:57,700
and have an radio show alert again.

118
00:08:57,700 --> 00:09:00,820
You can rename this whatever you want and keep it simple

119
00:09:04,570 --> 00:09:09,550
if you want to be called high alert and it'll show the text high alert.

120
00:09:09,920 --> 00:09:14,020
So if we scroll down there, we want to actually put some JavaScript.

121
00:09:14,320 --> 00:09:21,460
So we will generally put it after all of the other script, times have loaded and you can even put it

122
00:09:21,460 --> 00:09:29,450
in some script tags here or load and an external JavaScript file about how you this code is keeping

123
00:09:29,500 --> 00:09:29,830
here.

124
00:09:29,830 --> 00:09:37,450
Just to keep things simple, the first of all, we want to get the element from our website to do that

125
00:09:37,450 --> 00:09:53,980
and do first alert equals document yet element Boiardi and the first alerts and this refers to.

126
00:09:58,160 --> 00:09:59,000
Best of luck to you.

127
00:09:59,390 --> 00:10:02,090
We're also going to get the last alert as well.

128
00:10:03,670 --> 00:10:07,030
This is the murder

129
00:10:11,890 --> 00:10:12,700
capital.

130
00:10:13,000 --> 00:10:19,240
We're also going to get the trigger buttons, so show on high alert on the Today show trigger and this

131
00:10:19,240 --> 00:10:22,940
is going to be document target element by the.

132
00:10:26,270 --> 00:10:33,410
And the D I mean, the bottom had an idea of show alert,

133
00:10:36,410 --> 00:10:46,880
this is going to be employed to remove the two accidentally or alert and now they're going to say,

134
00:10:47,120 --> 00:10:50,000
if I am just blowing up.

135
00:10:50,000 --> 00:10:53,700
So the scroll up and down along with a show trigger.

136
00:10:53,720 --> 00:10:55,810
So this is just some basic JavaScript.

137
00:10:55,820 --> 00:10:59,540
This is not a JavaScript, you know, video or tutorial series.

138
00:10:59,540 --> 00:11:05,340
But obviously it is useful to have that knowledge function, right?

139
00:11:05,510 --> 00:11:11,120
Yeah, you don't need that for this.

140
00:11:11,990 --> 00:11:17,360
And here you could actually trigger a nervous function that you have created from maybe you want to

141
00:11:17,360 --> 00:11:24,290
read this code and again and again or you say something like first alert style dot display to modifying

142
00:11:24,290 --> 00:11:27,020
the display immediately like this.

143
00:11:27,020 --> 00:11:28,820
And I want to say block.

144
00:11:29,060 --> 00:11:39,860
So it will be a block level element, which is what I do if and if the bottom is pressed.

145
00:11:51,050 --> 00:11:53,650
You'll change the display to none.

146
00:11:54,860 --> 00:12:02,540
I so far a refresh if I click that nothing's happened in Florida that goes away, show they go the way

147
00:12:03,220 --> 00:12:10,460
that that is how you hide and show a trigger, I mean, an alert or any sort of element on your website,

148
00:12:10,460 --> 00:12:13,500
really via some other external trigger.

149
00:12:13,520 --> 00:12:17,390
In this case, it's a button might be a timer trigger after a few seconds.

150
00:12:17,420 --> 00:12:19,450
Maybe you want it to disappear.

151
00:12:19,760 --> 00:12:22,340
It might be of another alert that appears.

152
00:12:22,550 --> 00:12:26,560
Then you only want to see only one or a free alert period.

153
00:12:27,260 --> 00:12:33,330
And now what I want to show you is how can we detect when we click the close button because of it?

154
00:12:33,360 --> 00:12:35,720
Nothing useful thing to be able to detect.

155
00:12:35,960 --> 00:12:47,540
Well, the last alert and eventually snuck on to listen in on close to being alert.

156
00:12:51,450 --> 00:12:58,950
When it gets triggered, we call this function and in here we call a number of set of functions if we

157
00:12:58,950 --> 00:12:59,750
wanted to,

158
00:13:04,050 --> 00:13:15,450
and I'm done for a console log and this is going to say something close and then save that a refresh.

159
00:13:15,570 --> 00:13:18,890
And if I picked up his closing, closing, closing.

160
00:13:18,900 --> 00:13:25,620
So that is it for a look, I will provide this in the description and some of the cool stuff in terms

161
00:13:25,620 --> 00:13:26,250
of length.

162
00:13:26,440 --> 00:13:32,820
So if you do have a link in there, you could use this class and look at a bunch of really cool stuff

163
00:13:32,820 --> 00:13:35,790
that you can check out on their official website.

164
00:13:35,940 --> 00:13:37,800
And that will be available in the description.

165
00:13:38,070 --> 00:13:40,470
If you have any questions, feel free to pour me a message.

166
00:13:40,560 --> 00:13:44,310
And as usual, I look forward to seeing you in the next video.