1
00:00:01,010 --> 00:00:08,670
Hello, in this video, I am going to show you the toast component in Bootstrap, no toast isn't in

2
00:00:08,690 --> 00:00:14,120
bootstrap, something that you can eat, unfortunately, but or a toast component is kind of like a

3
00:00:14,120 --> 00:00:16,580
notification on the website itself.

4
00:00:16,830 --> 00:00:21,650
So, you know how you might get some sort of notification, like on your OS, on your phone, you might

5
00:00:21,650 --> 00:00:24,320
get something on the website, maybe something completed.

6
00:00:24,530 --> 00:00:27,080
Maybe you want to let the user that they've got a message.

7
00:00:27,230 --> 00:00:29,040
You can do that with a toast component.

8
00:00:29,060 --> 00:00:30,230
This is what it is.

9
00:00:30,590 --> 00:00:34,850
Will provide a link to the Bootstrap API guide in the description.

10
00:00:34,850 --> 00:00:39,020
So you can actually, you know, check out all the all the different features.

11
00:00:39,330 --> 00:00:41,720
I going to show you how to implement a basic one.

12
00:00:42,050 --> 00:00:49,040
And first of all, what we are going to do is add a button and the button is what is going to trigger

13
00:00:49,370 --> 00:00:56,430
the toast notification class ETN beauteous there.

14
00:00:56,480 --> 00:01:02,750
Feel free to check on my video on buttons for more information about, well, buttons and say UNCLICK

15
00:01:03,590 --> 00:01:10,420
is going to call a method called Toastie, which we will implement in JavaScript shortly and closed

16
00:01:10,430 --> 00:01:10,670
down.

17
00:01:10,670 --> 00:01:18,220
So you get a bit more room to play with and I'm going to make the button, say, Tofte me up.

18
00:01:19,940 --> 00:01:26,730
OK, so now what we're going to do up there and the wired up now will then do is actually implement

19
00:01:26,840 --> 00:01:27,410
toast.

20
00:01:27,810 --> 00:01:33,260
So you need a device and this will have a class of toast.

21
00:01:34,460 --> 00:01:46,760
Keep really wanted to now add to this morning idea because epic toast and this is what we will be using

22
00:01:46,760 --> 00:01:51,590
to refer to it in the in the JavaScript code.

23
00:01:51,870 --> 00:02:01,220
When I say roll equals alert area dash because of assertive.

24
00:02:02,160 --> 00:02:09,120
Then we're going to have an area dash atomic and there might be a sequel to True and we're going to

25
00:02:09,120 --> 00:02:16,200
have some styling as well on this one show, you all look like without the style and basically regarding

26
00:02:16,200 --> 00:02:18,960
position, there's more information about that on the bootstrap page.

27
00:02:19,530 --> 00:02:20,450
So you can check that up.

28
00:02:20,460 --> 00:02:21,790
I will show you that as well.

29
00:02:21,880 --> 00:02:23,500
I want to show you what it looks like without it.

30
00:02:23,940 --> 00:02:25,070
The first of all.

31
00:02:25,080 --> 00:02:36,930
Well, the two main components within a toast, you have the header, which is signified by this, and

32
00:02:37,020 --> 00:02:39,060
you also have a toast body.

33
00:02:39,990 --> 00:02:44,180
And let me copy and paste this set of toasted toast body.

34
00:02:44,610 --> 00:02:48,900
Realistically, there's no limitation on what you can put in the images.

35
00:02:48,900 --> 00:02:54,390
You can put anything really probably want to keep it simple and text like the title in here and, you

36
00:02:54,390 --> 00:02:57,870
know, just some text in the body explaining what this.

37
00:02:58,790 --> 00:03:06,770
Toast is about so strong, again, this is just total formating, and you can do it however you want.

38
00:03:07,430 --> 00:03:15,890
I'm going to say class because I am all that sort of modern boy to auto just looks nice on a beach.

39
00:03:15,930 --> 00:03:26,300
Steptoe's you might say something like if you're a social media website, might say Bob has commented

40
00:03:26,300 --> 00:03:33,690
on this post for example, and then I'd say old.

41
00:03:35,240 --> 00:03:40,770
I want some toast and we're going to have a bottom.

42
00:03:40,820 --> 00:03:43,340
This is going to be the bottom in the top, right?

