1

00:00:00,730 --> 00:00:01,090

2
00:00:01,090 --> 00:00:08,500
So the last thing that we have to style is this flash message box, which displays a
flash message which

3
00:00:08,500 --> 00:00:13,930
pops up when something happens to make it easier to style it.

4
00:00:14,170 --> 00:00:17,650
We will be rendering it always.

5
00:00:17,650 --> 00:00:20,920
So comment out those two lines.

6
00:00:21,970 --> 00:00:23,680
This is how you comment out.

7
00:00:23,710 --> 00:00:32,290
You can also use the shortcut key and maybe I will also copy this element and
comment out this line.

8
00:00:33,330 --> 00:00:38,400
So that we can always display some kind of flash message.

9
00:00:38,670 --> 00:00:42,570
This is a flash message.

10
00:00:46,030 --> 00:00:51,850
So it looks like this currently and then we'll begin styling it.

11
00:00:54,600 --> 00:00:57,570
So let's add the class attribute.

12
00:00:57,570 --> 00:01:03,150
The first thing I'd like you do is some distinct margin bottom.

13
00:01:05,790 --> 00:01:12,270
So it's clearly visible that something important has happened and there is a clear
separation.

14
00:01:13,350 --> 00:01:16,650
Obviously, later on this will be rendered conditionally.
15
00:01:16,650 --> 00:01:23,100
We just temporarily always render it so we can see all the changes that we are
applying.

16
00:01:23,130 --> 00:01:26,250
Now I want this element to be rounded.

17
00:01:27,490 --> 00:01:37,150
I wanted to have a border and the border needs to be green as this is just a
success message with a

18
00:01:37,150 --> 00:01:40,000
light shade of green 400.

19
00:01:40,330 --> 00:01:45,250
Then it should also have a green background, a very light one.

20
00:01:45,250 --> 00:01:46,930
So just a hundred.

21
00:01:47,830 --> 00:01:53,950
Then the horizontal padding of size four and vertical padding of size three.

22
00:01:54,070 --> 00:01:57,700
All right, let's see how this looks like so far.

23
00:01:59,810 --> 00:02:01,730
That's how it looks like.

24
00:02:05,170 --> 00:02:12,490
Now let's make text a little larger and also text should be green.

25
00:02:12,970 --> 00:02:15,940
The shade is 700.

26
00:02:19,130 --> 00:02:22,640
This is our flash temporary message.

27
00:02:23,600 --> 00:02:24,350
All right.

28
00:02:26,430 --> 00:02:30,330
So now let's add something inside.

29
00:02:31,080 --> 00:02:38,610
So let's add a strong element saying that something was successful.

30
00:02:39,810 --> 00:02:47,100
And since all elements are reset by tailwind, we need to give it a font bold class.

31
00:02:51,580 --> 00:02:53,470
This is how it looks like.

32
00:02:56,290 --> 00:03:02,500
Now let's wrap the message inside a div element.

33
00:03:07,510 --> 00:03:08,950
So it looks like this.

34
00:03:08,950 --> 00:03:12,520
So it always says that something was successful.

35
00:03:12,520 --> 00:03:15,250
And then we display the message.

36
00:03:15,820 --> 00:03:16,300
All right.

37
00:03:16,300 --> 00:03:21,220
So we are more or less done with the styling of this flash message.

38
00:03:21,220 --> 00:03:26,440
But I would also like to add some interactivity to this page.

39
00:03:26,440 --> 00:03:33,700
So far, everything that we have here is rendered on the server, which means that
Laravel returns the

40
00:03:33,700 --> 00:03:36,070
whole HTML page.

41
00:03:36,250 --> 00:03:42,040
And then to make any kind of interactivity, we just need to follow links.

42
00:03:42,040 --> 00:03:46,390
So there is no JavaScript on our page.

43
00:03:46,390 --> 00:03:53,200
We can't really do anything that will modify the page that is already downloaded
from the server.

44
00:03:53,470 --> 00:04:02,020
So to make a tiny example of how you can quickly add some interactivity, we'll add
a close button so

