Create a stopwatch with JavaScript

Key Takeaways

[Music] hello everyone hey everyone yes back again we are on a Friday wait for some coding fun yes although I do realize it might already be Saturday for some people which case all right okay then I thought you said oh I I just realized it's actually a Wednesday no I don't think it's a Wednesday for anyone okay that's good not on this planet really um excellent now we have double Leon yes again anyway um thank you for coming along to watch Shankar and Iha Joshua cyber auntie Bianca Cohan I think all the Emojis have broken it's always like that all right it's like YouTube emojis aren't supported in the Stream software that we use yeah you can see it on YouTube oh see your lovely little pink hands and things you're sending but oh yeah when I put it on here we get just the handpink waving I was like what there's only the YouTube ones though because luckily the traditional bunnies and tigers alone still support it yes yes that's good which brings me to our poll uh we run a little poll here every time we come on which is if you are new here please drop a bunny rabbit into the chat let us know yeah it's like it's running away and if you've been before hit me with that tiger yes yeah and the tank over there yeah on that you can also use the full body one if you're right here also accepted wow some targets hello uncomfortable chair is back yeah good stuff ooh a duck a duck a coding duck interesting welcome to you ten to half his pack and N oh yeah and if you're from Colchester it's an elephant yes just in case there is somebody else in course that watching us it did Alana's here um which is a nice reminder to um plug our little scrimba newsletter yep I was sharing this no I'm not so I'll have to reshare it one moment yes uh you can drop your email in here if you would like a Roundup of stuff we do at scrimbap plus some useful resources and exciting Tales of people who have been hired after studying at scrimba and all sorts oh and no pet pics security dog oh adorable adorable indeed um so go and check that out and if you're interested in whether people can get a job after studying with scrimba here's our Student Success page recently updated with January's good news a little more I didn't say yes you can check that one out as well um but now on to the coding yes so our plan is to create a stopwatch yeah Michael tells me it's nice and simple so that well I never said that I said a cheaper photo straightforward today I have Leanne told me that the topic for today's stream is coding stopwatch and I said if you like me or you like watching me suffer with time because time and me and coding time anything to do with time is usually hilariously crucially painful but this isn't really time as such because we don't need the dates and we don't need to know what time it is yeah we just need to count a seconds it has anything to do with like time dates and time zones and things like that my brain just freezes and stops working so and apparently man thinks those hilarious content do you not use these in your job as a developer ah I do but like I don't have to like code calendar features from scratch and stuff like that you know and I don't have to I'm actually surprisingly in my career I have actually avoided uh developing features that heavily involve like calendar appointments and stuff like that you know so I didn't actually have to deal that much with time zones well that's comforting Michael here has got to the level of senior developer without dealing with time and without doing much CSS so let's hope for us all well I mean CSS is fairly easy uh you just go into the back end so that's that cuts off that part uh but yeah time I suppose I just got really lucky um like I still have to deal with times you know but most of the time it's like you already have a predefined time with time zone that you have to do something with like an event happens a certain time that kind of stuff or like you schedule things but they're mostly on the server um so for most things people just kind of avoid dealing with the complexity of time zones so they just can't say it saying things things are meant to happen on this date and time in this time zone um again well even in the back end there are lots of features that feature time I just never had to deal with them okay thanks um yeah I suppose for you um right I'm almost done with a self-paced boot camp yay and hello that's so much yes scrimmer great camp um it is our boot camp led by girl you work through the career path yes um which teaches you everything you need to know to become a hireable front-end developer perhaps difference between the career path and the boot camp is at the boot camp gives you study groups some exclusive projects yes only available to boot campers and project reviews by experienced coders and the weekly live sessions so very exciting um anyway on to very nice okay also I want to shout out all the bunnies here look at them all oh wow it welcome to all the bunnies well welcome back to all the time the Tigers there's a double bear a double bear yeah and some people watching on LinkedIn it's all kicking off today oh wow really there's more than one person watching us on LinkedIn that's amazing I found out that um usually it's Frodo our colleague who watches on LinkedIn so okay it is other people right okay cool um yes anyway so here we are on screamer.com new and you can choose from various templates you can have HTML CSS plain or HTML CSS and JS um with npm yeah select that with npm can you not put npm into the plane one if you wanted it I think it requires like a wet pack setup ah okey-dokey I'm not sure we're going to be using npm today but just in case you know to make things easier to index HTML um is there yeah there you go see it says script type module so it already kind of like so you can import things a little bit easier because remember a couple of streams ago we actually had to suffer for that a little bit yeah yeah because [Music] um most of the time things are already at the top of that project so you can't really have to deal with that kind of setup but there you go you change the title no just HTML cycle yeah but that changes title on the tab if it's in this yeah it is the thing that does that isn't it yeah but you're inside of us correct yeah so that's why it's not doing it so yeah I just wondered if it would do that yeah and there are no tabs on the mini browser yeah yeah the little uh detour there um so I think we should start with the JS today should we I don't know I think we should start with HTML actually today's um we need to yeah so we're coding we're doing that here start so you need three buttons stop stop reset well I mean you could have one um Dynamic button okay we could I'm not saying you should okay oh yeah style stuff reset functionality a button or not you know we'll decide that later well I guess we need at least one button unless it just runs on page load um my friend when we're at University she had a kettle and it didn't have a switch and if it was plugged in it was on oh yeah I know the Castle's like that I don't know how we got through the electrical safety requirements of the EU but there we are a lot of cheap hotels have uh kettles like that really yeah you should plug in and that's it once and I put my plate or something on the kettle switch by accident right and it boiled and it just kept boiling and then I returned to a sauna in my kitchen yeah yikes dangerous things guys um anyway reset stopwatch and stretch go relax oh laps so a lamp would be like you know you do how do you lapse on on a stopwatch actually work I I know I have them on my phone but I never use them like yes kind of hard to explain it's not much yeah so let's see what we have online spell watch okay that's good okay okay I don't think this one has laps okay that one doesn't have laps but if it did the laps appear below and this keeps counting up ah so you I press the lap button and it shows you like the time it saves the time underneath and starts a new stopwatch no it doesn't start a new stopwatch it saves the time of that lap but the whole stopwatch continues is that the same thing I think so I think so too oh so it continues going but it saves the time uh-huh yeah basically that's what we're gonna do so you don't count it says fan found music and that's a very generous description of this and but yes yeah that's what we're aiming for okay um in that case well let's just make HTML okay how much styling do you want to do amazing stopwatch yes um styling I think we should do the functionality and then sort out the styling okay but to do that in that case I need this see with an ID of time I guess hey well it would be a stopwatch now I like the stopwatches for the whole thing and its entirety with the button yeah cool I got a question time display oh okay just call it time I thought time display is actually more descriptive okay um right this can be improved but let's let's get a start button in well and I think we should stop our reset where you want to put them all in yeah I can't push the boat up okay you don't have three buttons it's oops no and then here's the last match of work depends I worked with someone once You Know Who You Are who is always calling me off for using the mouse like ah it's so slow if you use the mouse you should just do everything on the keyboard all right I think I think um yeah some some things are quicker one like I know I knew some people who are really good with their keyboard shortcuts but also I knew strangely an awful number like hopefully a lot of number of people who were really good like I remember one of my first managers Phil he was really good at coding well he still is uh where's him yeah I haven't thought he was spoken to him for ages but he was really good he impressed me like how meticulous sounded a really good stuff he was but he never used shortcuts he was like well not not as much but most of the time he just used the mouse and like he was very slowly methodically just moving about the code editor but at the same time like the day passes and he would be super productive even though he would like you know it's like a proverbial hair and daughters yeah he's really good writing code out even though he was fairly slow with it then most of the time just the stuff just worked so yeah um height 100 VH hopefully that will work um I've not scented everything Airline items okay Fair body Images H1 probably don't actually want that do I um I definitely don't want that what no that should let's see well I'm actually I should have replied to H1 it should have ah okay that's the issue it's um not centered text align Center oh right okay that'll do for now so recap that's good Elizabeth the timeout as well and what just hard code some yeah okay fun okay so I think we need to do the same for repeating right I mean actually no we can just put it here we go we can lose this but I think we can have um yeah hey fonts nice okay and okay yeah apparently that that looks like that was smaller not much I'm gonna call it stop dot watch oh all right oh actually this weekend like you know oh that's interesting other um by domains is that actually risk your domain Google domains yeah fair enough why not stop don't watch why is that stop.tech Stop store I don't think dot watches stop sign dot watch so don't watch it's available as for 25 pounds a year yeah so that's good stop the watch is available for 51 000 pounds bargain but stops dot watch is available for 8 pound 22. wow stopped our shop stop.cloud Stop store wow startup watch is available I mean a part of me wants to go and see what's what's there but also because apparently it's a DOT watch I'm not entirely sure what there might be so I anyway um see what says I think you forgot the crocodile thing Avatar the pig did I but just in case whoever you are stopped up watch we have found that that's the main mistaken but you know if you want to host our stopwatch okay for for nothing we we don't want to buy you 51 000 pounds right so I think that's oh yeah it's there now wait the angle brackets I think they're okay yeah I think it's an older message thank you anyway nicely demonstrated with this I'm so hyped so Snow White and I started learning JavaScript on Monday oh correct I'm excited to be here oh yeah all right good for you Andrew Harper says H1 takes the line Center yes okay so that's that okay I thought we have the minimum viable HTML for stopwatch things yeah I also think it would be better if this worked oh wait no I can't do it on there I need to oh I see right like really finishing touches yeah so we want to grab that ID time I guess yeah so probably don't want to make it Cornerstone I'll make it let because we'll be update in that text moment link to the script yes yes here it is very lyric stopwatch don't watch nice um yes okay hurry up yeah I would say oh sounds good I think you're a guy all right and we can yeah anyway uh sorry that case what is it uh looking when I get element by D and we are grabbing time um so basically we should have um okay with an idea of time and then we've got in a text they should give us the string with um you know whatever we already covered here okay cool uh so in that case so basically because we have to run the time every well whatever second I guess uh yeah so in JavaScript that would be is it set timeout is it basically if you want the difference between that and set interval then set timer I can never remember so tonight execute code after X seconds execute the code every yes second so I think we need the interval one then yeah we probably do scheduling we set timeout is yeah it waits and then it doesn't sets into all uh yeah it was this thing somewhere set interval the internal scheduler will run over so you start uh uh but set timer guarantee is a fixed delay okay so so in that case if you need the code to run at an interval you have set interval okay yeah okay I mean that's one of the few things in JS that is named quite well like a good doctor get out of my body it's pretty pretty act that's not bad yeah candy coat says what's that yeah yes oh watch okay in that case uh and we know that okay let's go to the doctor section before the finishing easier uh call the functions specified intervals in milliseconds okay that's good to know uh then to execute the function only once set timer method instead okay fair enough to clear an interval set ID return from the Intel right so this will be useful if we want to stop our stopwatch so we will want to clear the interval so use the ID returned and the idea returned is basically this okay yeah we use um clear interval clear okay so okay my interval uh so cards employee said oops set into all and basically that would be start function and we want to run it let's say every second for now that would be a thousand milliseconds and then just so we don't forget player interval intervalid so basically we run it for like one second and then let's start then a function you need to write was that yeah so this will be this will be a function that we need to write so in that case I'll also write hey says remaining no running hello so we can actually just write this stop button oh anyway yeah let's not get too too much so we have set interval clearance of Australia after that and then let's write function start which is basically what what we're doing yeah I think we need a variable okay this is where well we do need interval variable if we want to stop the stopwatch so I just write it out so I don't forget that we actually need to do it um I mean we need a variable to store the number of seconds or milliseconds yeah and then what does it say set in 12 text milliseconds required functions to execute execute interval if the value is less than 10 10 is used interesting so you can't actually do it in a milliseconds well you can't have it less than 10 milliseconds yeah so it has to run at least 10 milliseconds until so how are we going to count milliseconds we're going to count them in 10 increments well to be fair we're not actually count in the milliseconds because there are a thousand milliseconds in a second but we're only counting like a thousand to knock so we we're counting hundreds so on the iPhone stopwatch yeah it's like that so you're not actually counting milliseconds your camera said every hundredth wait a second and we never noticed actually are you I don't know yeah because when this becomes I think so yeah I mean because when this becomes nine you turn into a second so yeah that's right you're counting every hundredth millisecond you're not actually counting every millisecond what if I need to count milliseconds I mean in that case you know you're going into like the Olympic level of precision I'm not sure that my personal lapse or whatever I'm doing you know I mean I don't actually cancel I counted as like one Mississippi to Mississippi and that's kind of good enough you know this has been an eye-opening session hasn't it anyway on we go well I know in that case yeah basically what do we actually need to do so setting tool doesn't actually count the time for you but it runs it at every interval so what we can do is basically in that case creates variables millisecond seconds and minutes um anyway because we're running it every so we have already Justified so we don't probably want to run it every um millisecond right even though the stopwatch kind of presumes then that's what we do because we only display every 100 so we can kind of just run it every hundredth right and at the start I'm gonna make that much difference we just to the performance Yeah iterated by one so let's try to remove the okay yeah but that's not gonna show anything is it uh yeah because we also want to add well we need to so we want to are you just trying to see if it's running we just cancel log Ms in the start function but I think start is the wrong word because that it's the function we use all along it's not just the start so I think we should call it count whoa I'm quite surprised that's not breaking things okay well it's working yes so I think I should probably need a rate Limited no I think so foreign okay yes wait look at it guys okay uh it clearly works okay it does work yes they are very good did I okay so I think we're good no I think yeah I think we're good why is it not stopping because there's no limit um why is it not stopping because we have a clear interval we're not using it I guess yeah we're not using it exactly we actually just and we're wiping it off so like it's let's let's wire that up um so it will just run forever until you tell it to stop with clear interval yes so I will actually uh Can't Stop I don't get an ID foreign I just create a little bit more space on the screen okay and then listen there and okay yeah kick on click on that button I just want you guys are cute does that work Maybe nothing has been logged so it's not running now so that oh yeah I think that actually executes it yeah okay so because show that again so what happened is because once this JavaScript has passed because it's just written there this function gets executed straight away because I'm basically calling it here but what I need to do is to say hey when you call that function when it's actually clicked call it why was it not running before when it was above then so because this um so it's like you pass things as a as a reference to it oh okay right like here we pass function we say hey when you need to do something you have this function to run but as soon as you use the brackets you say call this function and basically you know when the event listener is added it calls it but what I want to do is to say hey here is a function for you to run when you actually need to be called okay so let's see if the stop button works yes it works okay cool but that wasn't 2100 milliseconds was it I think it's we need to tweak I think that's all right yeah why so that's basically that basically means two seconds no that means two seconds all right 21 yeah rocks there's a thousand yeah so ten of these is a second so ten times we run the interval is a second I think this is confusing we can just do this can we maybe not okay I think you have to give it some milliseconds yeah maybe that's something else you can use seconds in then oh yeah that's the delay on animation I think it looks like you have to do it in milliseconds okay but we can do that if you're running every second now yeah see that makes sense okay yeah but we don't want to do that memory well because we want to see the millisecond numbers update okay [Laughter] right maybe do modulus um if you want to work out I think this is going back to we're talking about if you need milliseconds yeah once he's well for example in Formula One what in Formula One you need milliseconds honestly I watched Formula One a couple of times in a pub and uh again I didn't go into great detail about it but yeah I would imagine it's like you know racing and lots of money and stuff so I suppose it really matters who like crosses a line and what order I mean that's literally the point of racing right if you cross this is the line in what order let's up update that um uh yes so let's let's update the Dom um so we do have the time and in that case we just have yeah so we do want to time Dot uh in a text equals let's just um yeah we like we kind of want right yeah I mean it right we want a minute oh but now we're going to run into that problem we always have where where I've had it with zeros yeah we'll become clear in a minute what I mean okay let's see what that does anyway uh yeah but okay um it's all right yeah but then but that's okay that's okay so no no no look okay okay you can't because when it gets to 100 is it going to start counting the other ones properly what this eventually but yeah see it's not doing well that's already 12 seconds yeah because we're only displaying it as milliseconds So currently what we do is like when it swaps into seconds and minutes and stuff we actually not a lot of adjusting it correctly so I think we need to do so you do add a millisecond but then you basically go uh uh where is it so milliseconds if I no that's so that number divided by 10 is the second what are you trying to do get rid of the last digit so it's only ever shows two I just round it what say that again what are you trying to do I'm trying to display seconds okay but it exactly what are you trying to change at the moment okay if you probably just modular yeah that's what someone said I want to point after this yes who finishes the first pint in milliseconds yeah yeah oh yeah that doesn't oh look Muhammad has an idea date to Locale string time style medium oh sounds promising what date till the cow time string yeah but and U.S Time medium uh uh kind of yes but how do we pass our format like our milliseconds and other stuff anyway that's what that answers I think that basically that that works out the padding which let's get to it once we get to it because uh I'm about to stop brain fighting on the on the division of these numbers okay um uh as usual we make conditional statements oh no I don't think I want to monitor like that why does that do that I was hoping you tell me that okay no yeah s equals Ms divided by 10. but then Ms and S would be the same wouldn't they why am I actually doing this what oh wow what yeah I didn't get it what is actually going on Michael I think it's line 11. well yeah but I don't understand how oh just to hit it then beep okay gone take I should just create like let um a quick whole time right the total time yes I have some ideas like um okay in line ten what does oh no it's one oh oh okay sorry no okay sorry let me just uh so we'll return to this question yes we will uh so every I need to display so that will be like hundredth of a millisecond right but what about math.floor that's what I meant when I said we should round it but round it to what well I mean I guess it would be math.round so guys either are poor down depending on which is if it's four it rounds down wait uh I need to write this out okay seconds equals special time divided by 10. right and then minutes would be seconds divided by 60. so Michael to fixed method rounds the string to a specified number of decimals I think this is what we need not just padding that does not display correct correct numbers no this isn't padding they're to fix number two a string and then rounds it to a specified number of decimals but that will do the maths of converting milliseconds to seconds to minutes so it won't take the total of milliseconds and convert that into minutes seconds milliseconds he won't do the breakdown for you that's something you need to do yourself right yes yeah so okay that's what I always as I thought I remember we were doing the other thing I was brain Fancy on the same thing I'm fat really seconds two seconds so the we divide the do we divide the total by 10 we get the seconds but I don't think we need to divide it by 10 I think we actually need to actually maybe maybe yes because every hundredth we add one where we get 10 of those okay you divide it by a thousand to get this seconds so you must let's see what happens is not defined sorry okay right so yikes seconds is it is divided by a thousand I think no but we run it every every hundredth well done we can't we can't run every millisecond because the minimum is 10 so you'll have to divide it either by 10 or 100. well what difference does that make just run that every second yeah maybe that's actually yeah maybe that's actually gonna be a little bit easier so in that case we get the total isn't seconds okay it's seconds equals okay seconds equals total for now right yeah in that case it's a bit slow but if we take minutes we'll be crucial modulo 60 right okay um well yeah no you don't want module ID you're on divide no you want the whole one if it doesn't modular give you the remainder which is not what you want ah more process but I probably want floor division what kind of division uh anyway what does the chat say what division um operator do I need we'll see we'll come back to that but I think if you just do this let's see what happens right well that's what happens okay so then we can round it down you can't round it down it makes no sense yeah you need to you need um I think you need oh no my calendar's here I know modular gives you the remainder yes but we need the whole math dot floor total divided by six thank you yes same time to save the day all right and floor it it's a cyber auntie oh hey says Amber if milliseconds equals a thousand a hundred increment s and reassign Ms equals okay so considering that we've just yeah that's correct am I just done at least for minutes can you specify which what I was correct at one point thank you I think now we can allow I think we can we can go back to this because we we've done the minutes so we could use the same logic uh but this time is by 10. and then remove that is it no yeah okay okay I think I think we're on to something oh but yeah that looks like it's right but this is the milliseconds but we've put them in the wrong one yeah you must find Ms as yes um and this is and this is the seconds yeah I think um why is it oh but this is with the thought yeah how did that happen also we need to no no yeah because it's it's by Mojo milliseconds but I divided by total what oh but I I don't clear I haven't played that with the intervals see why is it going around no man I think it's counting it's counting tens of seconds why have I done that um you're counting hundreds of seconds start with MS to S to M to hour stop so you know I think total is not divided by 60 because I'm counting every 100 milliseconds I'm running this every every hundredth so every okay so now it should be a 1 and 40. Michael Amber and Keith I'm suggesting that maybe I should actually do I think the issue is around there yeah right and that should be modulo 10 to just give me their remainder that looks promising but no more joy actually maybe I just display the total so easy to get lost in the MS sex stuff you're telling me uncomfortable chair every 10 milliseconds should be one second so what do we need to do uh yes m equals math dot floor total I mean we're displaying second by 600. we're just playing seconds correctly so I think once we do the same we can just play minutes correctly now as well 100 milliseconds is one second it's one thousand because Millie means thousandth uh yeah so yes yeah timeout um milliseconds display okay go to the set timeout Docs oh this is way harder than I thought it would be you and me both sniper auntie uh we already changed it by the time um I ready I'll come in so should we change it again what what's the time I'm doing set timer box delayed for one second uh literally just quickly what is going on with my milliseconds out there because I'm displaying the total that's why this is the actual total Okay so soon we are going to have to go into the minute am I actually displaying that correctly yes I am so maybe I do actually want to display the remainder oh I think I've just done it right on time right yes okay I think I've done it yeah because it goes to number nine right and it flips the second and then it will flip into a minute okay so that's that's the code okay so to the original thing that I wanted oh please don't change it gotta ship it okay let's see what it does when it could I think that works yeah 10. yes okay I think that works when that middle one gets to 60 then that turns into that that's crunch time okay what was that thing too fixed get push and enjoy the weekend love yeah no we're not they don't do anything we need to see the minutes yeah okay ready oh yes wow foreign kind of but we also need to reset that the middle one to zero but the end one is already resetting to zero I think uh so don't you actually instead of divided by 60 don't you want to do modulo at 60. whoa no I don't it kind of worked until the first minute and then it it's like too much yeah but then you use a conditional I think to do what to if it's more than 60 you set it to zero again I mean okay oh we're typing a board controller oh I changed the language the second calculation is not correct the second is incrementing too fast on the screen it was in milliseconds though would you actually mean the middle one yeah whoops I mean these some milliseconds and these are seconds I think they're incrementing all right 48.9 no actually they're not yeah they're going too fast ah just seconds modulus and here's a ternary operator dead just back um react let's use effects plus youth State save my life when creating time before online examination maybe I actually just do like milliseconds why don't you count it in really results that's what you do yeah yes try to render just the number of milliseconds on the screen foreign all right so that's the milliseconds so I need to now we can render that again divided by a thousand to render the seconds don't worry about the fact that you're showing both for the moment so foreign yeah but that will be like um no hand that's not if you divide by a thousand that would be 0.4 but you so you need to divide it by a hundred okay so that would give four but it will give you 4.61 so you need to Mark don't floor it ah okay I think yeah I think I think say what that does creeping on it full banana six Mississippi so Mississippi hate Mississippi yeah okay that that's that yeah yeah okay cool cool and then the minutes then in the minutes is 60 I guess yeah I think the minutes are correct well it's wow that's a bit slow to test it but yeah okay so now we can bring this okay one two three I said okay okay all right I think I think we're on to something yes some tigers in their chat oh okay so what you were saying um oh yeah but if you do two fix now this is that you were suggesting to display the padding anyway let's not worry about the panning just yet yeah and then we're also like almost ran out of time so uh yeah but that kind of works okay let okay so what now well now we just need to wire up the stop button well I don't know if the minutes works yeah they do because we we saw them well anyway let me just quickly uh cause all right then yeah sounds good hello chat oh some conditioners going on in the chat oh that could be good which one various suggestions so start button uh listener click if you want to start I guess let's see [Music] okay that's when you need a conditional I guess to take it back to the to zero yeah okay uh so in that case sorry it's start the interval City why are we not using conditionals but we can't we we don't want to load it on there we want to do it on the start of a button so I'll just create uh let him provide the and we will use conditionals set interval and now I've just move all of that yeah all this stuff it's a perfection within that start button something that should be called count or run uh I guess anyway star stop no yay you give it the stop button is actually pausing start stop but if I click Start again yeah yeah and stop actually Uric is actually pausing but then what would stop actually how would it be different oh yeah we don't really need stop and pause no we were actually one reset it's not a pause yeah Scott Barton should clear the yeah reset yeah so in that case const research what I'm on the control shift f word you could form that code inside the screen what Ctrl shift f baby come on shift F on a Mac maybe you have to select it and then it formats it I shall ask around oh look this is my timer for the basketball app and it works let's quarter minutes equals ten so that's starting time 40 minutes time 60. Huntington timer let minutes okay not the floor divided by 60. let seconds equals starting time modulo 60. uh like quarter minutes Ah that's for the basketball operator my floor start time is that what we did starting time divided by 60 let seconds equals starting time modulo 60. yeah but that has the same um kind of starting time modular 60. I don't think we want to do modulo 100 though yeah no you press stop what anyway so that's future Michael's problems uh and then function so basically to reset the whole thing where we'll just write a function that equal equals zero be enough start then we need to update the Dom wouldn't we yes yes delicious the first report because that should just be fat let's go reset start stop reset start reset ah okay that actually is resetting it isn't it yeah it keeps running because I need to yeah clear the interval actually I should probably so really you've just accidentally made the lap function yeah yeah actually yeah I actually have so basically yeah you don't clear the Intel and you don't reset yeah you don't you don't put the total to zero and you don't clear the info you just kind of like just refresh this thing and keep it in a separate Dom element Michael is there a reason why we're not using conventionals I really want to know uh yeah I just didn't get around it yes but the the the legitimate reason no so we would use conditionals to um yeah I think I would why don't you just put it in if s equals well it's greater than 60. well no it's greater than 59. um Ms equals zero is that right no I don't I don't think that's right because you kind of want to divide it by a hundred but then you also want to uh or do you want to modulate that by 60 and then divide it by 100 foreign what's the remainder function oh that that's what we do explore yeah but once we get to 60 we want to not on the milliseconds yeah yeah on this so once we get seconds to 60 ah so if you click Start twice it doesn't like that so once you get 60 then you have to uh 100. then you would um Perth zero plus seconds so you're saying that we need to have any I think so but what would be what do you display if that's the case zero plus seconds beef so when seconds are zero plus seconds okay you don't need a condition up yeah I think you can just do like a modular or something that sounds some kind of clever oh yeah so it must flow a total by 100 Mojo 60. uh yeah of course because you get the remainder after you've divided come in apple is pretty much all that yes but I don't think we can wait for the whole I mean we can wait a minute well in the meantime yes we can wait a minute Snow White inline 10 what does plus plus mean I only know triple equals it means you won't add what's line 11 now about plus one plus one plus one really yeah that means plus one so it looks like Amma has saved the day and even given an hour I should just try to memorize this code let milliseconds Mojo yeah floor totals six thousand six thousand oh yeah okay so he's dividing the error from the total yeah that's actually a good point please don't reset it now yes but uh and yeah okay so it didn't work for the minute because that's what we needed to do we needed to yeah okay but the seconds have gone back to what we want yes thank you nice one so we've learned from this again it's I need to torture me with time uh because I really struggle with dividing things by 160. I'm really good at multiplying things but I'm just useless and devoted things or to know what to divide by to get like seconds and milliseconds anyway but you had fun thank you all for coming don't forget to hit subscribe so you can catch the next live stream I don't know what we're going to make yet so um those are something you have an idea does stop button work I hope so I think so yes yes what to make next drop it in the chat or the comments so we've been doing this for over a year now so we're running out of fresh ideas aren't we I was having an idea of like automating Excel spreadsheets with a JavaScript how difficult it sounds exciting to the chat like if you if you think it's exciting write a hundred emoji almost nobody uses set intervals at all as well really share the code in the chat yes we will in the comments below I will drop a code very shortly yes but obviously I can definitely see that I am one of the few who might find uh oh no look at that actually uh at least two other people who are actually excited about Excel spreadsheets come on what's the best advice you ever received well don't deal with time zones or time and to be fair I kind of got away with it until I started doing scrumper streams brilliant yes on that night have a wonderful weekend I don't forget to keep coding yeah enjoy your weekend everyone [Music]