Now this demo on which we work here, is generally working.
The character account here is updating.
But,
if you compare this to the demo I showed you earlier
in this course,
where I showed you what we would be building,
then you see that one important feature is missing here.
As I type more and more characters,
if we go below 10 remaining characters,
in the demo I showed you, the color here that changed
and the background color of the input field changed.
And that's not happening here.
Now we need two additional building blocks
to make this work.
The first building block is that we need to learn
how we can manipulate our DOM elements
such that they do change color.
So, how we can change the styling of DOM elements
with JavaScript.
And, then in a second step,
we will need to find out how to do that conditionally.
And let's start with the first step.
Let's learn how we can change the color of DOM elements.
And for this, I'll actually stay on this page here,
and open my developer tools.
Because we learned that, here in these tools,
we can also execute some JavaScript code.
Here, we can also run simple snippets.
And I can, for example,
use the document object to also select an element here.
And, we can even store that selected element in a constant
or a variable then.
And I'll do that so that we can play around with it here.
And let's say, I want to start with this span here.
But for that, keep in mind,
if I select it, that this has an ID of remaining chars.
So, in this console here,
I'll get my span element
by writing document,
get element by ID.
And then the ID I'm looking for here, is remaining chars.
Like this.
If I now hit enter,
this span element,
is this span. Which I selected here.
We can, by the way, log something here in this console,
by just typing the variable name.
This will not work in your Avro JavaScript code.
There, if you just type a variable name,
this will not log it to the console.
But, here in this console of the developer tools,
that is what will happen.
So, here we can log something like that.
So, if I got my span element here
and I did recreate this constant here,
because this page reloaded,
because I changed my JavaScript code,
then we can use this span element to do things with it.
And for example,
we did learn that we can set the text content
to some new texts, like 59, for example, like this.
Now, this updated here on the page.
But, we can also not just change the text content.
But, as we saw it before
at the example of the anchor element,
we can also change other properties of our DOM elements.
For example, on the anchor,
we changed the age ref property
to change to target destination.
And, on basically all HTML elements,
we can access a style property,
which allows us to
change the styling of that element or to set styles
as we would set them with the style attribute in HTML.
So, here I can access style.
And then, what's stored in this style property
of a DOM element is actually a nested object
with more properties.
Hence, we can add another dot here
to dive into those nested properties.
And what we find here, are now basically equivalence
to the different CSS properties we learned about.
For example, there is a text align property.
And, of course, there is a text align CSS property.
The main difference, which is important to note though,
is that they are written differently.
In CSS, we would have text dash align, all lower case.
In JavaScript, the equivalent is the same word
or a combination of words, but without a dash.
Instead, using this camel case notation,
which we learned is the main convention
for naming things in JavaScript.
And this convention is used here
because dashes are not allowed
in variable or property names.
So, text dash align would be invalid JavaScript code.
And that's why it's named text align, written like this.
But, the interesting thing is,
that we can set this to the same values we can assign
to the CSS property text align.
So, here we could use center or left,
as a string though.
In CSS, it would just be center or left as keywords,
but that's because CSS has a different programming language.
In JavaScript,
if you would just write left or center like that,
JavaScript would look for variables
or built in Coleman's, functions with such names.
That's why we need to turn this into a string instead.
Now, text align, actually is a property
which wouldn't have a real effect on this span.
And therefore, let's use a different property.
And let's maybe use color.
Which we can use to set the color.
We can set color to any value that would be expected in CSS,
again, with the limitation that it should be a string.
So here, for example,
we could set it to red or to a hex code or to RGB,
and then maybe zero, 120, 50.
And, if I now hit enter,
this changed to a green, to a greenish color.
And if I inspect this span again,
indeed we see that this style attribute was added now,
and that it has this style set.
And that's what we can do with JavaScript as well.
We can also change the style attribute
and then the different CSS properties
that can be changed, like color, like text align,
like background color, and so on.
And as solved, feel free to play around with it.
Just keep in mind, that it's this camel case notation
and that your values should be strings.
So, for example, if we want to change the font size,
we could simply write 30 pixels, like this, as a string.
And then this would get bigger.
Now, that's one way of changing the styling.
And of course, since I'm just doing this here
in this console in the dev tools,
whenever I reload the page, all these changes are gone.
If we would write it in this JavaScript code here,
of course, they would persist
since it would be updated on the running page,
by the code that is part of this page.
But now we covered this,
there is another way of changing the styling,
or the look of our elements.