Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,090 --> 00:00:03,780
So as mentioned We are going to
2
00:00:03,780 --> 00:00:06,750
work on this project and therefore make sure
3
00:00:06,750 --> 00:00:09,510
that you have the project set up as instructed
4
00:00:09,510 --> 00:00:11,650
in the last course lecture.
5
00:00:11,650 --> 00:00:14,690
We actually already have some styling in this project.
6
00:00:14,690 --> 00:00:16,110
Certainly not the worst one.
7
00:00:16,110 --> 00:00:18,100
I think it looks quite decent
8
00:00:18,100 --> 00:00:21,160
but there are things we can do about this project
9
00:00:21,160 --> 00:00:22,550
nonetheless.
10
00:00:22,550 --> 00:00:26,430
For one we might want to change the way styles are applied
11
00:00:26,430 --> 00:00:29,640
because at the moment we are using regular CSS
12
00:00:29,640 --> 00:00:34,070
with regular CSS selectors, like this class selector.
13
00:00:34,070 --> 00:00:36,570
And as I mentioned this style even
14
00:00:36,570 --> 00:00:39,500
though we're importing it into the core skull list component
15
00:00:39,500 --> 00:00:41,800
is not scoped to that component.
16
00:00:41,800 --> 00:00:45,220
It would affect any element on the entire page
17
00:00:45,220 --> 00:00:48,620
which has a goal list, CSS class.
18
00:00:48,620 --> 00:00:51,490
So that's one thing we'll tackle, but we'll start
19
00:00:51,490 --> 00:00:55,450
with something different with setting styles dynamically.
20
00:00:55,450 --> 00:00:57,620
And a great example can be found
21
00:00:57,620 --> 00:01:00,140
in the course input component.
22
00:01:00,140 --> 00:01:03,260
There we are collecting some input by the user
23
00:01:03,260 --> 00:01:05,620
and then we have the add goal button to,
24
00:01:05,620 --> 00:01:07,310
well add a goal.
25
00:01:07,310 --> 00:01:10,030
In the moment We can press that add goal button
26
00:01:10,030 --> 00:01:11,780
even if we didn't enter anything.
27
00:01:11,780 --> 00:01:15,290
And the result is that we add an empty element here.
28
00:01:15,290 --> 00:01:19,280
Now in most applications, we probably want to avoid this
29
00:01:19,280 --> 00:01:20,770
and we don't just want to avoid this.
30
00:01:20,770 --> 00:01:23,450
We also want to give the user some feedback
31
00:01:23,450 --> 00:01:25,680
about the incorrect input
32
00:01:25,680 --> 00:01:27,430
and that's something we'll build now.
33
00:01:27,430 --> 00:01:28,290
And that's something
34
00:01:28,290 --> 00:01:31,570
for which we'll need to set styles dynamically.
35
00:01:31,570 --> 00:01:33,100
So in course, input component
36
00:01:33,100 --> 00:01:35,700
it's the form submit handler where,
37
00:01:35,700 --> 00:01:39,670
in the end when a check, whether something valid was entered
38
00:01:39,670 --> 00:01:42,780
before we triggered that on add goal function.
39
00:01:42,780 --> 00:01:45,550
So that function we get on this on add goal prop
40
00:01:45,550 --> 00:01:46,573
to be precise.
41
00:01:47,480 --> 00:01:49,733
For this we can add a simple if statement here in the form
42
00:01:49,733 --> 00:01:53,630
supplement handler and check if the entered value
43
00:01:53,630 --> 00:01:56,660
if we trim it, trim is a built in method
44
00:01:56,660 --> 00:02:00,120
that removes excess white space at the beginning or the end.
45
00:02:00,120 --> 00:02:03,040
And I use it here to rule out that the user just
46
00:02:03,040 --> 00:02:04,493
entered a bunch of blanks.
47
00:02:05,400 --> 00:02:07,970
So if we trim this and we check the length
48
00:02:07,970 --> 00:02:10,223
if the length is now equal to zero,
49
00:02:10,223 --> 00:02:13,720
we know that the input is essentially empty.
50
00:02:13,720 --> 00:02:15,840
In that case I want to return here.
51
00:02:15,840 --> 00:02:18,220
Hence does line of code will not be executed
52
00:02:18,220 --> 00:02:21,110
because functional execution stops when you return
53
00:02:22,100 --> 00:02:23,160
and we're done.
54
00:02:23,160 --> 00:02:25,761
But the problem now is now we made sure that we
55
00:02:25,761 --> 00:02:28,140
can't add empty goals.
56
00:02:28,140 --> 00:02:31,210
I'm hammering this button and it doesn't do anything.
57
00:02:31,210 --> 00:02:33,590
This works however,
58
00:02:33,590 --> 00:02:36,240
but even though we add this,
59
00:02:36,240 --> 00:02:38,900
we don't give the user any feedback.
60
00:02:38,900 --> 00:02:41,540
And that's exactly where we now need our styling.
61
00:02:41,540 --> 00:02:46,370
I want to add a red border and a slightly red background
62
00:02:46,370 --> 00:02:48,030
color to that input.
63
00:02:48,030 --> 00:02:50,650
And also a red color to that label.
64
00:02:50,650 --> 00:02:54,000
If the user entered something invalid here.
65
00:02:54,000 --> 00:02:55,703
Now, how can we achieve this?
66
00:02:56,890 --> 00:02:59,970
Well we can manage an extra piece state here
67
00:03:01,160 --> 00:03:04,920
and that state could be an indicator for however
68
00:03:04,920 --> 00:03:08,940
the user submitted and entered something valid or not.
69
00:03:08,940 --> 00:03:11,000
So it's a true or false choice.
70
00:03:11,000 --> 00:03:13,270
And therefor we'll be working with a boolean.
71
00:03:13,270 --> 00:03:16,220
And initially let's say we trust the user.
72
00:03:16,220 --> 00:03:18,670
So initially we set this to true
73
00:03:18,670 --> 00:03:22,750
and all named as state is valid and the updating
74
00:03:22,750 --> 00:03:24,523
function set is valid.
75
00:03:25,580 --> 00:03:28,450
Now, as long as this is true, I considered the input
76
00:03:28,450 --> 00:03:29,940
as valid.
77
00:03:29,940 --> 00:03:31,850
If we make it into this if block though
78
00:03:31,850 --> 00:03:34,950
I know it's invalid and therefore we can call set is valid
79
00:03:34,950 --> 00:03:36,680
and set this to false
80
00:03:36,680 --> 00:03:38,940
because what the user entered and submitted
81
00:03:38,940 --> 00:03:40,563
definitely is not valid.
82
00:03:41,600 --> 00:03:43,300
Now, if this is false,
83
00:03:43,300 --> 00:03:45,720
I want to apply to styles and just said
84
00:03:45,720 --> 00:03:48,710
and the easiest way of doing that is to add
85
00:03:48,710 --> 00:03:52,040
the inline style here to the label for example
86
00:03:52,040 --> 00:03:55,000
and as you learn you need to set an object there.
87
00:03:55,000 --> 00:03:59,070
The inline style prop here wants an object as a value.
88
00:03:59,070 --> 00:04:03,460
And in that object, you target different CSS style props
89
00:04:03,460 --> 00:04:06,100
in JavaScript that you can set for this element
90
00:04:06,100 --> 00:04:08,600
for this component.
91
00:04:08,600 --> 00:04:11,870
So for example, here, the color property is available
92
00:04:11,870 --> 00:04:13,840
and we could set this to red,
93
00:04:13,840 --> 00:04:15,930
but of course we don't always want to set this to red,
94
00:04:15,930 --> 00:04:18,089
but only if the input is invalid.
95
00:04:18,089 --> 00:04:21,029
So I check if not is valid.
96
00:04:21,029 --> 00:04:24,090
And if that's the case, I set this to red.
97
00:04:24,090 --> 00:04:26,930
Otherwise I set this to black for example,
98
00:04:26,930 --> 00:04:28,280
which is the default color.
99
00:04:29,250 --> 00:04:31,240
And that will allow us to dynamically
100
00:04:31,240 --> 00:04:33,670
set this to a red color.
101
00:04:33,670 --> 00:04:35,130
We use the style prop.
102
00:04:35,130 --> 00:04:37,870
We pass a object to it as demanded,
103
00:04:37,870 --> 00:04:40,470
but we dynamically changed the value that's fed into
104
00:04:40,470 --> 00:04:44,200
the color property in that style object.
105
00:04:44,200 --> 00:04:47,120
And therefore now if we saved us and we go back
106
00:04:47,120 --> 00:04:50,290
if I submit this without entering anything,
107
00:04:50,290 --> 00:04:53,340
You see that label becomes red.
108
00:04:53,340 --> 00:04:55,380
Currently we then never reset it,
109
00:04:55,380 --> 00:04:57,453
but that's a first important step.
110
00:04:58,370 --> 00:05:00,560
Now we need to also change the border
111
00:05:00,560 --> 00:05:02,830
and background color off this input.
112
00:05:02,830 --> 00:05:05,450
And that's definitely something you can try on your own.
113
00:05:05,450 --> 00:05:07,350
Here's a short break which you can take
114
00:05:07,350 --> 00:05:10,253
to pause the video thereafter we'll implement it together.
115
00:05:12,570 --> 00:05:14,130
Were you successful?
116
00:05:14,130 --> 00:05:16,720
Well adding it shouldn't be too hard.
117
00:05:16,720 --> 00:05:19,300
We add the style, prop again,
118
00:05:19,300 --> 00:05:22,110
passing an object because that's what it wants
119
00:05:22,110 --> 00:05:24,200
and now we can set the border color.
120
00:05:24,200 --> 00:05:25,550
And that's the only tricky thing.
121
00:05:25,550 --> 00:05:28,620
It's border color written like this
122
00:05:28,620 --> 00:05:30,350
because we're in JavaScript here,
123
00:05:30,350 --> 00:05:31,840
not in a CSS file.
124
00:05:31,840 --> 00:05:34,570
And therefore we need to use the JavaScript property name
125
00:05:34,570 --> 00:05:36,000
for dead CSS property.
126
00:05:36,000 --> 00:05:38,270
And that happens to be the camel case version
127
00:05:38,270 --> 00:05:40,060
of the CSS property name,
128
00:05:40,060 --> 00:05:42,410
hence border color written like this.
129
00:05:42,410 --> 00:05:46,480
And I always want to set this to red if this is invalid.
130
00:05:46,480 --> 00:05:49,283
So the value is exactly the same as up here.
131
00:05:50,330 --> 00:05:51,640
And therefore of course we could
132
00:05:51,640 --> 00:05:54,470
all the refactored this into a separate variable
133
00:05:54,470 --> 00:05:57,180
for the moment since I only needed in these two places
134
00:05:57,180 --> 00:05:58,333
I'll keep it like this.
135
00:05:59,500 --> 00:06:01,520
And we also need
136
00:06:02,710 --> 00:06:04,550
a background.
137
00:06:04,550 --> 00:06:07,720
And here again, I check if this is invalid
138
00:06:07,720 --> 00:06:10,780
in which case I color it a red, otherwise black.
139
00:06:10,780 --> 00:06:13,650
Now this red might actually be a bit too much.
140
00:06:13,650 --> 00:06:17,000
And therefore, maybe here we want to use something else.
141
00:06:17,000 --> 00:06:19,890
I think Salmon should be good.
142
00:06:19,890 --> 00:06:22,730
And that should not be black but transparent because
143
00:06:22,730 --> 00:06:25,350
of course I don't want a black background in the input.
144
00:06:25,350 --> 00:06:26,750
I want that transparent one.
145
00:06:27,900 --> 00:06:29,600
With that we be saved this?
146
00:06:29,600 --> 00:06:32,673
Now, if I click add goal, it's colored like this.
147
00:06:33,550 --> 00:06:35,970
Now it's odds never reset at the moment
148
00:06:35,970 --> 00:06:38,160
but at least we got the conditional styling.
149
00:06:38,160 --> 00:06:39,610
And of course you can play around with
150
00:06:39,610 --> 00:06:43,750
the exact color values too while get a different styling.
151
00:06:43,750 --> 00:06:45,470
Now two notes,
152
00:06:45,470 --> 00:06:48,450
For one of course we want to reset this eventually.
153
00:06:48,450 --> 00:06:52,280
And second, I'm not 100% happy with that because
154
00:06:52,280 --> 00:06:54,830
with this approach we currently have here
155
00:06:54,830 --> 00:06:56,820
we always said inline styles,
156
00:06:56,820 --> 00:06:59,930
which of course have to highest priority in CSS.
157
00:06:59,930 --> 00:07:02,583
So you will override all our styles with that.
158
00:07:03,590 --> 00:07:05,630
Now, actually I'm happy with the default styles
159
00:07:05,630 --> 00:07:07,130
we set up in course input.
160
00:07:07,130 --> 00:07:08,280
For example, for the input
161
00:07:08,280 --> 00:07:12,070
I have a border color of this light grayish color here.
162
00:07:12,070 --> 00:07:14,640
Now, needless to say we could set this up here as well.
163
00:07:14,640 --> 00:07:17,130
I could reset us to this grayish color for example
164
00:07:17,130 --> 00:07:19,540
instead of black, so that when we reset it
165
00:07:19,540 --> 00:07:23,890
we go back to this predefined color we have in the CSS fall.
166
00:07:23,890 --> 00:07:26,580
but still we have some duplication here.
167
00:07:26,580 --> 00:07:30,687
We got a base color scheme here in the CSS file.
168
00:07:30,687 --> 00:07:33,640
And then we override this with inline styles just
169
00:07:33,640 --> 00:07:37,490
because we want to conditionally set some specific styles.
170
00:07:37,490 --> 00:07:39,120
If the input is invalid.
171
00:07:39,120 --> 00:07:44,070
And that's why I'm not 100% happy with those inline styles.
172
00:07:44,070 --> 00:07:47,200
So let's now quickly work on the reset functionality.
173
00:07:47,200 --> 00:07:49,700
Before I then show you an alternative
174
00:07:49,700 --> 00:07:52,940
to setting dynamic styles with inline styles.
175
00:07:52,940 --> 00:07:55,470
Now, to work on that reset functionality though
176
00:07:55,470 --> 00:07:59,390
all we need to do is go to the place where we react
177
00:07:59,390 --> 00:08:01,390
to every keystroke.
178
00:08:01,390 --> 00:08:02,970
And then the end we just need to check if
179
00:08:02,970 --> 00:08:07,060
events target value which is the entered text.
180
00:08:07,060 --> 00:08:08,720
If that is now
181
00:08:08,720 --> 00:08:09,930
basically
182
00:08:09,930 --> 00:08:10,763
valid.
183
00:08:10,763 --> 00:08:14,530
So if we trim it and get the length, if the length
184
00:08:14,530 --> 00:08:16,360
is greater than zero,
185
00:08:16,360 --> 00:08:18,670
if it is we know the input is valid
186
00:08:18,670 --> 00:08:21,930
and then we could call set is valid and set is to true
187
00:08:21,930 --> 00:08:22,763
again.
188
00:08:24,000 --> 00:08:25,893
And here of course we need a dot.
189
00:08:26,760 --> 00:08:29,500
And with that, if we go back, if I submit this.
190
00:08:29,500 --> 00:08:31,870
This is red, but if I start typing
191
00:08:31,870 --> 00:08:34,520
you'll see it's no longer invalid.
192
00:08:34,520 --> 00:08:36,520
But if I submitted invalid forum
193
00:08:36,520 --> 00:08:38,960
it of course still becomes red.
194
00:08:38,960 --> 00:08:39,793
So that's working.
195
00:08:39,793 --> 00:08:42,169
But as I mentioned for the reasons I mentioned
196
00:08:42,169 --> 00:08:45,110
I'm not 100% happy with the inline styles
197
00:08:45,110 --> 00:08:48,160
because they take a very high priority
198
00:08:48,160 --> 00:08:51,310
and you can certainly always find ways of making it work.
199
00:08:51,310 --> 00:08:54,970
But I personally would prefer to not set inline styles.
200
00:08:54,970 --> 00:08:56,920
So let's have a look at an alternative.
15699
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.