Text area over here and we can enter any text over here you can copy and paste a text from somewhere and paste it over here and then you can click on this button called count words and the number.
Of words inside the text will be displayed over here so let's type some text i'll just type this is a test and now here we can see we have four words in this text so let's click.
On count words and here we can see it says number of words is 4. so in this way you can copy and paste any text over here and it will count the number of words and if you.
Don't have any word it will display 0 over here and even if you have multiple spaces over here and if i just type something like this is a test.
And we can see that there are a lot of spaces over here and now if i click on count words we can see that we still have number of words displayed as four alright so let's get started.
Necessary files so let's click on new file and let's create an html file i'll just name it index.html and we'll also create a css file i'll just name it style.css.
And we also need to have a javascript file i'll just name it main.js all right let's start with the index.html file now in vs code you have this shortcut where you can just press.
Exclamation and press tab and you'll have this basic html5 code and let's link our css file over here so i'll just type link and here in the edge of i'll just type style.css.
And we'll also link our javascript file over here so i'll just type script colon src and press tab and here let's type main.js all right let's start by creating a.
Container division to hold everything so let's create a division with a class of word counter container and in that we will have an h2 for the heading so i'll just type word counter.
And then we need to have a text area so Wesdigital
I'll just type text area and for the text area we will have a class called words.And then after that we will have a button so i'll just create a button and i'll just give it a class of count button and here let's tab count words.
And then lastly we need to have a text to display the number of words so after this button i'll just create a division with a class of word count.
And here i'll just type number of words and i'll just create a span to hold this number so let's create a span over here and here i'll just type zero right now let's open this in our browser so i have.
This extension called live server installed in vs code so you can just search for live server and install it once you do that you can just right click over here in the html and click on.
Open with live server and now we can see that our design is displayed over here in the browser right now let's style this so let's go to style.css file and let's.
Start with the word counter container division so here let's type dot word counter container and i'll just set a padding of 16 pixels and i will set the phone family to.
Roboto and sensorif and let's set the text align to center right now let's tile this h2 so i'll just type word counter container h2.
And i'll set the font size to 42 pixels right now the next thing we will style is this text area so i'll just type word counter container text area or you can just add the class name over.
Here so if i go back to our html we can
See for the text area we have a class of words so you can just add that over here as well.Now i will set the display of this text area to block so that it will have its own line so here just type display of block and now we can see that the text area has its own line and then we have.
The button and then we have the number of words and i'll just set the width of the text area to 100 and i'll just set the height of the text area to 200 pixels.
And let's also set a border of two pixels solid and i'll just set the color to one four two one three d and we'll also have a border radius so just a border radius of 8 pixels.
And we'll also have some padding so i'll just have padding and we'll set the padding to 24 pixels and now here we can see that the text area has more width than expected that's.
Because of the padding that we added over here so for that we have to type a line of code which is box sizing and set it to border box now we can see we have the correct width.
So whenever you have a padding to any of the element it will add the padding to the width so if you don't want that to happen then you can add this line of code box sizing border box.
Right now let's set the font family to roboto and we'll also set the font size so this is the font size to.
16 pixels and we'll also disable the resize option over here so here we can see we can click and drag over here so we can resize the text area so we'll just.
Disable that so you just have resize and elicit to none and now we don't have the option of resizing now i'll set the max width of this text area to 800 pixels we'll also add some.
Line height so i'll just set the line height to 2 and i think that looks all right now if you increase the width of this text area we can see that we have the text area.
Aligned to the left so we will align it to the center so here let's type margin and i'll just set the margin to zero for top and bottom and auto for left and right.
And now we can see that the text area is in the center right now the next thing we will do is style this button so.
For the button we have a class of count button so let's type word counter container count btn and let's set a padding of 16 pixels top.
And bottom and 48 pixels left and right and we'll also set a margin of 32 pixels and let's set the font size of the button to.
16 pixels and i will also set the font weight to bold and let's set the cursor to pointer so that when we hold over this button.
We have this pointer and then we'll also set the background color to 14213d and we'll set the color of the.
Text to white and i will also remove the border so i'll just have border and i'll set it to none and we'll also add a border radius of 8.
Pixels right now we'll also add a hover effect so let's type word counter container count ptn colon hover and we will change the background color.
When we hover over this button so i'll just a background and i'll set the color to 0 0 1 2 one nine and let's also add a smooth transition.
So here i'll just tap transition and i'll set it to all 500 milliseconds is right now when you hover over this button we have this transition.
Right now let's style this text number of words so for that we have a division with the class of word count.
And for the number we have a span so here let's type word counter container word count and i listed the font size to 32 pixels.
And let's style the span so i'll just have word counter container word count span and for the span i'll just set the font size to 56 pixels and i'll also set.
The font weight to bald and we'll also center align this word count and also the span so for that let's set the display of this word count to flex.
And let's align items to the center and i'll also set justify content to the center and we'll also add some gap between these two elements so i'll just.
Type gap and i'll just set the gap to 16 pixels and i think that looks all right all right that's it with the css of our word counter now let's start with the.
Javascript now in the index.html file we have already linked our javascript file over here so let's go ahead and start with the javascript now in the javascript we need to reference some of.
The elements from this html file so we need to reference the text area because we need to get the text inside this text area and we also need to reference this button because when we click on this.