Original subtitles

So as mentioned We are going to

work on this project and therefore make sure

that you have the project set up as instructed

in the last course lecture.

We actually already have some styling in this project.

Certainly not the worst one.

I think it looks quite decent

but there are things we can do about this project

nonetheless.

For one we might want to change the way styles are applied

because at the moment we are using regular CSS

with regular CSS selectors, like this class selector.

And as I mentioned this style even

though we're importing it into the core skull list component

is not scoped to that component.

It would affect any element on the entire page

which has a goal list, CSS class.

So that's one thing we'll tackle, but we'll start

with something different with setting styles dynamically.

And a great example can be found

in the course input component.

There we are collecting some input by the user

and then we have the add goal button to,

well add a goal.

In the moment We can press that add goal button

even if we didn't enter anything.

And the result is that we add an empty element here.

Now in most applications, we probably want to avoid this

and we don't just want to avoid this.

We also want to give the user some feedback

about the incorrect input

and that's something we'll build now.

And that's something

for which we'll need to set styles dynamically.

So in course, input component

it's the form submit handler where,

in the end when a check, whether something valid was entered

before we triggered that on add goal function.

So that function we get on this on add goal prop

to be precise.

For this we can add a simple if statement here in the form

supplement handler and check if the entered value

if we trim it, trim is a built in method

that removes excess white space at the beginning or the end.

And I use it here to rule out that the user just

entered a bunch of blanks.

So if we trim this and we check the length

if the length is now equal to zero,

we know that the input is essentially empty.

In that case I want to return here.

Hence does line of code will not be executed

because functional execution stops when you return

and we're done.

But the problem now is now we made sure that we

can't add empty goals.

I'm hammering this button and it doesn't do anything.

This works however,

but even though we add this,

we don't give the user any feedback.

And that's exactly where we now need our styling.

I want to add a red border and a slightly red background

color to that input.

And also a red color to that label.

If the user entered something invalid here.

Now, how can we achieve this?

Well we can manage an extra piece state here

and that state could be an indicator for however

the user submitted and entered something valid or not.

So it's a true or false choice.

And therefor we'll be working with a boolean.

And initially let's say we trust the user.

So initially we set this to true

and all named as state is valid and the updating

function set is valid.

Now, as long as this is true, I considered the input

as valid.

If we make it into this if block though

I know it's invalid and therefore we can call set is valid

and set this to false

because what the user entered and submitted

definitely is not valid.

Now, if this is false,

I want to apply to styles and just said

and the easiest way of doing that is to add

the inline style here to the label for example

and as you learn you need to set an object there.

The inline style prop here wants an object as a value.

And in that object, you target different CSS style props

in JavaScript that you can set for this element

for this component.

So for example, here, the color property is available

and we could set this to red,

but of course we don't always want to set this to red,

but only if the input is invalid.

So I check if not is valid.

And if that's the case, I set this to red.

Otherwise I set this to black for example,

which is the default color.

And that will allow us to dynamically

set this to a red color.

We use the style prop.

We pass a object to it as demanded,

but we dynamically changed the value that's fed into

the color property in that style object.

And therefore now if we saved us and we go back

if I submit this without entering anything,

You see that label becomes red.

Currently we then never reset it,

but that's a first important step.

Now we need to also change the border

and background color off this input.

And that's definitely something you can try on your own.

Here's a short break which you can take

to pause the video thereafter we'll implement it together.

Were you successful?

Well adding it shouldn't be too hard.

We add the style, prop again,

passing an object because that's what it wants

and now we can set the border color.

And that's the only tricky thing.

It's border color written like this

because we're in JavaScript here,

not in a CSS file.

And therefore we need to use the JavaScript property name

for dead CSS property.

And that happens to be the camel case version

of the CSS property name,

hence border color written like this.

And I always want to set this to red if this is invalid.

So the value is exactly the same as up here.

And therefore of course we could

all the refactored this into a separate variable

for the moment since I only needed in these two places

I'll keep it like this.

And we also need

a background.

And here again, I check if this is invalid

in which case I color it a red, otherwise black.

Now this red might actually be a bit too much.

And therefore, maybe here we want to use something else.

I think Salmon should be good.

And that should not be black but transparent because

of course I don't want a black background in the input.

I want that transparent one.

With that we be saved this?

Now, if I click add goal, it's colored like this.

Now it's odds never reset at the moment

but at least we got the conditional styling.

And of course you can play around with

the exact color values too while get a different styling.

Now two notes,

For one of course we want to reset this eventually.

And second, I'm not 100% happy with that because

with this approach we currently have here

we always said inline styles,

which of course have to highest priority in CSS.

So you will override all our styles with that.

Now, actually I'm happy with the default styles

we set up in course input.

For example, for the input

I have a border color of this light grayish color here.

Now, needless to say we could set this up here as well.

I could reset us to this grayish color for example

instead of black, so that when we reset it

we go back to this predefined color we have in the CSS fall.

but still we have some duplication here.

We got a base color scheme here in the CSS file.

And then we override this with inline styles just

because we want to conditionally set some specific styles.

If the input is invalid.

And that's why I'm not 100% happy with those inline styles.

So let's now quickly work on the reset functionality.

Before I then show you an alternative

to setting dynamic styles with inline styles.

Now, to work on that reset functionality though

all we need to do is go to the place where we react

to every keystroke.

And then the end we just need to check if

events target value which is the entered text.

If that is now

basically

valid.

So if we trim it and get the length, if the length

is greater than zero,

if it is we know the input is valid

and then we could call set is valid and set is to true

again.

And here of course we need a dot.

And with that, if we go back, if I submit this.

This is red, but if I start typing

you'll see it's no longer invalid.

But if I submitted invalid forum

it of course still becomes red.

So that's working.

But as I mentioned for the reasons I mentioned

I'm not 100% happy with the inline styles

because they take a very high priority

and you can certainly always find ways of making it work.

But I personally would prefer to not set inline styles.

So let's have a look at an alternative.