How to Create a Word Counter - JavaScript Project For Beginners

hey how's it going guys my name is dom and today i'll be showing you how to create this word counter right here using html css and of course javascript okay so this project is going to be beginner friendly because it's going to be relatively straightforward to do and it's also going to give you a nice sense of achievement once you're done and you can also even expand upon it and make it more advanced alright so first i want to show you how it works before jumping into the actual code so right here i've got a old video description copied on my clipboard so i'm going to be pasting it inside here and as we can see upon pasting in the text on the bottom here we have a couple of different counts so we can see here i've got 42 words inside this body of text as well as 188 letters and 39 spaces okay so the way this works is basically we're going to be taking this body of text right here and then we're going to be splitting it up by spaces so basically we're going to get these groups of characters okay which may or may not be a word and for every single one of these groups of characters we're going to be running a couple of tests on them and basically if they pass all the tests then they're going to be considered to be a word and it's going to be adding 1 to this word count so that's how it's going to work now let's jump into this tab right here and begin from scratch to create what i just showed you and also keep in mind that the source code for this is going to be linked down below if you want to download it and follow along so hopping inside the text editor i've got this index html with nothing inside the body so basically we're starting fresh now the first step is going to be to create a new directory here for css as well as one for js or javascript and then we can create a new main.css inside the css directory and do the same thing for the javascript one a main.js okay perfect so now we can link up these two files in the index html by going inside the head here and we can drop down below the title we can just say a link towards a css file going to css then forward slash main dot css and then for the javascript we'll just be saying a script source going to js forward slash main.js and then it's very important that we include the defer attribute this right here just make sure that the javascript code is only going to run once the document is ready to be worked on it's going to avoid errors like can't access this on element null and things of that nature okay so make sure you include the defer attribute right there very important cool so now we can begin on the html before moving on to the css and the javascript so in terms of the html for this project we're going to begin by creating a new div with a class of container so this container right here is going to be the main container for the entire project dropping inside here we can make a new h2 with a class of title we can just say something like a word counter as the container's title dropping down below we can then create a text area and we can just remove all of the default attributes on here and just keep the class of text dash input just like that okay cool so now we can also include a placeholder text here and that's just going to say something like you know paste text here just something to prompt the user to of course you know paste their text okay we can now drop down and create a new div so we're going to be creating multiple of these divs here in fact three one for every single line of results so first up we've got the word count we can make a new strong here and we can just say something like word count with a space we can then drop down and make a new span here with a class of word dash count and then we can just default this sorry default this to be zero perfect right we can now create two more of these one for the letter counts make this also letter count inside the class and of course the number of spaces okay we can just say space count just like that also defaulting to zero for both of those so now if i save this and go back inside the browser we can see we get something like this so now let's apply some css to make this look like this okay so going inside the main.css file we're going to begin by targeting um the body right here so we're going to remove the default margin in the html in the browser okay so we can say a margin of 0 just like that we can also target the class of container and as well as everything inside the container including the text areas and any buttons if you wish to have any buttons okay we can make this a font family of sans serif just to change the default font now the reason for including an asterisk here to target every element inside the container is because of like i said the buttons and the actual text area itself you know those won't be affected unless i include the asterisk right there we can now target the class of container itself and for the container we can apply here a width of 400 pixels okay as well as a margin of 25 px and a padding of 25 px so the reason for you know the margin and padding here is just to create some white space make it look nice so if i save this and go back in the browser i'm gonna get something like this okay so moving on we can now just apply a border here of one pixel and then solid okay and then triple c just like that for a light gray as well as a border dash radius here of 5 pixels okay we can also just lastly apply a line height of 1.4 just to create some space between each one of our lines on the bottom go back in the browser and we get something like this okay so now we can hop back inside here we can target the class of text dash input so for the text area itself we're going to be applying a width of 100 percent this will ensure that the text area will take up the entire width that has available to it just like that okay we can also drop it down here we can create or we can specify a height of 225 pixels as well as a margin bottom here of 25 px so i want to try and keep this value here for all the spacing consistent across the board so i've used 25 up here and then of course down here we can also apply a resize of none to make sure the user cannot resize the text area by themselves as well as just dropping down here we can make a padding of 10px and if i save this actually go back in the browser we're going to get as we can see here we're getting a bit of overflow on the text area so it's taking up more space than it should be and there's a very small amount of you know padding between the text area and the containers bounds so to prevent this from happening we can include here a box sizing of border box this will ensure that essentially the padding right here will be included inside the inside the text input width okay back inside here and we can see it's looking not too bad so there's one more thing to style that's going to be the title i actually forgot about this earlier so let's scroll back up and just go between the container and the text input and we'll target the class of title and give this a margin top of zero and lastly a margin bottom of 25px once again maintaining that same gap across the board back in the browser and we get this right here so now we are done with the css we can now move on to of course the javascript okay so when it comes to the javascript the first step is going to be to head inside the main.js file and we're going to be defining the functions which test whether or not a group of characters is considered to be a word okay so inside here we can define two functions the first function here is going to be called at least uh two characters okay this right here is going to take through some text and like i've just mentioned earlier this text here is gonna just be a group of characters which may or may not be a word the point of this function here is to contribute to the testing of you know if this text is actually a word so we can make a second function here so the actual second test is going to check if there is an absence of three consecutive characters okay so i've done a bit of research and it appears that there's a good chance that if a word has more than or three or more consecutive characters of you know the same character then that is not going to be a word so you can add plenty of these functions here once we're done to increase you know how advanced this solution is but just for the sake of simplicity and this video i'm going to have two functions here so how do we then implement these functions well essentially they're going to return true or false if they return true then the test passed you know it's one step closer to being a word if they return false if even even one of these return false then it's not going to be a word and we scrap it okay so heading inside the at least two characters function let's define a new constant chord letters so this here is going to use regular expressions to grab every single letter inside this text so we're going to say text dot match then inside the match method on the string going to be defining or passing through a regular expression so we'll say forward slash then we'll use square brackets here and we'll say a to z okay then once again a forward slash and we can say i g so this here is just saying look do a global search so test all the characters inside this text and also make it case insensitive so maybe do a gi just to keep the global first it's probably more important so we'll say gi here same thing though then essentially we have an array of our letters so if i now console.log the results of letters here go back in the browser and i call the function at least two characters inside the developer console here f12 we can see if i pass in something like let's just do you know counter as an example press enter we get an array of seven characters here each letter inside the word counter also keep in mind that if i pass through an apostrophe then an s to say counters press enter we only get the s we do not get the apostrophe so that is what the a to z is checking there in the regular expression so now got this array let's get the length of this array and basically just return that so we can then say return letters dot length is more than or equal to two so if of course the length is more than or equal to two this is going to return true from this function if not it'll return false so that's how that's going to work now there's one catch with this design or you know solution that is that this match here could return now so if if the text doesn't contain any characters or any letters this is going to be null now you can't say null dot length that's not going to work you get an error so if this right here gives us null we'll say or then we can say empty array so basically if it returns null so if it returns null it'll then say okay cool no worries let's make it an empty array instead and you're going to get empty array length going to be 0 and you get false so that is that first function defined the second function is going to check of course the absence of three consecutive characters so for this one we can basically just loop through all of the characters inside the text so we'll say here for const character of text and then we can make a new constant here called occurrences so we're going to be checking for the number of occurrences of the particular character which you're looping over okay so here we'll say array dot from then we can pass through here the text so by default this text here is going to be a string okay so um a string does not have the ability to apply a filter on it okay so this will make more sense once i continue the rest of this line here basically the array or arrays have the ability to say okay i got the array in this case here it's going to be an array of every single character inside this text okay so we've got the array of characters inside the text here in fact you know what i will do i'll just console.log the occurrences constant here and we can see that we get in the browser if i call absence of three consecutive characters pass through something like my name dom we get essentially as i just sort of mentioned um we get an array of every single character inside the text okay so we've got the array we can now call the filter method on the array and we'll check so we'll say v and we can say v equals character so essentially the filter here is gonna then loop through every single character inside the text so d-o-m for my name it'll check if the d okay is equal to the current character if it is then it's gonna be part of this sort of result set then we can return or we can test or we can say get the length property on that so basically to put it simply we're just checking here look we've got the current character so for example we have d we're testing the d here okay we're then saying look let's see how many occurrences of d there is inside the main text we can now say essentially if the occurrences of the current letter is more than or equal to three then we can just simply return false it's gonna fail the test okay now if everything goes well and there is no you know consecutive three characters of any any of the letters here we can return true because of course by returning false up here it's going to exit out of the entire function and loop and give us false if it passes it's going to return true and that's that so we have both of our functions here defined which check you know or contribute to checking if a piece of text is going to be a word or not so now we've done the majority of the work we can now drop down minimize these two functions here and we can now define a couple more constants for a few things so the first here is going to be a constant chord checks and this here is going to be an array of both of our functions so we can then pass through here at least two characters and absence of three consecutive characters so as we can see i'm not actually i'm not calling these functions with the parentheses like this i'm just referencing them inside the array because down below once we're doing our checks and looping through all of the text in the text area we've got to say okay look let's look through both of these uh functions here and check if it's true or false so we'll get to this part later on but for now let's define those two checks right there and a second constant here called text input equal to document.queryselector just simply grabbing the element with the class of text dash input of course being our text area and make a few more query selector calls to the word counts elements and give this a class of of course word dash count just like that and we can also make one for the letter counts elements of course going to letter dash count and lastly of course the space count elements going to space dash count so now of course we can reference and hook onto our html elements inside the javascript code dropping down even further we can now do the main chunk of essentially hooking everything together so we can say text input dot ad event listener who add the event listener for input so we're going to be checking here whenever the user inputs a value inside the text area when they do input a value we're going to run this function inside here so this function here is going to firstly just split up all of the i guess groups of text inside the body of text so we'll say const splitted is equal to and then we can say text input dot value we'll then say uh dot trim here to remove white space on the left and right side of the string then we'll say split on a couple of characters so we're going to use regular expressions once again so forward slash then we'll say we're going to be splitting the string on white space so backslash s and also a dash in the case of words which have dashes inside of him okay ending the regular expression and also providing just a well that's it actually my mistake so we're just splitting on those characters right there so now if i was to console.log the splitted constant go back in the browser let's just test this thing out so i'll say something like let's do something like hey how's it going as we can see every input is going to run this function and we can see last one here we get hey house it's going so of course for groups of text or groups of characters inside this you know main body of text okay so as you probably can already imagine we're going to be passing each you know proposed word inside our functions to of course test it okay cool also of course guys these extra letter count and number of space that's they're just like extra you know result variables just to you know make it a bit a bit more you know what do you call it uh interesting should i say so anyway let's stop talking and go back in the code so we have our splitted array we can now create a new constant okay called letter count we'll just quickly count the letters inside you know the main body we can just say here text input dot value dot match we're going to be looking for here very similar to the above match in the at least two characters so we can pass through here regular expression we can just say a to z and also make this a g i then of course call the dot length on this so basically look for any characters that's going to be a to z case insensitive but of course guys remember this might be null so let's wrap everything here inside parentheses then just say or empty array for that null check and that's going to be our letter count very similar situation here for the space count so to check the spaces we're going to be saying inside here instead using uh backslash s then of course a plus here to check for essentially if you have multiple spaces in a row it's going to count as one space with that plus right there then of course nothing and then empty array so we could even exclude the i here because of course you can't get case insensitive spaces so now we've got letter count and space count okay we can now move on to the main part of course the word count so this right here is going to be a let's because we're going to be reassigning the value of this variable so word count is going to be defaulting to be zero okay so now we're going to drop down here and we're going to be looping over every single splitted uh group of words or group of characters and then running those tests against it so we can say here four of and we'll say four const text of the splitted array so for every single one of those groups of characters we can drop down we can now loop through our checks you know our functions right so we'll say for of and we can just say here check of checks so for every single check function we can now run that function so we'll say if if not check then pass in the text here so basically if one of these checks returns a false with the knot right there okay we can now essentially skip this entire splitted text now we're going to be skipping it because if i drop down here we can increment word count by one if we reach this point so if we loop through every single check for this particular group of characters and it all goes well then we can increase this by one the word count but of course inside here if it goes bad if one of those functions fails then we need to skip this entire group of characters so to achieve that we'll say continue okay skip to the next iteration problem is this continue is going to be continuing to the next check here then of course if that one passes or basically it's not going to work because it's always going to reach this point down here so we need to actually skip this loop and not this loop so how do we do that we're going to be using labels so right up here we can call this text loop with a colon so now we're just saying here look this outer loop or we can even use the word outer might be a bit simpler so we can say outer here okay so when i we can now just say continue outer to continue but on the outer array instead and skip this text so now word count is not going to be reached and it won't it won't be incremented okay cool so now dropping down here we can just say word counts elements dot text content equal to word count okay and do the exact same thing for the letter count element so we can just do letter oops letter just like this and of course lastly just space and this right here is of course by calling text content it's going to change the html of your word count let account and of course space count in the html of course referring to those spans so if i save this and go back in the browser and i do something like dom as we can see it's going to increment as we go hit the name we get three three letters and of course one word if i press space we get no increment oh yes we do actually my mistake um we of course have one space right there if i then say something like dom reads this text as we can see it is now working so that right there is how to create a word counter using html css and javascript like i said guys you can easily go inside here you can add some more checks more functions make it more advanced you know and i actually encourage you guys to do that for learning purposes but anyway you can expand upon it and uh yeah so that's it guys if you liked today's video drop a like and subscribe to the channel i really appreciate it and i'll see you guys in the next video

Channel: dcode

Views: 1,808

Keywords: beginner javascript projects, easy javascript projects, simple javascript projects, easy web development projects, projects for learning javascript, how to learn html css javascript, javascript word counter tutorial, javascript input field validation tutorial, html css project, easy html projects, easy html css projects, beginner html, html for beginners, javascript for beginners

Id: cRAHKgT-DUk

Length: 26min 17sec (1577 seconds)

Published: Mon Nov 29 2021