The Weekly Web Dev Show: Word Count | HTML | CSS | JavaScript

Key Takeaways

hello there for once maybe the first time ever i was sitting here waiting for it to start but then i started playing all the noises on my soundboard and lost track of time um anyway still started on time naruto fighter says yo dave clarkson says her side marie says wash hands an important message and at least i know once again that my mic is working wow what a week we have had well it's been more than a week actually since we had this show but yeah we've got a new course plenty of submissions and all sorts of other exciting things here they all are uh 52 amazing submissions yes so whoo first time watching live from nash welcome i must remember this time to share the polling tab with you yeah so if you want to cast a vote for the weekly web dev challenge hit that link because you only have 14 minutes left yeah so as mentioned 52 submissions uh for the word count challenge look at him go amazing if you have submitted raise your hand uh or somehow let me know in the chat and then i want to take a look at it yeah good to see all the tech is working today so far speaking of dave yesterday i happen to know is that dave i think that's dave i have to say that dave has submitted a solution yes it is this one so you might as well start with this start typing in the text box okay i will look at that lovely orange glow isn't it beautiful start typing and then we have our character count and our word count and our longest word yeah uh amazing and when michael and i live coded this ourselves a few weeks ago now we tried very hard to avoid any kind of projects we failed uh we realized fairly early on that we had to use one accepting it happened later and david's usual as well so great submission dave who else jessica under the name of rain i've had a lot of rain today and now i have some more but this looks a lot more enjoyable than the other rain i've had word count with a beautiful purpley pink gradient and a nice cursive font amazing radiant counting the characters and the words great job jessica trish tj gill i believe has submitted if not i wanted to show this one anyway this is an amazing word counter with a lovely notebook effect begin typing i never know what to type when i'm doing the thumbnails and things i just copy this again typing here and oh yeah it has i will shut up and you will listen to the typing a very satisfying mechanical keyboard effect so that was extremely enjoyable hear us some more hands are up ishvant yes let's have a look at yours it's here and very good idea from isha to include a demo text so you can check out all the functions in action without thinking about what to type which helped me out a lot and a spell check which apparently knows latin which is good oh no it doesn't there we go and we can copy the text and then a nice clear button yeah super cool and um adding a demo text wasn't in the challenge spring so that was a very inspired idea i would say zade is this one she's gone for a beautiful ocean feel with this gradient and when i type it updates each time ocean field i type a character and it's counting words characters and it's telling me the longest word excellent i'm going to check out the js ooh i don't stay in regex that is interesting i thought it couldn't be done without one but zade has done it oh sorry this is safe yes great work alana i think alaina did one so luke hey maybe not i hope i didn't forget to write it let me know if you could uh which name could you use and i will show it off yes let me know if you can which name you used because i don't think it was this one martin i i'm sure you've got one here it is oops i only need one we have the original design which is nice i always like when people use my design although it is good when people make their own designs but it's nice to see my own design too you know that it wasn't totally terrible sunny colors and there we have it 30 words showing longest word and the characters not including spaces oh that has been done oh i should have looked at this earlier words array all right i think here it's taking out the spaces with dot split which i think we toyed with the idea of doing on the live stream but for some reason didn't yes um i'm green here let's check it out lots of amazing functionality in this basic functionality we've got work out characters characters without spaces sentences wow i actually found a sound for this which i was planning to use counting sentences and paragraphs so if i can copy this oh yeah look at that super cool and we can copy it and we can clear it how awesome is that well well done and bring maggie meg is here this one with an amazingly brightly colored gradient background ah so this suggests that we can only have 200 words let's give it a go am i really going to copy that 200 times probably not let's grab some lauren it's in oh my word what is going on i'm intrigued now does that mean i can only have 200 readings of the word count i mean i could look at the code that's an option text area max length equals 200. ah yeah so showing obviously how many are left look at that brilliant idea showing word count limiting the number of characters and the character count and i must point out this nice um text effect with that shadow behind it yeah super cool my name is wonder let me out loud yes with the amazing typing effect super cool marta submitted this morning yeah let's see what that looks like this one if you're wondering why the newer ones are not at the bottom anymore it's because for hacktoberfest one of the issues i raised was to load the submissions in a different order each time because otherwise the people that submit first they get seen a lot more so i thought it would be nice if yeah we can change it up so that's what we've done anyway here is mata's super professional looking word count super word count i like the feel of this one and we have the usual counts the longest word and we can clear it which that you can't undo i didn't expect that you would so i don't know why i tried fun word counting we can also check it out live hosted on netlify yeah i must find another soundboard because i can never find anything on here it's got about 80 percent of sounds that i would never use anyway great job to mata do ash see where yours is oh we've got four minutes to vote as well so make sure you have casted your vote and you can vote for more than one huh i'm not sure what name did you use diraj let me know and then i'll have a look at it who is dave watson collision he wants to stay away from driving for sure uh liam do you think you could avoid regex with filter i don't know possibly i have a feeling we tried that on the live stream maybe we'll find one in the code that's done that uh do we have a hand if we submitted yeah totally and who is next we have a haha from jared i don't think that's the name he used and who has anybody noticed says dave now the outline in css now follows the border radius of the element how to be honest it screwed up a couple of my designs oh didn't it always do that yeah so if you have a rounded button dave is saying the outline is still square and there's no way to um basically deal with that well the way that i found is instead of using outline for focus dates to use border um but i thought that was a problem that always existed but maybe not yeah random order is a great idea yay ah you are dg that makes total sense yes here it is an amazing gradient and all these amazing things we can do as well uh down here i shouldn't have shot my laura mipson maybe i can copy this again let's see how much lorem i have counting the spaces and characters and special characters that's a good idea well it's another one here mysterious uppercase lowercase and numbers look at that super cool well done dg oh update on outline outline was always box shaped while bored it could be rounded now it always follows the border radius oh right does it oh well that's good now why i can see how updating something like that would create havoc but when did that happen can i look it up css uh spruce mdm might be the latest according to the spec outlines don't have to be rectangular but they usually are i think that is something new outline style discreet yeah i'm gonna check it out later which js framework is best for this kind of app uh it says shubham and we on the live stream just use vanilla it's a pretty simple app so i'm not really sure it would be worth using react for it i guess you could um personally i find it easier to stick with js for this oh and stay put said all of them whichever one you're most comfortable with yes hello to complete okay i'm going to look at a few more if i haven't looked at yours yet let me know and then i will announce the winner so i have a little list that i compiled earlier of uh yeah i wanted to show you guys so we have this can you note perfect i love this this is what life would be like if i could write neatly but i can't but for now i'll just use this just imagine if we could have word counts on paper i mean not that i ever really write on paper but i don't know it would be cool and this is cool well done neon am i still live says deep space i hope so i seem to be let me know if not i have a feeling deep space submitted something imagining it never mind yes so that was a very nice submission from neil who else did i have in mind to show off frederick's on the list this lovely purple creation has a pixelated old-school gaming appeal to it and oh look at that now that is a focus state and a half look how it goes around there wow i need to look into how this was done you can do that oh there's text area focus and then within that top hop over to the html we've got our text area and then next to that seems to be uh spans with top bottom left and right and then it's used to transform to show them off i have never seen anything like that amazing where does the color come from it seems like a gradient right here yeah saying that ah so his bands are decorated like this and then it uses a transform in the outline seriously nice anyway type here look at it go great work frederick who else i wanted to have a look at tim's tim wrinkle another retro gaming feel ah look at that light this takes me back to my childhood yeah wow that's cool and i really like this font and if you notice um when you click out of the app the font gets dimmer which is cool i wonder what font that actually is font family v2 323 cool great job tim um okay who else oh wow yeah i can't forget this one be prepared for some really useful information lina has done two things one turn this into a game and two taken the chance uh to show us some amazing cat facts from the cat facts api start a cat's hearing so you see it's going green as i type and if i make a mistake no green it's much more oh man this is special then humans and dogs full stop i win you got time 21 seconds i wonder how you can lose let's look it up uh lose no way to lose that's the type of game i like i'm not very good at computer games in the scrimba team on friday afternoon we were playing this kind of um kind of minesweeper but you also play against each other um and i sucked yes so that was fun cool cat graphic says dave yeah look at it oh adorable yeah so great job paulina and i got lots of interesting facts from here the leopard is the most widespread of all big cats isn't it widespread as in um does that mean different locations on earth or number of leopards yeah a cat's field of vision is about 200 degrees wow anyway enough cat facts because we only have a few minutes left yes the regulars know that cats plus a gradient background well catch lian's i i hope you're not suggesting tom that people might be gaming the system here yeah that would not be on i've looked at ambreen's adam gonzalez another game i believe clone clone oh that's like clone square word counter total character count total recall it's a film i was going to type great film but i can't actually remember what it's about so i won't um oh we have an achievement so is bridget jones bring that we get another one that is set in london i've hit 100 characters congrats another then we can copy in this and break the internet why so there's all these achievements gamifying the word count that is cool video has frozen has it video hasn't frozen my display phrase yes i thought mine had as well but apparently not adrian says nice job everyone bunny which reminds me i'm not sure this was deliberate on adrian's part i mean unless adrian is psychic i don't know how it could be but um if you're new here please put a bunny rabbit in the chat and if you've been before hit me with that tiger we don't do anything with this information it's just a tradition yeah who else was i going to look at i'm going to run out of time here patrick a trick has created this cool little app we can start piping here paul's stop counsel sentence we have a spell check which is currently on maybe it knows german as well i mean it does awesome and we can also have a demo text which is the script from star wars yeah obi-wan and general grievous having a conversation and if you've forgotten who general grievous is like i had it's this guy yeah kind of cockroach in a cloak type of vibe anyway great submission there from patrick benjamin oh i remember thinking i must show off benjamin's oh yes another typing game oh what do i have to type maybe i need to scroll no no it's just yeah however much you can type in one in the time provided can i cheat by copying and pasting let's try oh wow i don't think i can let's see what it says superb performance new rock so apparently i can cheat which is good to know but a cool idea to make it into a game there um benjamin and using set interval which we learned all about recently on another live stream i can't remember which one i think it was gonna have to look it up now that's annoying oh of course the pomodoro timer yes okay finally i want to have a look at intense pretty i remember seeing these emojis oh yeah the styling on this one is cool but it's cool and then you can change to vertical and change it back to horizontal and a cool little holder state on there great work good thing yoda wasn't the demo text spell check would explode yes oh look bunnies and tigers in their chats welcome back to tigers and welcome for the first time to the bunnies and to the elephant which i also realized i have an elephant sound on here which i had never seen before yes okay i think oh crikey it is definitely time to reveal the winner so i'll head on over to pull she says vote here paul has ended results is it me or is this not working okay well luckily i have it open in another tab maybe that's why it's not working and the winner with 15 votes is here manshu which i will show you now this beautiful gradient situation this is yeah we have a word count we have a character count and we have a longest word and i think i'm sure it was loading different colors or maybe that was just i think it was just the hover state on here but never mind that is a very cool submission oh we've got captivation going on we've got the regex huh it's also used filter as well amazing so you can all check out um him on shoes called submission congratulations to you hear my shape um i must now oh cat i must now select a random winner from all these entries so to do that i will open up my console ah can i just do it here yeah i guess so and js remember this bad boy here and this needs to be 52 four how do i do this or what's currently loaded on the page yeah i guess so one two three four so meg you have won six months of free scrimba pro and here manchu you have won the same plus fifty dollars of swag so please give me a poke over on discord or on twitter or if all else fails you can email to claim your prize we have a triple tiger from michael lim there he says hello square marines yeah i must tell you about the new challenge here it is it is from none other than kevin powell yes and um basically it's taken from his new builder space travel website course the front end mentor and it's building out this huge planetary sized button for the home page yes you have to build it and then make it cool basically so here's the link you have two weeks to do it and then i will be showing off the solutions this time in oops and it again um what am i doing how do i get there oh yeah your channel um i will be showing off the solutions uh well i will be showing it off it's not here at the moment in two weeks time and in the meantime michael and i will be live coding this solution we started last friday building out the homepage so we're going to continue with that which will include making this uber button and speaking of michael he will be here on wednesday getting started with node well he's not getting started he already knows node i hope um he'll be telling you how to get started with node so that would be very interesting finally i might have an idea what node is that will be exciting but we did it in the last stream in the last stream we did the whole home page this challenge is just that button well actually yeah thinking about it we did make some of the button in the live stream but we didn't make the animation or the hover state or anything like that so we're just going to continue with it yeah and probably do some other things as well congrats says andrew yeah i never won anything says mega man well now you have hopefully it will be the start of many wins yeah so i will see you on friday not friday wednesday with michael and then not this friday the friday after we will be live coding once again yes i think jiraj speaks for us all there well have a lovely week and hopefully see you again soon thank you for coming [Music]