45
00:04:02,020 --> 00:04:04,830
we can make this message disappear.

46
00:04:04,840 --> 00:04:09,200
For that, we'll use a tiny library called Alpine.

47
00:04:09,200 --> 00:04:18,500
JS It's actually pretty popular in Laravel world and it's used together with tools
like Livewire, which

48
00:04:18,500 --> 00:04:27,170
is just a way to avoid using front end frameworks like React and Vue and still
making your pages your

49
00:04:27,170 --> 00:04:31,730
Laravel Pages dynamic and interactive.

50
00:04:31,760 --> 00:04:39,890
So Alpine is extremely easy to use and we will see that very soon in an example.

51
00:04:41,140 --> 00:04:47,320
So let's go ahead and add a close button here that will make this message disappear
with the help of

52
00:04:47,320 --> 00:04:48,130
Alpine.

53
00:04:50,860 --> 00:04:54,160
All right, so let's jump into the code.

54
00:04:54,190 --> 00:04:57,340
This is our container div element.

55
00:04:57,370 --> 00:05:02,800
One more thing we can do about this element is to help with accessibility.

56
00:05:02,830 --> 00:05:06,190
Let's add a role attribute and say alert.

57
00:05:06,310 --> 00:05:12,760
Well, that won't do anything for you guys that don't have any problems with vision.

58
00:05:12,760 --> 00:05:16,960
But for everyone else, this is really helping the screen.

59
00:05:16,960 --> 00:05:24,190
Readers and tools like that recognize that this contains some important
information, like an alert,

60
00:05:24,190 --> 00:05:31,120
something that has happened, and those screen readers and accessibility tools can
inform that person

61
00:05:31,120 --> 00:05:34,190
that's using the website that something has happened.

62
00:05:34,210 --> 00:05:37,450
You should always think about those things.

63
00:05:37,480 --> 00:05:42,230
Now we would like to make this element relative.

64
00:05:42,250 --> 00:05:45,460
So I am adding a relative class.

65
00:05:46,450 --> 00:05:47,200
All right.

66
00:05:47,320 --> 00:05:58,150
So we are adding this relative class because inside we will be adding another class
that would be positioned

67
00:05:58,180 --> 00:05:58,840
absolute.

68
00:05:58,840 --> 00:06:01,990
So it will have a position absolute.

69
00:06:02,170 --> 00:06:11,980
So the thing about elements that are positioned using the absolute way is when you
specify their position,

70
00:06:12,100 --> 00:06:21,340
it would be a deposition that's relative to either the page or the outermost
element that has the relative
71
00:06:21,340 --> 00:06:21,930
class.

72
00:06:21,940 --> 00:06:28,540
That's why we are adding this relative class here, because we want this element
that we are going to

73
00:06:28,540 --> 00:06:31,180
add positioned relatively.

74
00:06:31,480 --> 00:06:35,080
Now the code is on the GitHub.

75
00:06:35,080 --> 00:06:41,380
I will give you the link on the screen and also it is attached to this lecture.

76
00:06:41,380 --> 00:06:48,080
If you are watching on Udemy and I would like you to paste it now so I won't be
typing that because

77
00:06:48,080 --> 00:06:58,340
basically this is an SVG element which basically renders a sign that looks like
this.

78
00:06:58,730 --> 00:07:06,590
So no point in typing that you never type Svgs This is just a description of a
vector graphic element

79
00:07:06,950 --> 00:07:15,530
so you can see it is rendered here at the bottom and I would like it to be rendered
here when I move

80
00:07:15,530 --> 00:07:19,760
the mouse on the right corner, top right corner of this element.

81
00:07:19,940 --> 00:07:23,300
So let's see how can we achieve that?

82
00:07:25,130 --> 00:07:36,440
So we've made this top element relative so that we can make this element A with the
position absolute.

83
00:07:37,350 --> 00:07:43,980
Then I will specify the top position to be zero and bottom position to be zero.
84
00:07:44,430 --> 00:07:52,380
But also I will add some padding that's horizontal and some padding that is
vertical.

