Live-code a word count app with us | JavaScript, HTML, CSS

we had an error yeah it wouldn't connect we thought it might be a repeat of monday that fiasco yeah when facebook was down apparently stream yard uses uh facebook on the back end somehow oh really so yeah we couldn't get on so i tried to do it on youtube's own streaming software well that was a no go because you can't share your screen so then we have to move to zoom so yeah wow who's here this person i don't know how to say that sounds miracle me i think it looks like russian but anyway they say hi they said hi quite a while ago so i don't know if they're still here they've been waiting since 10 past 11. hi kate at the mall richard richard chiamanna who i think has done challenge that's the one yes tom who has been working hard on our github repo for hacktoberfest hello that's good um valentino hey hello orderty hey hello to you yes what else has happened everyone who's here in the chat describe your week in one word ah yes thank you i knew that was something i hadn't done just tell people on discord we're here oh yes hello from sweden yes describe your week in one word be interesting to see how you're getting on describe your week in one word michael long long no no it's too short if anything next one thankfully it's gonna be even longer yeah that's for sure anyway never mind yeah yes my week in a word um manic i would say extremely manic decided on sunday to join michael on his trip to ukraine tomorrow spend the rest of the week panicking about what to do with the cat hopefully have resolved it why no back end courses they're on the way hopefully at the start of next year first we must build some amazing technology yes oh hello nasa oh hello roman roman from linkedin and lotto from linkedin uh some people from linkedin andrei's week was verbose or maybe he's saying i'm verbose either way yes hello hello from sweden i think we're ready okay hi thanks for the stream yes hello abdulrahman has put a tiger in the chat ah first one yes if you're wondering what that's about it's because we do a thing here if you've been before put a tiger in the chat and if you're new here hit me with that bunny rabbit oh look at that i just noticed i've gotta type on the t-shirts oh yeah well it's actually a jaguar but it could be a panther anyway any kind of accident big catty thing yeah why are we out of focus okay we need to lean in slightly yeah i'm all right with being out of focus yeah i know what you mean alex was like get his camera they'll see you in high definition and i'm like i don't want that i'm not sure i want that alex honestly but here we are yes lots of um hellos oh tom started the typescript course that went live yesterday nice hello from india and yes lots of tigers in the chat lots of tigers and some honey rabbits coming in welcome to all the banana rabbits and welcome back to all the tigers indeed yeah totally so we're gonna get on with it michael yeah yeah first i better open it so so what's the what's the actual thing we're doing today what we're doing today i never know well i mean really sometimes i do though but normally i don't for those of you who don't know we are from scrimba oh yeah to all the bunnies yes um this is a place you can come to learn to code and there are plenty of courses our newest one is this learn typescript for free that went live yesterday all right so now we have javascript for free and timescreen for free we do yeah because javascript for free yeah for free and lots of things for free yes and we have the weekly web dev challenge where you basically solve a challenge yeah uh web dev not everybody's let's not go into that and this week's one is this word count and uh yeah on fridays michael and i have a crack at solving it uh oh my word can you believe this has happened i didn't move my dog oh no yeah i know this is like an eternal infuriation of mine thing people out there if you know how to stop your stupid doc going on to another screen let me know how to do it um yes so that's what we're doing michael a word count but don't worry about it i've made a plan of what we're gonna do have you this is similar to the one last week yes it's like do the thing it is similar to the one last week cool oh it's actually wrong you can see i actually use the same note word count the words yeah count the characters show longest word yeah so just to reiterate the normal the normal format of this is like we're not really showing you how how to do it it's more like we how not to do it can i solve our own challenge that we said for other people and what would you would you get if you win well always forget yeah well that's the other thing if you tweet your solution with the weekly web dev challenge it gets put on here and already there have been 23 since we launched it on monday which is good look at that and then we have a vote when the challenge finishes and you can win swag and a free subscription and we choose one at random so yeah two chances to win cool usually when i'm making this i write the whole code but i was really pushed for time this monday because of everything with hacktoberfest so i haven't actually ever written the whole code to do this i see yeah but enough people have done it so hopefully they yeah we know it's possible so basically we're solving our own challenge and uh yeah well normally it's like i i never know what we're doing so it's a news to me so at least you kind of have a look at like where's done yeah oh wow nice so yeah normally we just basically tried to solve this and uh see how we get on so and obviously any help welcome definitely one thing to note about this yeah is when i was coding this i originally put in input with the type of text for this and then i wanted to make it big and it wasn't working um and then i found out that if you want to have a place to input text that's bigger than one line you should use text area and not text and not input with a type of text so that's what this is it's a text area um nice yes i thought so too so i suppose we better start by grabbing the text area yeah yeah so what's what what's the actual um purpose of this count words count characters show longest word okay i see so you have a text area and you need to write some javascript to do that oh boy that's interesting const text aries okay yeah yeah and then text area dot add event listener so you need to wire up yeah is it oh yeah yeah and that's going to run a function called count so the input event listener what that does is it runs every time something happens in here basically yeah not really sure how it differs from oh no i am sure actually um it's different from key up or key down because um you can also copy and paste it and it will still run that's how it's different oh i see how it's different from key up and key down right got it so don't look wait oh it can't read the id or oh because it's text i don't actually like that i'm going to do this i copied this from stack overflow text area i'll probably change well what does the name attribute on the text area dude um name attribute in html4 is used to handle input value after a form submission can also be used to run to reference an element in javascript it's basically the same as the id but i think it's there for some kind of accessibility reason mainly i see well fair enough let's uh have a look at the next one wow yeah whoo that's new um hello devs how are you guys doing yes so what do we have today why count up yes well hopefully yeah it looks like it yeah maybe there's an extra challenge you can show the three most common words ah yeah so now you just need to worry about new id text area text oops oh yeah yeah okay so now whenever we do this that works and then also when we copy and paste yay okay wow um right so i think the easiest one is to count characters d yeah how are you going to approach that then oh you basically take all of the text from the text field then strip the empty space and do a dot length on it and that should give you the length of a string so basically you take all of the words remove the spaces between them or tabs or whatever yeah and then if you click dot length on that string that'll give you sounds good how many cast text equals text area up how is it uh asked value not node value it's never known for you i mean sometimes it might be well not in my experience hey now hang on i'll just copy this console.log text actually this i do want down there don't i where so i can see that it's actually doing something yep no it is not no because you need to see that in here no uh oh it's who you mean um yes yeah okay okay so now if we console.log text dot length yes yeah yeah but the problem is that if you do space you still get the thing up okay that's what we're gonna do next isn't it yeah so now you just need to strip the empty spaces um i would just google there should be a built-in method to do that like remove empty space or something javascript not late remove empty oh isn't that like trim or something yeah but well the trim i think removes it from the end or from the started but not elements oh man oh no is that a regex right uh remove all white space from text let's give it a go uh you have to tell replace to repeat the regex can you do it without a regex because that would be ideal what are you using says flavio to show the attribute name in google background yeah this is um a browser extension called greppa here it is i've actually made a video about it i just need to edit it and then i will upload it sharing this book on my youtube channel it will be here in a couple of weeks yeah it's a really good um browser extension for doing exactly this yeah pretty neat empty space is a character in twitter land yeah exactly area dot value split length okay i reckon we should give that okay um well no because if you say split and then one space that will uh it might work but i think um can you just go back to google while we're there uh and then just have a look at trim might actually no trim won't do it trim will only trim the left pad and the right pad uh so we might have to i think we should do what there said i think there is over here yeah if you select this solution on the screen i think that's roughly what we need so like you have a split um you split all of them and then you filter and you went back again what i mean i'm gonna do what flex emphasis so hang on i think remember that reading five minutes of docs save you two minutes debugging text oh no text yeah because i've said that there don't split i'm not gonna listen yep not length i think this will work i mean let's just wire up that to the word count let's just update update the value so we don't have to do with console.log what what do you mean there's the ah sorry there's a field for word count let's just create another one that says like character count and then just update that field there gonna be regex isn't it no please god no i d count okay i mean look like if it has to be regex we'll do it yeah count so then this character and there's what yeah oh why is it got such a massive space for growing out loud css well yeah i guess so okay so now grabbing this uh what they're called account character count and word count i will save both of them while we're here okay so now character count dot value equals this is it text content or something yes wait wait wait wait but only runs once it's working on the spacebar so this is doing the opposite of what we want it's only counting the spaces but why did it count the first one because you split on the empty space so if you if you remove that split what you mean just so remove the split and the brackets okay and just say that and look it okay so it runs on everyone yeah it runs on every character but when you say split empty space that splits it into two things why are we doing this though why don't we just do it if then you have to like figure out each character yeah so you don't want to you don't want to count empty characters so if you say split on the empty space then you will have two things and when you have basically what happens let me pump if we just cancel out that that would be easier to see what you just told me not to cancel that uh well no not for this one let's console log this one you know it's like it's different so anyway regex is the only solution i feel is scalable says so so all other solutions would have edge cases so when you you have split you see when i type now it says two i split again it says three when i remove the length it will it should show you the array um why is it still the ramen says we can't run away from right here ah there we go so here's the string is represented as an array when you split and when you press space here's another string so it really gives you uh it gives you a length of how many strings you have and actually we can probably we kind of accidentally we have counted how many words we actually have okay well i mean it does work like you know like i don't know about the build it that's three like and if you for example it make it with a hyphen that still works okay yeah so okay well let's put that into our word count function then or something so we can at least take something off the list yes i guess like we have accidentally the consensus seems to be that regex is our best bet michael it might be yeah it might be um let's do that yeah we just yeah so let's just unfortunately i don't know regex i think we should be well what yeah it's still counting in space as a character but other than that it's working it counts the space though so before you start i know can we just do a regex michael uh i'm talking about the word count oh yeah of course because we need to minus one because the when you split there is at least one entry in the in in the array so like it just has an empty string in the array that logic will have an issue when counting words if you add a double space between the two words it might be yeah so what two words three words yeah it counts every space ah yeah we'll have to use regex yeah okay then we'll have to use regex what are they i really do not like regex so and the reason i don't like radios is because it's very hard to understand looking at it what it means so uh normally if i have to explain ejects if i have to i usually go here where jackson is so uh we have here's like you put an expression in here you write your rejects and then you have an input here and i'll tell you what's like what's going to happen will it yeah no one is telling me absolutely nothing no but here is also the explanation though here so you have the capturing group character set range and so on so if we just use that regex um so you see with up so abdulrahman wrote where you have forward slash s uh backflash i think that needs to be escaped uh backslash g and then he's got double quote box so the on the the first argument is your regex and the second one what do you want to replace it with so really we want just to capture this [Music] and here that basically means that when you hover over it it says that slash s means white space and then i don't think that ah we don't need the slash g is already included here so we just that's global search so like search in the hall of input so really it's like just search for white space cool i mean that sounds alright i don't really get why s is white space oh s for space um yeah spaces tabs line breaks anything is that just built into regex or something then yeah so here is like on the left you can see a breakdown of some of the popular ones so for example a lowercase w means a word uppercase w means not word d is a digit capital d is not a digit so it's yeah like it's not super intuitive at first okay yeah so unfortunately there we go so basically you just go replace that's and replace take two arguments which is the first one is your regex so you just give it like that uh and the regex takes this like syntax where you input it in between these two and the so that's your capturing group and the second argument where you want to replace it with and then yeah we basically need to get rid of that minus and that kind of do it yes no that's kind of so do you wonder why you're thinking about bob the builder i don't know just so that is our parrot account sorry that's our character but it's not it's still counting the spaces no it doesn't it does right character count let me know maybe it doesn't it was just now and just uh [Music] with that it's not super intuitive at first understatement uh it's not super intuitive at any point i mean it's good it's logic and once you get once you get familiar with it it kind of makes sense but that's how you feel about me we'll leave it to that but yeah at first learn this counter i don't know but once you get together a little bit better her logic kind of makes sense i'm a human regex i mean sometimes yeah sometimes i'm the only solution even if i'm unpunishable oh okay stop digging for compromise okay um so i thought it was working yeah it is working so what are you doing now then i'm just trying to show you what okay i'm just trying to show you like once you have what happens inside so once you replace that string this is what gets output so you have bob the builder you see so if we input more and more spaces it just strips all of them and it keeps that and basically the length of that string tells us how many characters we have in in the whole thing so presumably i've never pressed that one before and i never will again and what's what was that two-way radio two-way radio i thought it was gonna be something relevant to what we're doing but it wasn't i thought it was just only one person speaking there i felt two way at all yes anyway let's continue anyway uh so over here s plus you won't match multiple spaces and words uh multiple places and words what does it mean multiple spaces in words i'm not entirely sure but like it's all right without the plus but i don't know what the plus means because as i said i don't really like rejects all right so because it counts for tabs and things so when you have oh yeah look it says underneath sorry multiple tabs multiple tabs faces would be taken care of oh i see okay then uh so when yeah there you go see it highlights the end of stuff as a capturing group that looks good yeah yeah i would say yeah that sounds that sounds good yeah why not let's let's add that plus sure can you say that like you have to pay for every keystroke i mean well you do uh anyway and the neat thing about this website is i think uh you can save the pattern or something or is it say we'll create a shareable public link there you go so you can save that it gives you a link and what i normally do if i have to use regex in the code base i usually leave a comment saying don't ask me questions see the regex here i don't want to talk about it regex help and i just leave a link to explain what that reject means uh so people don't like scratch their heads and go what what's that supposed to be or something so you you can kind of like so you just load that link and then there you go is that well it kind of saves a couple of clicks to people if they need to look it up abdulrahman says we don't need s plus when counting letters because you have the g flag um well there is a g flag on this one as well yeah and it clearly highlights the end of this line so anyway that's why you see that's why i don't like getting involved in regex because there's always a better way of doing it anyway it works so let's take that off the list yes [Laughter] so how do we count words um we already did that have you deleted it uh yes but there was something that oh anyway let's basically try to do it again and then see if we can get the bugs and then try to fix them so text split oh yeah the split didn't work because if you have multiple spaces um yeah but i mean you wouldn't so [Laughter] ah there you go so there is some magical regex as well oh look at that so you have like something like that like when i see a regex like that it's like no there must be something better than that that to me looks like what i imagine a martian language would be yeah oh actually there are some beautiful programming languages with like really interesting characters i can't remember them the names of them there but some of them look really odd they're made whole different characters yeah they have like special unicode characters where you can basically there you go anyway so we can see that there you go uh you capture see it captures every single word in our input text yeah why not so that w is what a word so slash w no that is a word slash w is a word capital w is not a word okay okay really regex is better than i thought oh what have i done esoteric languages yeah yeah so there are some which are very very interesting to say the least so uh replace and then we just capture group uh do we need to actually replace no we don't need to replace we need to i think we can do find um match matches the method so it's not find its match is the method for the string yeah and there you go and then you just go even quite sure what is some kind of like 1950s cartoon isn't it right it's like the melodies is it yeah it's i'm a word oh he's changed wow he looks really creepy now i like the old bob the builder better than that isn't it ah where is that gun him is that bob the builder yeah why do you have weird cartoons like why is this with britain and weird cartoons i don't know man conclusion britain is so strange oh well it's funny how this front end challenge turned out to be a regex challenge yeah oh i know if only i knew but anyway we can now tick that off the list yeah anyway so because i'm lazy today so you can like at regex comment here actually i mean it's a fairly small reject so it's like but you can probably just write what it does michael you don't need to comment it no one's going to be looking at this well i mean the people are looking at this right now so well yeah but they've watched it they don't need the comments spaces and remove now come on ukrainian cartoon called once was a dog you familiar with that once was a dog i mean maybe it's not oh is this another joke that i don't understand because i'm dense no i don't i if you can post like an actual ukrainian name with that cartoon uh then i'll let you know count though yay so now show the longest word well we already captured all the words oh look this ah um interesting yeah it's kind of like it's a very old soviet cartoon um how was it once was a dog yeah it's kind of like that because i was like jewelry is like the fairy tale beginning you know like the traditional like once upon a time kind of tale beginning so that's what jewel bull i suppose that's why it's called once was uh oh yeah yeah once was dog that's i can't translate any better than that i suppose yeah that makes sense the brian sia i joined live chat today after over two months really welcome back hey yes it's not like a victory i think so either that or someone using his picture yeah mudra hi gang hello t rice yeah michael show the longest one something to do with um i suppose we can repurpose some of that rejects yeah why did you shut it wait we need this no i think we've already done that so you have so if we just uh just extract that const next words put something we just replace that quickly and console.logs don't click away what's this uh well we'll i'll come on don't give us the answers just yet we need to like people are not interested i suppose that's good that people aren't interested in watching us suffer i think some of them is my first time on live chat michael from nigeria whoa we have michael from nigeria and michael from ukraine oh wow sometimes we have another michael michael larocco i don't know in america somewhere yeah i thought he was italian but he wasn't yeah it's me lucky victory yes hey so uh yeah the much words and one two three there you go so you basically get words in there uh so i suppose the quickest way is to yeah figure out which one's the longest yeah which one's the longest yeah but we need somewhere to put it so i will do this it yeah longest word longest word what is that two that won't be i love your ways to like how do we avoid this edge case there won't be an edge case it's only so much you can go michael yeah okay so i can already see this going down really well in the interview though like what if you have two words there won't be two words there isn't such a thing yeah what about cat and dog those are your lens well why would you use cat and dog in one sentence i mean if it's a cat dog it's one word so it's six letters and then uh speaking of cartoons that was a brilliant ketone as well cat dog wasn't it i never saw it you never say i'm a word um okay um come on the longest words not text content for word back to the studio yeah back the studio we need to find out the longest word i suppose the longest word uh well we have all the words is the one with the most characters it's the one with the most characters yes so we have matched words so it would be in there inside of my words but michael's just awesome what i thank you very much um cat dog yep almost choked but then didn't i see right so um yeah i suppose like you have to you know to know the longest word you have to go through each of them no don't just give your longest word why not because let's let's figure out right oh yes um yeah i guess you do this you have to go through every word and then tell so what does that do anyway let me just solve it for myself go through every word count how many characters um although you don't really have to count i suppose sorting the words would be would be better anyway uh it's okay what are you doing i'm looking for the next thing today the sound effect uh okay so the the thoughts that i had is we have mashed words but what you can do is okay so if we have let me just quickly see the code so we have like one right two and then three yeah so one two three uh we basically we look at one three characters two three characters three five characters and then okay so we know that so because we have to look through all of them uh that is big o of n so you have to look at every single character and then based on that you pick the way that is the longest so that would be bigger event because you have to look at every single one of them now if we use some kind of javascript sword and then pick the first one yeah that's what abdulrahman says okay uh so in that case javascript javascript sword you go uh where's the very prototype tonka plexity yeah okay it's a merge sort how complexity of most sort is oh man is this an algorithm yeah everything is an algorithm well just use filter so it says gg ishan yeah but that's kind of well you basically implement the filter but then well suppose you have to look that up again so yeah i suppose sorting is n and then log of n sorry sorting as n and then probably the lookup on the array oh anyway i don't remember that if you have no idea what's going on like me put a mammoth in the chat i suppose what you need to do yet is uh much words uh let's sort them do you remember how to solve stuff without looking pretty sort of word uh oh actually so that's a length is i can't remember that so you basically tried to tell them [Music] it's not just me sorry that's what i was at momento it's like you were really inside your head so you want to sort words based on how many characters they have so you basically say sword uh a b is like well i suppose fifth first second uh and then you return a dot length i think it's minus so sorry you take the first word that you compare but minus the second word that you compare and length whichever it is it will figure out which one is the longest oops but you only want to do it if there's more than zero there's something missing because there's a red line under one line 17. oh yeah of course yeah whoops shouldn't have done that there we go one two three oh i think i did throw them around so you do second minus first i should do it one two look at that three yeah okay awesome so this is sorting them in the right order okay yeah yeah but michael if you do this does it then yes yeah so now you just need to pick you've got this if you get all the value inside the checks are into an array you can filter all of them according to max length i guess filter callback takes ali index arrays arguments well you don't have to you don't actually have to filter anything because once you sort them uh once you've sorted them you already you already have yeah you just put text content and then like really you've sorted them so now you don't just save like that into a variable and then variable zero as the text content yeah uh you probably just go yes sorted words longest word and then you pick the first one so we've sorted them and then even if there are more than one that are equal length so if we go yeah yeah one two you see it's still doesn't matter you just pick the first one that you've input three and then three all the time becomes bigger the longest word okay so you just there you go just pick that one uh uh i'm right there it's like you actually have to call it to strength yeah it's not like probably would you not like longest word maybe it's that zero at the end you have to okay uh what does the console actually say yeah yeah i'm not sure wait is it to do with maybe i didn't save the html so they can't find that um paragraph unknown error longest triangle oh no michael look we've got longest word and longest word ah right yeah that's that's a good one um yeah we should change that to longest word display online four yeah but they're all kind of i think what's the other word for longest no we should change it to longest word display okay no longest word display yeah okay and now that it should work one yes [Laughter] yay yeah that is that and we can find a sound effect over what let's say we're done commercial sound um yes so what are you looking for a sound effect this looks stressful all right i'm gonna uh do this man yeah what sounds like you're looking for file new oh see how you know constantly yelling my now we're both in our heads okay [Music] okay oh i see so now um save is that what we used before well it looks like i've used this at some point this one and then um yes i don't need to pause i don't think you need play i think you just want to do x-play you mean like yeah yeah ah that presumably creates an audio element that grabs an audio element from the dom um yeah you don't need that and then do you actually need a audio element for that oh anyway welcome to the bridge yes and me three here's mp3 and then put this in here and this is cha ching you need to create uh you need to create all your elements then okay you need to be crazy hold your elements i'm afraid okay i get it michael like korean audio in javascript yeah that's what this is no yeah basically the whole the whole thing audio there create an audio object creator uh what so we need this no the next one hey yeah that's what happens when you're jumping yeah uh and now presumably you want to say x dot source yeah yeah yeah i remember it well equals this x also is equals oh no all right yeah yeah i don't think you want that to be played on every stroke that would be awkward no that's what i want is it is it really so yeah i suppose we can we can do it slightly slightly better because we just we need less of a gap at the start of the audio we can just grab it um just extract it to here judging and then you can try it yeah so now you don't have to create a new object every single time that sounds good yeah because if you have a very very very long essay your browser might crash [Music] i don't have a funny one yeah but i don't want that micah i want those plays every time that will be really obnoxious don't do that it wouldn't ah it's fine okay tell me legally linear search will be faster in this case if we typed a long text sorting words first would actually make sense anyway thanks for the stream you guys are awesome yeah applauding yourself but yeah linear search will be would be faster but i'm also too lazy to implement it from scratch so you have to use the sword okay yeah so if you would like to try this you can head on over to scrimba in the dashboard is where you can find yeah no challenge and here's the link as well also on that dashboard you can find details of how to join hacktoberfest with screamer that caused this these puns yes so come along here is our repo that we're building and i know here it is this is the page we're building very exciting indeed so do you join that yes what's happening over here oh i'm currently editing a video about icons which i will be putting on this channel asap this new library i'm not i don't think so no yes so there's that and over on scrimba um we have the next live stream will be the weekly web dev show in a couple of weeks that's not true actually there is going to be one before that with kevin powell launching his new course yes on the 20th okay exciting so are you streaming on wednesday not this wednesday night because we're in ukraine well i wouldn't be anywhere on monday because i did it this month oh right yeah yeah actually next week there will be no streams that is awfully long there's no need for it to be that long you can't stop them it's like when you get a teddy that you squeeze and it makes the noise and you're like okay that's enough noise now anyway yes but were we back back again with many streams soon in the meantime hope you can join us on line seven why you used var oh because i copied it from stark overflow and didn't change it yeah why not but normally i wouldn't yes sad face tom yes we will be back though do not worry there you go just autumn unfolds um filtered on dot filtered yeah well that's it the next time i speak to you maybe will be on tuesday on the fireside chat are you talking to me or oh no you're going to talk to me like in a few minutes again well you know depends how it goes i will be beaming into the fireside chat on skarimba's discord from ukraine yeah yeah there's um i'm having all been there as well how do i find the press card here we go you can join us here ah nice awesome oh yeah ah don't forget to hit the like and subscribe yes you'll speak yet the worst i've seen admittedly but you know i haven't seen that many that's true okay have a lovely weekend and keep going say hello to everyone

Channel: Scrimba

Views: 1,107

Keywords: javascript word count, word counter, word counter javascript, javascript tutorial for beginners, text analysis, word counting, word character count javascript, character count javascript, javascript character count textarea, character counter javascript, count characters, javascript character count, character counter in textarea, character count, javascript for beginners, learn javascript, textarea, js, javascript tutorial, javascript, show longest word js

Id: _c-v-H1ZSqc

Length: 58min 48sec (3528 seconds)

Published: Fri Oct 08 2021