So let's switch to this demo project
and definitely also feel free to try it on your own first.
Definitely feel free to try it on your own first
with one important exception,
you should not try to implement this color changing behavior
because we're missing an important building block for that.
But try adding the input field, maybe even the styling,
and then also see if you can get
this character account feature to work
that you can calculate how many remaining characters we have
if the maximum number of characters is 60,
and then try updating this value after the input element.
Now, if you try this on your own, I have one important hint.
You will need to find out how many characters
the user already entered,
and you will be able to do this
by accessing the length property on the input value
you will have retrieved at some point.
So .length on that input value will give you the length,
the number of characters,
a user entered into an input field.
Definitely, try all of that on your own.
I'll give you a short pause to pause the video
and try it on your own
and then thereafter we'll implement this together.
So, let's now implement this together.
And for this, I'll first of all ad a new demo.js file,
which will contain the JavaScript code for this demo
and in index.html, I will use demo.js
instead of the old-app.js file.
Now let's maybe start with the html content for that.
And here I will also add some styling hands-on
and therefore, I will add a couple of extra elements here,
which I will use for applying my styles here.
Of course, there isn't a single right
or wrong approach to doing this.
So if you wrote some different HTML code
and it looks and works correctly, that's also fine.
But here, I'll start by adding a form.
Not because we'll do anything with it,
but because it kind of makes sense semantically
to put an input into a form, so that's well added here.
I don't add the action or method though,
because they don't really care about this right now.
Then in there, I'll add a little div
purely for styling purposes,
which will give a class of control.
A class, which I will use in my CSS code
then to apply some styling.
And inside of that div I'll add a label,
a label where I say Product Name,
because that's what we saw in this demo as well.
And I'll add an input of type="text,"
which I will also give an id="product-name"
and I'll connect that label to this input
as we learned it in the forms section
with the for attribute.
So that semantically, the two elements are connected
and screen readers, for example,
know which label belongs to which input.
And I'll give it a name attribute as well,
where I will also say "product-name."
Now that's almost it, I will add one last attribute here.
And that's the max length attribute.
We learned about these validation attributes
in the forms section as well.
And this allows us to limit the maximum amount of characters
that can be inserted into this input.
And I'll set this to 60 here.
Of course, it's up to you which length
you wanna choose here, but I'll go for 60.
With that, by the way, if I save this, I got this input here
and I can't type more than 60 characters.
If I try to do that, it just stops.
It doesn't allow me to enter more than 60.
But of course, that extra output,
which tells me the amount of remaining characters
is missing.
And that's why we wanna use JavaScript for that.
And speaking off that, after this input
still inside of this div, I will add a span here.
A span which then actually will contain another span.
And in this span here,
I would like to insert my remaining number of characters.
And hence, I'll give this span an id="remaining-chars,"
And I'll give that outer span an id="charcount"
because I'll use this for styling purposes later.
Now the content of this inner span
is currently empty, or let's say 60,
because at the beginning, if nothing was typed yet,
the remaining number of characters we can insert is 60
because that's our maxlength.
That's why I'm adding 60 here as well.
But then they're after outside of this span,
I'll also insert some plain text a slash and then 60
to kind of signal the maximum number of characters.
And this is not wrapped in a span
because I only need to span here for the first 60
so that I can later target this through JavaScript.
In order to get hold of that content here,
that text here, that 60 here, I wanna wrap it in an element,
which I can then easily select with JavaScript later
so that I then later can change the text content
of that element to update this remaining characters text.
The maximum number of characters will never be updated
because it will never change
and hence, I don't wrap this with my span here.
Now last but not least, outside of this div actually,
but instead of the forum,
I'll add a button with a text of submit,
but this button is only there to look good,
we're not going to do anything with it at this time.
Now this is my HTML content.
Now for the styling, I prepared a couple of styles
and to not bore you and waste your time,
you find these styles attached
as style.css file is attached.
And I did add here drag and drop it here into my project.
Now definitely feel free to browse through these styles here
and have a look at what I did here.
There shouldn't be too much new content in here.
These should all be CSS, rules and styles
you saw before basically.
I just have some basic styling here, some colors,
some spacing that showed leads to this output here
looking a bit better.
Now for these styles to have an effect,
we need to import them though.
And therefore here in my head section,
let's say between the title and the script,
though the exact position does not matter,
I will now also link to this styles.css file
saved as HTML file and then zoom out quite a bit here
to not break this layout like this
so that I can see my output here.
And that's now the HTML code and the CSS code
with which I'll continue.
Now, of course, we're all here for the JavaScript code,
not for the styling or the HTML code
and they'll for now, we will dive into demo.js
and start writing some code.
And for that let's recap what we wanna do.
We wanna listen to every keystroke here in this input field,
then we wanna count the number of characters,
and then once we did that,
we want to update this number here
with the remaining amount of characters.
So 60 minus the number of characters inserted here.
Therefore to get started,
I first of all wanna get access to the input field,
and then to this span where I wanna output
the updated number of remaining characters.
Now the input field could be selected by id
or by type with the curly selector
since it's the only input field.
And it's up to you, what you prefer,
I will select the by id
and get my let's say productNameInputElement,
a pretty long variable name.
You can definitely also use a shorter one,
but I wanna be descriptive about
which exact element I'm referring to here.
And then in this variable,
we can store the element which we get access to
by using document.getElementById
and then passing does ID name, product-name in my case
as a parameter value to this method.
Now, that will give us access to the input element.
Now to get access to the remaining chars here to this pan,
we can also again use this id
and hence I will add another variable here,
the remainingCharsElement
and get access with document.getElementById.
But now the ID is that ID I have here remaining-chars.
So that's what I insert here.
Now we've got these two elements.
Now on that input element here,
on that element, I wanna add an event listener
because I wanna listen to every keystroke.
Hence here we can use the product name, input element
and add an event listener as we learned it
with that addEventListener method.
Now the event I do wanna listen to here is the input event
because dad will occur for every keystroke.
And then that second parameter value
which we need to insert here,
that will actually be the function that should be executed
when that event occurs.
For this, we need to add this function
and the name could be updateRemainingCharacters
because that's what this function ultimately will do.
It will go to the dom
and update the remaining characters that are displayed.
Now, before I add the actual code
that will be executed in this function,
I already wanna finish this line of code
and therefore now point
at this update remaining characters function here
and let the browser know that this is the function
that should be executed whenever that input occurs.
Now in this function, we now need to find out
which value was inserted by the user.
So which text is currently in the input element
and then how long that is.
Now to get access to the entered value,
we got two main approaches.
We can use this variable and access the value property
or alternatively, we used the event object we learned about,
which also gives us access to the target of the event,
which is the same input element,
and we can use stats to access to value.
Both is absolutely fine.
Here, I will use the event object.
And therefore here, I'll get my enteredText,
or however you wanna name this variable
by reaching out to event.target.value
as we did it before.
Now, we need to find out how long that entered text is.
We need to find out how long it is
so that we can then compare it
to our maximum number of characters, which is 60.
And therefore I'll add my enteredTextLength variable,
let's say, which is my entered text.
And then I mentioned it in a little hint before,
we have the length property here.
Even though I'm not getting auto suggestion,
because my IDE doesn't fully understand
which type of value entered text will be,
but we know that it will be a string
and because of my hint, you know that on strings,
you can actually get access to the length of that string
width.length.
As a side note on an array, if you had an array value,
you also have to .length property
to find out how many items are in the array.
And when it comes to that,
a string is treated a bit like an array
because it's basically an array of characters,
you could say.
That's why we have to length property here.
With that, we know how long do you enter text is,
now we need to find out
how many remaining characters we have.
And that will of course be 60
minus the current length of the entered text.
So here maybe with an empty line in between
to improve readability, I'll add a new variable
which I will name remainingCharacters,
and that's 60 minus enteredTextLength.
Now, if you wanna get really fancy
and you definitely don't need to do that,
but if we wanna get really fancy, instead of using 60 here,
we could actually also extract the maximum amount
of allowed characters dynamically from that attribute,
which we set on input
so that we don't need to hard-code as it's called
the 60 here into our JavaScript code
and change it whenever we changed 60 here,
but that we instead extract the maxlength
from that input element
so that if we ever decide to change that allowed maxlength,
we only need to do it here and here,
but not also in the JavaScript code.
And a for that, we could add a new variable
also outside of do function.
It doesn't matter. We can do it outside,
we can do it inside.
I'll do it outside, which could be named maxAllowedChars.
And here we can reach out to the productNameInputElement,
which I selected here
and there we'll have a maxLength property.
I also don't get auto suggestion here,
but I know it because it's an input element object,
which we have access to.
And as always, you can console there your elements
to have a look at them in the browser dev tools
and see which properties are available.
And there, you would see
that we have such a maxLength property,
which holds the maximum amount of characters
that are allowed to be entered in this input element.
And with that, we can then use maxAllowedChars here,
this variable instead of 60 down there
to calculate our remaining characters.
I hope this makes sense.
Now, here we are performing a mathematical operation
and hence, this should give us a number in the end.
It should give us the number of remaining characters
that we have available.
And now as a very last step here in this function,
we now need to update this value
with our new remaining characters number.
And that value is the value in this span, this span here,
and we already got access to this span here.
So now we can reach out to remainingCharsElement
and then set the textContent off that element
to our remaining characters here, like that.
And that should be all we need for now.
If you save that and you make sure that demo.js
is linked to your index.html file,
then you should now be able to reload or to go back
and start typing here.
And as you see this number after the inputed field updates.
We don't have to change in color as we below 10,
that's something we'll add later,
but we get the basic functionality in place now.
And this applies basically everything we learned about
over the last hours
and we see now why we could use JavaScript
because dynamically updating something
which we see on the page and reacting to certain events
that are triggered by the user,
that is something we cannot do with just HTML and CSS,
and therefore we need JavaScript
to run our more complex logic, which we have here,
where we count the number of characters
compare that to our maxAllowedCharacters
and then update what we see on the screen.
That's why we use JavaScript,
and here we apply a lot of the concepts we learned about
over the last hours.