85
00:07:53,550 --> 00:07:56,140
Now let's see where it is displayed.

86
00:07:56,160 --> 00:08:00,630
So it is displayed here currently.

87
00:08:05,060 --> 00:08:07,730
This means we haven't added something.

88
00:08:07,730 --> 00:08:16,160
I think, yes, we need to set right to zero, so we need to add this class so it
starts being positioned

89
00:08:16,160 --> 00:08:17,930
from the right side.

90
00:08:18,560 --> 00:08:21,140
So when I refresh, it's now here.

91
00:08:21,140 --> 00:08:25,430
I needed a moment to figure out what I have forgotten.

92
00:08:25,910 --> 00:08:32,929
So, you know, it always or sometimes happens to me that things don't work as
expected.

93
00:08:33,440 --> 00:08:34,640
So there we have it.

94
00:08:34,640 --> 00:08:35,539
It's on the right.

95
00:08:35,570 --> 00:08:42,830
Now let me remove this relative class from the parent element so we can see why it
had to be added.

96
00:08:42,830 --> 00:08:51,680
So if this container element wouldn't be relative, then this element would be
positioned absolute relative

97
00:08:51,680 --> 00:08:52,370
to the page.

98
00:08:52,370 --> 00:08:55,610
You can see it on the top right corner of the page.

99
00:08:55,700 --> 00:09:03,830
So it's either the first top outermost element that's relative or then if there is
no relative elements,

100
00:09:03,830 --> 00:09:09,810
then the page, the absolute element is positioned relative to the page.

101
00:09:09,810 --> 00:09:11,970
That's why we had to add that.

102
00:09:12,780 --> 00:09:16,890
All right, so, um, we have our button.

103
00:09:16,890 --> 00:09:17,640
It's here.

104
00:09:17,640 --> 00:09:20,880
But, you know, nothing's happening so far.

105
00:09:20,880 --> 00:09:24,120
If I click on it, nothing's happening.

106
00:09:25,080 --> 00:09:28,920
So first we should be adding Alpine.

107
00:09:28,920 --> 00:09:31,620
So let's copy this line.

108
00:09:33,340 --> 00:09:40,870
So we are also getting it from CN, which I've previously explained what that is.

109
00:09:43,880 --> 00:09:45,590
All right, let's refresh.

110
00:09:45,590 --> 00:09:49,490
Let's make sure that Alpine is fetched.

111
00:09:55,270 --> 00:09:55,630
All right.
112
00:09:55,630 --> 00:10:00,250
So having Alpine running, let's add the first thing.

113
00:10:00,250 --> 00:10:05,470
So Alpine has those custom attributes like the X data.

114
00:10:05,470 --> 00:10:08,320
Now Alpine will then process those.

115
00:10:08,320 --> 00:10:13,780
And this can well, this lets us add some interesting features.

116
00:10:15,440 --> 00:10:24,320
For example, the X data defines a new alpine component, and inside it we will add
curly braces and

117
00:10:24,320 --> 00:10:27,620
define that flash equals true.

118
00:10:27,980 --> 00:10:33,950
So this sets an initial value of the flash variable.

119
00:10:36,030 --> 00:10:41,810
And this will control whether our flash message should be visible or not.

120
00:10:41,820 --> 00:10:50,310
This is basically a variable that exists in the alpine context between those two
elements.

121
00:10:51,060 --> 00:10:58,260
So Alpine takes care of everything, so we don't need to worry about JavaScript
variables or anything

122
00:10:58,260 --> 00:10:58,920
else.

123
00:10:59,400 --> 00:11:04,200
Let's just think of it like that's a variable that Alpine is processing.

124
00:11:04,230 --> 00:11:13,050
It knows that it is initially true and it only is available in the context of this
div block.

125
00:11:13,740 --> 00:11:14,610
All right.
126
00:11:17,250 --> 00:11:27,300
So the next thing that we can do is we can add another directive called X show to
this div element.