43
00:03:43,670 --> 00:03:50,420
I loved it to close that toast and the toast will automatically disappear after a little bit of time

44
00:03:50,900 --> 00:03:51,620
anyway.

45
00:03:51,620 --> 00:03:53,630
So we will disappear.

46
00:03:53,900 --> 00:03:57,230
You can make it stay there forever.

47
00:03:57,500 --> 00:04:01,040
There's more information about down the bootstrap page, so feel free to check that out.

48
00:04:02,390 --> 00:04:12,740
And the type of button we're going to have a class per month and margin left to where I've just checked

49
00:04:12,740 --> 00:04:12,950
out.

50
00:04:13,020 --> 00:04:14,540
It looks pretty good.

51
00:04:15,720 --> 00:04:20,560
It meant to be inside the class and we want it to be close.

52
00:04:20,570 --> 00:04:22,070
So we have the X.

53
00:04:22,070 --> 00:04:29,410
The stolen data does dismiss people as toast because that's what it is essentially dismissing.

54
00:04:29,900 --> 00:04:36,530
And we also need a area that's able to close.

55
00:04:36,830 --> 00:04:38,930
Now, we're going to do it here.

56
00:04:39,560 --> 00:04:43,460
We're going to have a fun area.

57
00:04:43,670 --> 00:04:47,860
Dash hidden equals true.

58
00:04:48,960 --> 00:04:53,300
I'm going to put some time semicolon.

59
00:04:53,660 --> 00:04:57,680
OK, so I was going to put some, you know, somebody in here.

60
00:04:57,700 --> 00:05:01,430
So hello world.

61
00:05:02,450 --> 00:05:07,970
I am eating toast.

62
00:05:08,600 --> 00:05:11,030
So if I save that, go back, refresh.

63
00:05:12,110 --> 00:05:15,920
This does nothing at the moment because we haven't implemented any JavaScript.

64
00:05:16,390 --> 00:05:19,280
Let's go down here after we've included all the libraries.

65
00:05:19,520 --> 00:05:25,700
Just open up some script tags if you have a separate jobs file for this particular page.

66
00:05:25,880 --> 00:05:29,420
Feel free to put in there because my example is very simple.

67
00:05:29,430 --> 00:05:32,000
I'm going to put all on the same page.

68
00:05:32,540 --> 00:05:41,180
OK, so what we want to do is, first of all, create an option array and this is basically going to

69
00:05:41,270 --> 00:05:45,280
have some options.

70
00:05:45,290 --> 00:05:52,100
Some say animation just looks the nice with animation, delay in files.

71
00:05:52,100 --> 00:05:58,280
And so two seconds is measured in milliseconds and you can check out all the options if we scroll down

72
00:05:58,280 --> 00:05:59,400
to here.

73
00:05:59,840 --> 00:06:05,120
So the really only three options or to hide is what I was talking about.

74
00:06:05,130 --> 00:06:12,170
So if you set that to folks, it will hide after X amount of time, which is what the delay property

75
00:06:12,620 --> 00:06:13,400
represents.

76
00:06:13,640 --> 00:06:21,670
OK, so if you want to add more in this case, one more put a comma and then add the next one is basically,

77
00:06:21,690 --> 00:06:23,080
you know, these bases are required.

78
00:06:23,090 --> 00:06:25,130
I just prefer the look of them.

79
00:06:26,270 --> 00:06:29,720
So let me kolon form months ago about Taino fans.

80
00:06:29,720 --> 00:06:31,070
Jobs were pretty loose with it.

81
00:06:31,360 --> 00:06:33,490
We should still pretend it's a good habit.

82
00:06:33,920 --> 00:06:45,470
Now I'm going to function sheepfold Toastie and this toasties refers to this unclick right unclick.

83
00:06:45,710 --> 00:06:47,330
This will get triggered in here.

84
00:06:47,340 --> 00:06:50,030
First of all, we need to get the Hastey amount element.

85
00:06:50,660 --> 00:07:01,610
You know that the toast that does not appear yet to get that you have to document doget element by day.

86
00:07:01,850 --> 00:07:04,100
And the idea is.

87
00:07:06,660 --> 00:07:10,090
This right here, I have a copy that paste it here.

88
00:07:10,440 --> 00:07:12,210
Now we've got the element.

