So, were you successful?
Let's do this together.
We want to make sure that we add this warning class here
to the input and to the remainingCharacter's span
if we have less than 10 remaining characters.
And with our newly gained knowledge,
that's not too difficult to do.
Here we can just write "if" inside of this function here,
I'm inside of this function, and here I'm writing "if".
Then you'll learned that we need parentheses
and then curly braces.
Now, the code that should eventually be executed
if the condition is met, goes between the curly braces,
but the condition goes between those brackets here.
And the condition here is that remainingCharacters
is smaller than 10 or is smaller and equal than 10.
So here we can refer to remainingCharacters,
which is the number inferred with this calculation
and then use the smaller or equal operator
and compare it to 10.
Now, we also see how we can derive such a boolean
without a hard-coded value
because, of course, remaining characters will be inferred
dynamically whenever this function executes
which happens on every keystroke
and remainingCharacters will be different
on every keystroke.
And only if it's smaller or equal to 10,
the code inside of this if block, as it's also called,
will be executed.
And in here, I want to add this warning class
and therefore, I can reach out to remainingCharsElement,
which is this span
and there use this classList object we learned about
to add this warning class.
And we don't just want to do that on that span here,
but also on the input.
So here on this productNameInputElement
here, I also want to reach out to classList
and add warning.
And with that, we can save this and now in index.html,
we just need to make sure that we again import demo.js,
so that we link to that script
and then if you save this as well and you go back,
you will notice that as soon as we go beneath 10 characters,
this turns orange here, this number,
and the background of the input field
because we have that warning class added here.
And also, of course, on that span.
Now at the moment, it never goes away
if we go above 10 again, because we have no logic for that,
but that's something we'll dive in next.
Here, however, we already see control structures in action
and we also see why we often need them.