127
00:11:27,600 --> 00:11:36,830
And this div element should be shown when our variable has the value of true.

128
00:11:36,840 --> 00:11:42,360
So it depends on this flash variable, which we know by default is true.

129
00:11:42,390 --> 00:11:46,020
So this shouldn't change anything initially.

130
00:11:46,920 --> 00:11:50,070
Let's see if everything works as expected.

131
00:11:50,070 --> 00:11:51,960
So nothing changes here.

132
00:11:56,200 --> 00:12:02,980
So those here are called directives and they only work if you have Alpine running.

133
00:12:02,980 --> 00:12:05,630
So that's not part of HTML.

134
00:12:06,860 --> 00:12:12,380
This is a thing that is being processed by this alpine library that we are using.

135
00:12:12,530 --> 00:12:13,010
All right.

136
00:12:13,040 --> 00:12:14,690
Now, the cool part.

137
00:12:15,020 --> 00:12:25,280
So if we have our span element and our SVG element, we can add another thing.

138
00:12:25,790 --> 00:12:28,250
This would be a click handler.

139
00:12:28,250 --> 00:12:37,760
So we will be adding an event listener that will listen to our click event on this
SVG element, our
140
00:12:37,760 --> 00:12:44,630
close button, and when it will be clicked, everything inside this attribute will
run.

141
00:12:44,780 --> 00:12:52,700
So we know that we have this flash variable inside the context of this component.

142
00:12:52,730 --> 00:12:55,010
We can set it to false.

143
00:12:56,600 --> 00:13:02,660
So this actually is JavaScript and let's see what's happening.

144
00:13:02,690 --> 00:13:08,160
Refresh this page, click on this SVG and the element disappears.

145
00:13:09,330 --> 00:13:11,160
So that was super simple.

146
00:13:11,160 --> 00:13:17,970
We just set the flash variable which exists in the context of this div element.

147
00:13:18,120 --> 00:13:22,110
This inside div is shown if the flash is true.

148
00:13:22,140 --> 00:13:29,940
It's always true by default and we add an event handler that basically sets it to
false.

149
00:13:30,280 --> 00:13:31,890
I'm not sure I have it here.

150
00:13:31,890 --> 00:13:33,180
Why I have it here.

151
00:13:33,270 --> 00:13:35,010
Shouldn't be here anyway.

152
00:13:35,250 --> 00:13:35,790
Yeah.

153
00:13:36,180 --> 00:13:43,920
If you add that here, this sets the flash the flash variable to false, which makes
this div element
154
00:13:43,920 --> 00:13:45,030
disappear.

155
00:13:45,540 --> 00:13:53,160
All right, so at this point we should uncomment this and replace.

156
00:13:54,190 --> 00:13:57,430
This message with the actual flash message.

157
00:13:57,430 --> 00:14:06,940
And also we need to uncomment that line and that line because this only needs to be
rendered if there

158
00:14:06,940 --> 00:14:09,100
is any flash message.

159
00:14:11,770 --> 00:14:14,200
So by default there is none.

160
00:14:14,200 --> 00:14:18,400
But I can go ahead and add a task.

161
00:14:19,400 --> 00:14:21,830
And then the flash message is displayed.

162
00:14:21,830 --> 00:14:26,750
And if I don't want to navigate to other page, I can just close it.

163
00:14:28,190 --> 00:14:28,880
All right.

164
00:14:28,970 --> 00:14:31,160
So you can read more about Alpine.

165
00:14:31,160 --> 00:14:32,420
I'll give you a link.

166
00:14:32,450 --> 00:14:37,740
It's really easy to learn and there is not really a lot to learn about that.

167
00:14:37,760 --> 00:14:48,560
It has some of those so-called directives, which really makes it very easy to add
some of the interactivity

168
00:14:48,560 --> 00:14:56,840
to your web pages without having to use the so-called vanilla JavaScript and the
plain Dom, which is

169
00:14:56,840 --> 00:15:03,470
typically pretty hard to do, and Alpine makes it much easier.