Code a JavaScript number guessing game

Key Takeaways

[Music] hey everyone hello everyone welcome again as well yeah yes Friday afternoon for us maybe morning for you maybe even Saturday morning for you for all I know let's check what current time Fiji 5am hello to you yeah very early morning and also why are you not sleeping someone did once I think yeah brilliant so we're here today because we are going to code a JavaScript number guessing game yes it's going to be epic I hope um advice never has guessed number three okay well let's see if that's correct so then I guess number eight okay Gina is back again with a tiger in the chat as is Chrome chef Gina's favorite time of the week we will do the poll a bit later but first um here oops is a quick look at what we're doing yeah pretty much what it says on the tin really I've already put in the um very similar to many other htmls we've done in the past just to go through we have a form and a couple of inputs one of which is this number input I tried to style these it's all right faff really yeah these like toggles up and down as far as I could tell the only way to do it is to hide them and then add buttons on the side which is oh boy one of them yeah but then you have to remember the whole field yourself yeah you basically have to write it all from scratch which kind of diffuse the point yeah it does and then you've got to think about accessibility and all the rest of it I think there are some scripts that do it out of the box but that seemed to be getting a bit elaborate for what I wanted to achieve so anyway just to decide styling these is a pain unless you know some ways to do it in which case give me a shout um the other input is this type equals submit which you've guessed it submits the form and there we have number of guesses and with this little span which we're going to use to display the number of guesses the user has guessed and this is slightly confusing because this is numbers guest which will display the numbers you have already kissed yes okay CSS wise I mean that's not very good music number of guests are how many times wow is what you tried to guess I feel like naming wise they could get confusing but we'll see CSS wise I did something I don't normally do with this and that's styling with an ID I for a while have been of the mindset that one should Style with classes and reserve the ideas for the Js recently though I've been thinking if you're only ever going to use the styling for that one thing which in this case is this thinking emoji then is there really a point in going into the HTML adding a specific class to that and then coming back to the CSS and starting it I thought no probably not because it already has this because this Emoji gets updated to um say a message about whether you need the number to be higher or lower yeah so I thought you know what we have the ability to style with IDs in CSS why not use it okay that's that um yeah starting off the form done with flexbox using the Gap property which allows you to put gaps between elements in flexbox and in Grid yeah quite Nifty and then um yes as usual uh removed the Hideous borders that come with built-in book come built into HTML elements and did a bit more starting on this button which I did steal from pre-belt CSS buttons this page two this page 92 button examples it was based on this one but actually doing the hover state this is another thing I discovered while building this didn't work because this isn't a button it's an input and inputs they can't use pseudo elements I found out so then I was like well I'll change it to a button but then that got difficult with submitting the form in one anyway there's the pre-built buttons oh did you need to wrap that into a form element into that case it is in one I think is it yeah uh see can you not have button type submit you can't have button type submit I don't remember exactly what the issue was with it but okay it was a pain so there we are yes Jamari you could make it clear automatically and not use an input field but a regular div a regular div for which one let us know hey screen is blurry oh that could be because I'm probably leaning too far back and Leon is in front of the screen so it blurs one of us out it could be yeah or I could be recording this on the wrong setting no I'm not full high definition it could also be sometimes people mention they can change the playback settings oh yeah it could be that higher definition basically there are a lot of possibilities yeah huh let us know give it a refresh change settings no other option than 144p oh I see slow internet connection yeah unfortunately that's yeah that's your internet then sorry about that other people are saying it too though hmm I don't know give it a refresh that's my advice and yes this has um oh somebody from LinkedIn somebody from LinkedIn welcome yes um has preempted my question of letting us know where you're tuning in from always interesting to find out from sunny California from India yes yes we did hello would have gone to send back hello to you Andreas Toot It and everyone else who's joined us now's time for our poll if you're new here please put a bunny rabbit into the chat if you've been before hit me with that tiger yes we don't use this information it's just for fun and tradition actually some people already have done this yes hello to you all bunnies and tigers alike cracky I thought I just ended the broadcast then but I just heard the chat look at this oh yeah and of course if you're from Colchester you should use an elephant yes because I have an elephant there Paris France oh nice oh look at this uh mine the screen definition was low when I got here choosing higher quality from the YouTube settings on the videos sorted it out nice thank you hopefully that will fix it all yeah and also somebody else is saying that they have 1080 so yes 1080 correct Paris France Bulgaria yes and to Paris actually yes Kingston Accra we're okay look at this Indonesia wow oh look a funny rabbit how is Grandpa amazing bunnies and tigers alike and there is also a regular attendee lion which I need to add to the poll no specific criteria just uh a feeling one get maybe we should have a specific criteria yes hello how are we going to track that well I don't think we would track it it's people's self-track yes brilliant good question so this is what we're starting with this is scrimmer uh you can use it to learn to code basically the bunny rabbits in the chat yes uh this is our Fontaine career Park aims to teach you everything you need to know to get hired and you can code along directly in the browser like this instead of a label you can have live yes yeah that's I mean you can instantly see that it doesn't work sorry for interacting let's get back to class what's up so here we are no more Paul things we need to do Michael oh yes number guessing game oh no where's your to-do.md well yeah I know maybe we should put it in here this is what you don't do in production no that's right comments with the odd to days oh you definitely do put that into the point Generate random girl okay two um grab uses guess three compare the two numbers foreign advise weather higher lower or save one let's start with that so that's if that guess needs to be higher or lower okay um that's the plan let us know Dave says we can't see your screen I think you can see my screen I can see it on my phone anyway something very strange going on if not let me know so here we are over to you Michael oh I see so Generate random number that's easy enough math dot floor math dot random yeah and save it in a variable I reckon yeah okay so that goes cool um Target none I'd suggest yeah random number without math dots random yes isn't it math dot floor first just copy and paste it Michael yeah I can never remember so for the billionth time we will look up how to generate a random number us uh get a coding tattoo this is what it'll be what [Laughter] hello from hello to you what floor Master at random hello okay hello everyone cool so in that case so that's gonna generate a number between one and ten yes Generate random number okay so that's done rap uses guess okay so your guess who when you hit that but it does it okay so I would imagine that it needs to be some kind of uh we need to reach out to this element this input thing I've already grabbed possibly from there I grabbed some of them already um I know because you'd need to get it each time wouldn't you so that should be in the function then yes so let's see is it guest number have you used that number guess numbers oh number and number two yeah uh I'll just rename this to you guesses maybe we should rename guest a number to use his current guess I guess seems like a good good name I can't guess let's do that so I can't guess there we go you can cancel up just to see yes you can we should do that just to make shots sorry document yeah [Music] current guess yes uh but what you're saying is because this happens every time you play the game you need to keep clicking this so that's gonna go inside our function yeah and I saw that you already pointed out this bit I said talking about the submit event listener compare numbers if you've already given a hint to what this used to be numbers [Music] and then I'll uh grabbing the yeah fat grabbing users guess should go in there let's see if that works so that oh you need to Value them I think it is dot value yes okay a string yes so that will be giving you a string when you pass it in one two there we go uh what you should do what Katie Lola says and I can't sell a log random number to check we're actually getting of the numbers we want uh yeah scramble has console in the right hand side you can actually output it let's see so I'll guess four how was it it actually doesn't show up in the console for some reason oh okay yeah it does yeah it does okay sorry no value must be less than or equal to 10. one two three four reload the whole thing every time six yeah because it's a submit thing uh so when you submit oh yeah of course because when you submit it refreshes the page I see which you can um stop it from doing that default but we actually want it to do that and the reason it's saying um but I think you actually don't want to do that the reason it's saying value must be less than or equal to 10 is um because we have a men of one and a Max of ten well yeah this is the max that's affecting it obviously so that's that good stuff so I think we've checked that so I think if you have 10 and you submit that's why that's why the console doesn't show anything because it refreshes the page and we are back to square one so actually we do want to well so you can't guess pet no you can't but if you say so for example if you go uh some buttons okay sorry I'm right so one two three you submit and it tells you like you your guess needs to be between well intent so it doesn't actually submit it uh if you say one it's submitted refreshes how to wipes out the console so every time you generate in your random number so what you want to do is you actually want to dot because it prevents defaults okay and I have two there you go okay and then four yeah there you go and now you get so you do want to stop it from refreshing all the time and you do that through developer and default got it that meaning line 13. is the same as math.seal math random times 10. yeah you need to grab the events from past them but I think you will get yeah I think you should get past 10 automatically I'm not sure but is there actually any difference between purchased on sale and math dot floor or basically using this and using what Dave suggested I know that you may get the same thing but does it matter which one yeah if you use mark.seal then you don't want a plus one yes okay so that's because yeah it's basically rounds it up but is there any benefit to using one or the other um I think if you do it's for all yeah yeah no no that's that makes no difference it's always it's always going to be from one to ten so yeah to be fair it's whatever you prefer tonight Hello friends happy 11 11. now uh it says maker who is a code reviewer on the front end career path if you study the career path you're entitled to ask for code reviews yeah um another perk [Laughter] can I can I ask Mika to review my job code reviews possibly if you become a boot camper on scrimber so this is the scrumper boot camp uh um here we go um members of the swimmer boot camp study the career path and they get code reviews from experienced coders so they're nice extremely um so that's that and we have a little puzzle guess my location says Simon I'm from the UK but currently in the southern hemisphere somewhere I think what Simon means is he's in the UK in the southern hemisphere all right okay because I was like you're from the UK but you're in the side of the hemisphere that's that like you again like you have to give us more hints but you are actually you know you can start on the hemisphere Falkland Islands yeah Falkland Islands Saint Helena oh isn't that also uh the UK was that Cornwell not sure yeah I'm not sure either let us know yeah we guessed it right the only benefit says Dave is to not add the plus one at the end yeah oh look Miko is going to review your work nice oh not a UK related country oh okay right so in that case that's that is literally a guessing game oh I see now and I think oh sorry it's been a long week I think I'm being a bit dark I think what he means is the number guessing game but for locations what basically like we are now creating a number guessing game but Simon means can you have the same thing but for locations I don't think Simon reads that why I mean maybe yeah maybe yeah anyway um oh yeah speaking of uh forever I'm new to coding having problems understanding JavaScript loops where can I get help you can check out our Discord server we have some forums about not very things JavaScript CSS all kinds of other things so you might want to check that out I didn't mean that but good idea let's start with numbers um yes so well in that case I if I were to guess Simon is in Australia here we are I had a guess I'll go if it's chilly you give chili fair enough then there would be at least two people watching there there you go anyway um grab uses guess wait haven't we done that yeah yeah I have done that so we can delete compare the two numbers compare the two numbers okay so compare compare the two numbers I'll go with the conditional if blah blah yeah equals blah blah who you've won so I think well basically let's go with the happy path right so if parangas double equals yes random number and I think I'm going to do that so because mainly I can't be bothered so why is it double equals so uh console.log I mean people are going to say oh you have to do Drupal equals but I think this is actually a very good use case for a double equals um so if you go random number double equals current gas so let me just come to log that I have to false false oh yeah because anyway sorry I'll just quickly hack this around let's say let's say a random number is two okay so I haven't provided any guess I see two know how that is not what I expected I think we need to do pass it because when you input it yeah it gives a string and you're comparing it to a number yeah but I thought this works I thought that too but it doesn't no it does oh yeah okay so very quickly I I oftentimes like to just like code along in so we're comparing two as a string with two as a number yeah that is true and we're expecting double equals to return true triple equals would return false yes yes okay so far so good and the problem is current guess um which is a string when we're comparing it with a double equal sign to random number which is a number is saying well we don't know why okay and then firstly uh that's because I was comparing current guess not to carrying guest out of value right which is why I think we should have saved dot value in the variable Michael yes that's a very good point so far I think if I just do that there we go there you go so string yeah random number number yeah so the the mistake was let's not stop value so it's not value okay but now we don't want not value in line 18. that's all right I don't need that I can just actually do what I intended to do twist to show that yeah you can do double equals there you go yeah you can okay good so if that happens yes so if that happens for now let's cancel our log woo ghost Emoji give one uh okay how many O's have we talking here I think three three okay [Laughter] novel equals is equals but triple equals is equals and the same type it's a good way to remember yes uh although you can't do that with uh erase and objects and stuff so it has to be like primitive I think it's called primitive literals or something because I like strings numbers booleans you can you can do that uh so for example if I ever make programming language I'm going to give everything really self-explanatory names probably won't ever do that but you know true true okay that didn't work so all right Michael let's let's get back to the class yeah see so you can't you can't compare these or objects and stuff like that so yeah just remember that when you when you compare the things you know you should with equals you should try just primitive eyes no it says because there is an objects can have the same content but different addresses right yes correct yeah what does that mean different addresses so like the address in memory on your computer in memory all right so they're like they could have it's basically like houses on the on the housing estate all the houses look the same but the contents are different good thank you is that 12 and when you compare the houses you want to know that the contents are the same not if the house is actually the same because obviously there wouldn't be that's correct says Dave what would your programming language be called Leanne oh I know exactly what you've ever called what do you think you think meow Lang I was going to say pumpkin script pumpkin script actually I think that's a real language Lianne plus plus yeah that I like that one best oh actually yeah this is the right answer programming language pumpkin script pumpkins avocados pumpkin DP oh man he's been up to loads of stuff hunky TV oops and in busy programming language pumpkin script Glenn that's that's already a language bastard wow look at that pumpkin DB is an immutable audit key value database featuring acid transmission back to the guessing game oh wow look at that that's actually quite interesting Michael someone Tunes in right now expecting a guessing game and we're looking at pumpkin DB they're going to be very confused wow look at that who okay sorry I'll need to look at look at this after the stream because I know I like to do that but that's amazing erosion objects can be identical in values but they're not triple equals as they're different objects in the memory yes I've had the Leisure tray isn't immutable sadly not sharp face anyway um yes so that's what happens if uh they the current guess is the same as the random number how do you do if else in like that but then you need the brackets oh yeah of course another condition that condition will be oh isn't that relative yeah is it yeah well it doesn't like it so I guess so it's been a while since I'll I'm very sure it is relative yeah it's been a very long time since I reckon but everyone is saying else if yeah Karen guess uh so current guess is less than random number we need the up Arrow not that one look it's there no oh on your way back unless I can't guess it's smaller than random number in which case the only way is down functions yes okay let's give that a go okay math got sale this time okay well let us know if you prefer math.seal or math.floor with plus one at the end so okay so I need to guess higher okay let's go for that I'm not looking for it okay so a six uh or is it between two and six oh no I've got I forgot the numbers that I've tried to guess luckily we're coming to that next luckily there you go that's a picture request four lower three all right so that was a three good news uh so I hope uh guest numbers so what I want to do is if I haven't finished guessing I should probably well so you have this guess numbers that so this is this bit yeah uh well first I think we should render the arrows or ghosts in the where that thinking smiley face is oh yes yes yes okay so uh what's that element what is that advice ah okay it's literally called advice advice P advice p and you have already grabbed it okay cool Simon prefers math dot seal Simon you didn't let us know where you are well that's a secret you have to sleep without knowingness I like mascot floor if I don't want the last number to be included so so what then you don't need the plus one uh so it's like from one to ten nothing inclusive ten yeah that makes sense yeah that does for example math.seal for what you're doing today yeah fair enough if I stop he um no I think I don't think Michael what I think we should have a variable called advice and then we should save it advice dot no no no we should return here the whoa come on I think we should yeah we should return here and then at the end we should um they advice.p in a text equals advice we can do that well let's refactor it later no yes anyway see it works so let's just keep it that way ten okay uh we'll do three Three Ages guess six that's lower four you know you can just use those buttons so okay I didn't guess three three three yes okay cool okay so that's good uh so it would have been nice if I could remember the numbers I guess so guess numbers and let's just quickly grab I guess numbers uh you can class equals I suppose yeah okay you can plus equals there we go yeah and then stirring in preparation okay I guess comma comma space if I'm concatenating them then I want to do it like that I think the first one would get one though then wouldn't it uh oh sorry we're not actually rendering that though uh that'll be in a text too no because we don't need it in guest numbers we need it in okay now we do yeah I don't know why that's not working guess numbers those in the text wouldn't you need that oh no that's only if you win we need that outside of the if statement so so here I need that for well for all of them really yeah so I can just add it outside of this if you only had it when you want that would be a bit useless yes 10. uh okay so I can see that with my approach this is getting a bit annoying but yeah okay why does ten have a gap in it well I think it's just spacing it is actually I can answer my own question yeah um because I thought a fairly simple way of doing this is just to not have Js do this uh separation business because that gets messy but instead just use a bit of CSS with spacing yeah um that is guest numbers letter spacing four pixels but if you put 10 then you've got a problem yes let's just remove that too so actually I think maybe we need to go down the road of adding them to an array and then splitting up that array well let's just go to the simplest one so far with with a comma and space Simon's in Brazil oh you were actually close yes well bye time difference before the clocks went back was four hours because oh and now it's only three so I can attend more live streams yeah [Music] it's 10. yeah that's what like party time Dave says put the guesses in an array and render out the guesses with DOT join and the comma that's what I had in mind with DOT join and comma so we need an array do you want it in there I think I mean no because then it no we don't want it in there definitely not because then it would reset it to an empty array every time yes so thank you all right and then in the text equals assists Dot dot in uh with a comma and a space I think it's just like actually not yeah hold on I think it will space it out for you although no I think I think it does let's try yeah let's try that but I also need to add save that this is thought oh yeah identify guesses has already been declared oh so we don't want the other one that we previously had a line 11. because now we're using an array so one seven yeah it doesn't have a space so I think you'd maybe do need that one yep nine oh there you go he's got his face let's try ten though because that was the one with the problem okay that's good now try um there you go okay cool yeah and while we're at it uh oh no look there's an idea word spacing instead of letter spacing maybe would have done the same thing but it's probably better to do it with JavaScript anyway I think we need that variable Target number because we already uh but we do want the number of guesses Michael Yes biology says I'm in Ghana I almost forgot your live stream what I'm glad you made it do you like football do you I like yeah that's right good to know I used to watch it a lot but not as much lately most importantly scrimba I need your help my JavaScript course is a little bit hard for me please um I don't know which one you're doing yes but let us know which one you are actually on if it's not this one I would recommend this one and learn JavaScript for free this is the only course that made any sense for me with JavaScript if I want to go yes or as pravesh says python is easier would you agree with that do you know python uh well I mean python is easier in some ways but it's not I don't know like list comprehension syntax I find very confusing in Python and if you're part of my plan I found a incomprehensible that's a part of it is called list comprehensions all right Bravo thank you anyway back to this the thing that was about my plan I think no no I don't think all the time that is the course which is hard for me in that case what I would recommend would be to come and have a chat on scrimpa's Discord server yes don't say hello yeah I have no you could definitely ask questions and stuff like that and see people's pets I don't see people's pets oh yeah speaking of pets we got some funny adorable um here we are the JavaScript help form Forum yes it could be good for you anyway um we do but they've been peaceful yes they're napping because normally they're just running around like yes oh that's arrays are difficult in Python now I have heard this uh yeah they're like well there are lists Sunday because you prefer that the job crypto raised I'm not really areas either but so um where are we at with this oh I'm gonna finish it yeah wow number but we need a reset button because when you win there should be some kind of button that says yeah but hang on if we just go let's rise higher lower You've Won okay okay so yeah anyway so a number of guesses let me just quickly uh do that oh yeah oh number of guesses that's right guesses guesses numbers guest numbers is so there's I think we should find some better names for this um I think this one is pretty straightforward though yes as hell is okay I think yeah because you just all you need to do is guess it's l dot value I think that should do um we're not actually rendering anything into guesses la no because guesses L is the actual paragraph I think all right oh no it seems to be working so no that's number of guesses yeah I told you this was confusing at the start I warned you which I find better names that should work Simon says Ah see catch one now I'm gonna get it's not doing it like ah something's gone horribly wrong Zozo says hello there joining after almost a couple of months I missed the great combo of comedy and learning good to have you back this was pumpkin in the office today pumpkin is not but who do you have kitty I think yes yes anyway so let me have a look at these are cats for those of you oh no a variable called number of guesses sounds reasonable it does but when you also have one called guest nums then it gets a bit confusing now I'm of guesses uh let me just deposit what is that I guess is hell I'm moving my camera I'm not going to knock it over if I get excited everything okay I'm good a number of guesses spammed Dot in a text or say in a text zero Michael what are you doing yeah so I'm not entirely sure why does that not guesses Elder in a text they don't want it to equal that there why because at what point you're not incrementing it though okay yeah I didn't say that sorry one test two now attacking all right oh no sorry I'm guessing wrong okay there we go so I think um what was that oh no look here's an idea guys no couldn't you just set I guess it's l number to the length of the array that's clever I think you could thank you well done the idea well done good Shout guess count guest count that could be a good name yeah oh glad to hear about pumpkin yes oh bug detected if you click submit without inputting a number there will be a bug a lot of commas will show up but I think there is there is a box so far because I have guesses dot length I need to display that after I push so right now yes okay one yeah okay uh oh that's actually solved the problem that Alexander I know she did it twice okay no it hasn't yeah but isn't there like uh that's actually an HTML why is it actually doing that because we've the array is empty so it shouldn't really be adding those commas should it no well you're well you're basically trying to prevent is because you are gear you're getting current guess dot value yeah foreign but the function itself runs because there is nothing to stop it from running yeah but what's it pushing to the array then right empty strings so why are we getting commas because those empty strings are in the array now yes okay so basically he was at the gas is array is that it's not what we want we guess it's all right is basically so how do we stop it from adding empty strings in the array then just the conditioner well can you stop I need to prefer which is yeah just it's always useful to do error checking so I would probably just say you know if the input field is empty maybe we should disable the submit input ah can you do that with HTML that's what I was thinking like can you actually um if the field is not filled in I mean I'm sure I've seen that HTML yeah I can I can I know how to disable it through JavaScript but I'm just wondering is there native HTML way to do it empty input validation there we go how to validate for empty input field w3s okay try to submit the form without entering any text name must be filled in okay oh that seems like what we want oh so it basically says yeah actually use JavaScript for that mate okay just use JavaScript okay thank you very much for confirming that W3 schools so there we go just use trim before Joy uh you can I would probably say that if JavaScript shrimp if no current gas white space from both ends of string everyone's a new string without modifying but then wouldn't we just have a string with no space in it in a text equals oh I think this is what you're looking for required attributes in input HTML right well I'm not sure if that's going to um attribute my account was that yeah in there you just write required is that gonna get it really no have you saved it I feel like it should do something maybe it's in the wrong place quiet that noise is attributes HTML uh input what Eddie says required keyword in the HTML or the input element should do the trick or maybe it has to be at the end okay I spelled it correctly that's good maybe the whole thing needs a refresh try it yourself yeah type text type okay another username num wrong okay submit yeah it doesn't work with type equals number says Alexander oh I don't know you can't have a required number oh no look at that it does work with a required number is the required tag not meant to be just before it closes uh I think so but didn't we try that well maybe it is because I've done it like that maybe that didn't do no try refreshing the whole scrim no interesting for some reason that doesn't do I don't know why oh well yes what I found live stream yeah okay well in that case let's just go for for the JavaScript solution uh if no current gas and what uh let me just go create a double check yeah because true yeah that's a faulty value isn't it I'm pretty straight yeah so yeah oh maybe it's not working because of prevent default [Music] um but hey apparent default prevents submission of the form not does it just resets the form I forgot that's why it didn't work because I forgot to return so basically if if there is no current guess if it's an empty empty field you get a passive aggressive bright red question mark you get a question mark and then I don't want to execute the rest of this code yes which is what they've said just return early out of the function okay cool lovely it will be nice to have some validation on that HTML I don't really know why it's not doing it going to devitals is the required keyword on that input um so it is yes Amazon tonight it is very quiet HTML not working HTML5 required attribute seems not working uh-huh make sure that the no validate attribute is not set on your form tag okay it's not it's not try putting it inside a form tag and closing the input tag uh so anyways well it is used in the form oh no I think that's what it is yeah you have to use it in a form yeah but I think we need hold on you can't just use the label look whoops um this person saying that I need to close it don't know why but let's see if that makes a difference I think that shouldn't yeah oh no no that isn't a form yeah interesting I don't think that these I think these self-closing factors like uh react um peculiarity absence of submit filled element in the form we have a submit yes we do we don't nobody as long as you've had it type equal submit to the button this says but we have an input python yeah that's an input as well it does work for some reason on W3 schools oh I had the same problem I was doing it on click on the submit button that was causing the problem Instead try to put on submit equals any action what in the form and that should work I don't know if I just simplify this as much as possible do not need a label run it works with Alpha label do any input types of myth uh I don't even need in the types of met I could just click enter in it and it does it so as long as it's in the form oh try this Michael as long as it's in the form that should do it uh so is it in form yes is it input I've just I need to be fair let's let's just very quickly double check something and that'll be crimber um newsgram HTML create screen great video thanks I missed the head from the beginning let us know what you think it works it works on Instagram so there's something there's something with us it doesn't work so form class game form that shouldn't do it um type number required okay that works ah seven years late but I have heard a similar issue I realized it was caused by refreshing the page by the form submitting as I set it to not Auto Refresh on submit I had enough time to see the browser actually require the input to be filled so if we comment out prevent default two is Brandy for like you said all along well like Dave said yes yeah okay but what if you need prevent defense we do need prevent default maybe then prevent default could be below that couldn't it then it wouldn't affect yeah I think this will be okay and I'll put something in oh okay so now because in the if statement that starts on line 13 if it is empty then you return out of the function yeah but I'm also mutating this foreign and it doesn't do that for some reason well it kind of doesn't need to because we have the validation now okay good stuff right what is prevent default do as far as I know it just resets the full I'm so confused now why no both of them work okay good that's what you wanted it's well wanted but I don't know why and that's confusing me maybe it was just a glitch fair enough anyway it's higher so now it's eight amazing well anyway I think we must actually do everything normally we don't but could you add a subtitle please when you finish the video I think after about a day they get added on their own yeah YouTube Auto generated but then normally it doesn't work with me it looks like I'm saying rubbish which to be fair so it is working yeah anyway um next week what's going on in the wonderful world of live streams we have it joining oh Rocky it's screen by designer is joining me on Wednesday for a design UI and ux for developers Workshop looking forward to that look out for that at the earlier time of 2PM because Rock is in Australia and the following week after that CSS animations Michael I'm glad you're excited thank you for coming along and sharing this session with us yes and hello say hello to new door oh hello yes this is Nick one of two of our latest editions yes what was the solution for getting the commas away and uh we used array we did this yes if well firstly we added validation onto the HTML so you can no longer submit it if it's empty yeah um and then we put this red question mark so people know they've done something wrong and hopefully they'll figure out what yes and if not HTML will tell them yeah but I think we did it with uh the joint so instead of rendering them just appending them to the end with commas we just rendered an array and did top joint with comma space I don't think that would solve the problem of adding comments if it was empty or is that normal what they're asking all right yeah yeah okay so to to avoid that yeah we just basically said like you you're not allowed to put empty strings in nice one guys so yes and uh here's the second one this is Fluffy yes this is Fluffy okay okay yeah sharing this great all right okay [Music] happy weekend y'all yes yes any closing thoughts Michael I enjoy your weekend yes Dave enjoy your weekend thank you for coming along always brilliant to see you all here if you enjoyed this leave us a comment oh thumbs up yes hope to see you next time oh yeah and don't forget to subscribe as well uh what will you kind of have to say this bye everyone foreign