89
00:07:12,390 --> 00:07:20,940
You can't actually show the toast until you've actually created a bootstrap toast component out of this

90
00:07:20,940 --> 00:07:21,370
element.

91
00:07:21,390 --> 00:07:33,990
So what we're doing involves toast element equals new boot structure, toast, and you need to specify

92
00:07:33,990 --> 00:07:35,880
toast, take them out element.

93
00:07:36,270 --> 00:07:39,480
And we specify this options as well.

94
00:07:40,020 --> 00:07:42,430
Next problem, there is a toast element.

95
00:07:42,450 --> 00:07:50,070
So this one right here, this is now a bootstrap component dot show and the three different methods.

96
00:07:50,730 --> 00:07:53,480
If we go here, you can see them right here.

97
00:07:53,540 --> 00:07:56,520
So the show hide and dispose.

98
00:07:57,090 --> 00:07:58,470
If I reload, click it.

99
00:07:59,070 --> 00:08:00,170
We get the toast.

100
00:08:00,180 --> 00:08:03,750
And after I think after two seconds it disappears.

101
00:08:03,960 --> 00:08:06,410
But I can make it disappear by clicking the F.

102
00:08:06,630 --> 00:08:09,080
That's why it looks like it's pretty simple stuff.

103
00:08:09,720 --> 00:08:12,510
It doesn't go away for the click off it.

104
00:08:14,600 --> 00:08:20,780
Now it goes way up second, but you can make it go away if you click away from me again, that's all

105
00:08:20,780 --> 00:08:21,620
available here.

106
00:08:21,800 --> 00:08:27,190
But this shows up literally just below waithe being traded from me in this case button.

107
00:08:27,890 --> 00:08:32,570
Usually you have them like pop up in the top right or in the bottom right or something like that.

108
00:08:32,810 --> 00:08:34,110
Let's put it in the top right.

109
00:08:34,400 --> 00:08:38,410
That's the story line that I was talking about that I didn't implement.

110
00:08:38,660 --> 00:08:41,630
I just wanted to show you what it looks like without any styling.

111
00:08:42,110 --> 00:08:47,650
You feel free to obstruct this out into some style tags or into access file.

112
00:08:48,500 --> 00:08:51,070
But again, simple, only the key.

113
00:08:51,130 --> 00:09:00,370
I'm going to put position absolute gold on top for hour instead of a semicolon.

114
00:09:00,380 --> 00:09:02,480
Top 20 pixels.

115
00:09:02,630 --> 00:09:04,280
I'll put zero for now.

116
00:09:05,120 --> 00:09:06,470
Show you what that looks like.

117
00:09:06,470 --> 00:09:07,160
Right.

118
00:09:11,150 --> 00:09:13,790
Zero go back refreshed.

119
00:09:13,790 --> 00:09:15,370
Dabwido is in the top right.

120
00:09:15,620 --> 00:09:22,850
Doesn't look very good just being there with that tiny gap on the the edges of the presence of the top

121
00:09:22,850 --> 00:09:23,810
and the right of it.

122
00:09:24,110 --> 00:09:24,920
So on top.

123
00:09:24,920 --> 00:09:29,320
Right, 20 pixels and 20 people.

124
00:09:29,570 --> 00:09:32,210
I just find this looks really cool.

125
00:09:33,830 --> 00:09:34,220
Click it.

126
00:09:34,430 --> 00:09:34,910
There we go.

127
00:09:34,940 --> 00:09:36,200
We got to toss notifications.

128
00:09:36,380 --> 00:09:37,700
You can stack them as well.

129
00:09:37,710 --> 00:09:40,340
That's part of the API go.

130
00:09:40,340 --> 00:09:41,330
It should be here somewhere.

131
00:09:41,340 --> 00:09:41,960
There we go.

132
00:09:41,960 --> 00:09:43,820
Placement stacking.

133
00:09:44,060 --> 00:09:45,080
Feel free to.

134
00:09:46,000 --> 00:09:50,850
You know, have a look at that, an experiment, so that's it, really simple stuff.

135
00:09:50,890 --> 00:09:53,650
If you have any questions, feel free to pop me a message.

136
00:09:53,920 --> 00:09:57,300
And as usual, I look forward to seeing you in the next video.