Live-code a JavaScript pomodoro timer with us | HTML | CSS | JavaScript

[Music] oh boy that was stressful had some issues but it's fine now we're fine oh that's 51. all right wow really late start which is very unseemly apologies for that oh no very unseemly very um let's see who is here in case you're wondering michael is stroking a cat oh yeah here he is daniel lachey told you jammer how long have you all been coding how long have you been coding not long not long no three years i reckon four years i can't actually remember yeah i'll need to calculate it but i can't be bothered diamond bot essa is here javier yes oh it started four years ago there it is i hope the mic's on uh yeah it seems to me alfonso alfonso is sending a tiger and you all know what that means yeah well some of you might not know if you're new here put a rabbit in the chat and if you've been before put a tiger yeah this is just for fun we don't use this information maybe we should although i don't know what for yeah no worries hello guys yeah so share your screen hello uh kate at the mall and and tigers who from india a triple tag oh yeah quadruple i don't know how many that is a lot of tigers yeah amazing welcome welcome everyone bunnies and tigers that's right okay great to have you all here from uganda wow yeah wow look at this one beat it ash k chop hard yeah exciting so michael you have seen uh what we're doing today haven't you oh yeah i saw yesterday uh in the community meet up like usa and there's a pandora clock yeah yeah wow for those of you who don't know us we are rhian and michael from scrambler scrimba it's a place you can learn to code and do challenges such as this one and i'm liam and she's michael yes that's right but someone actually on the phone the other day when i answered asked is this michael i was like does this sound like mike i mean you never know amazon delivery guy told me today that uh here's your puzzle yes so here we are and i have made a plan actually i made it a while ago i don't know when uh but i went to go and write the plan today and it was already there so yeah amazing thank you past leanne not often i plan things far in advance there so what's the one here's the plan zoom in zoom in again there's no shortcut for this there is oh there is yeah yeah shift command full stop how intuitive anyway wire up buttons wow add sound effect oh are there sounds no we have to find them yeah we'll cross that bridge when we come to it okay indicate what type of time slot is happening eg by lighting up the corresponding button interesting show remaining time in browser tab oh wow i don't know how long i thought the stream was going to be when i wrote this add a pause button oh wow periodically give surprises eg a cold stuff sound effects yes can i see the cat please uh when he comes back yeah he's he's wandered off he's a bit grumpy yeah he's got his own mind yeah his name is pumpkin yeah hello alex hey yeah come on bunnies and from ph uh is that philadelphia do you think uh i don't know that is nice yes could be anywhere lots of bunnies and tigers okay michael we gotta get on with it because there's lights today look at all this yeah i know you you've planned the whole like two week sprint on this it's gonna be one long stream from wire up buttons so what have we got buttons right work btn short break btm long break btn yeah what do you think of my names uh i still don't understand why you can't like you can't be bothered just below button event listeners i guess yeah yeah yeah so well i mean we can't know the drill right grab the ids uh grab the buttons link them all up together all right const yeah okay work b-t and people's document dot element by id yeah and then work atn give that a go yes that has worked so now i can copy this and do actually this short and that doesn't work as well actually holding option tap and then selecting another space where i want to go yeah exactly uh so this will copy here to be long break btn and i'll copy all of this actually long break btn let's give a go short great btn yes that has worked oops long break great again it's also up and running really i'm so used to query selected yeah i don't tend to use query selector do you um well to be honest i don't really write vanilla gs4 uh front end anyway so i think it's just as good yeah maybe it's better no it doesn't matter no yeah yeah i use query selector for arrays and get elements for ids yeah you copy them too i thought you were so pro and they just get typed automatically wow uh i'm not sure if you can do that in scream but can you yeah maybe you can maybe yeah pumpkin created in the language and then syndra took it it's true the secrets out crew is elected all yeah that cool actually i did use it earlier today and that caught me out for a while i am watching we'll code later who's like me oh good exciting yes afrohealer many tigers um if you do this challenge which i suppose i'd better tell you where to get it here on the weekly web dev challenge page you can find it if you do it and share it on twitter uh with the weekly red challenge before monday and the details are in this scrim it will appear here what's the deadline on here as well bsd so you see we have lots oh wow tomato tastic timers oh well look at that one that one is like analog clock wow that is pretty cool yeah so we will look at those on monday yeah anyway continuing so what are we doing uh event listeners i guess uh yeah yeah let's do this very annoying that we have to do three separate ones but anyway let's just carry on curlik and start timer i guess uh sure yeah and then i mean they all need that don't they yeah short break btn long break btn okay start timer is not defined yes function start timer boobs console dot log whoa wait wait okay yeah good news cool okay awesome so in that case uh so what's the plan what's the point well i can't show that unless again what we want to do wire buttons well they get a tick well they also have to okay to start timing okay well we we can do that we can do that uh oh to start the the timeline on the screen right this bad boy that one yeah yeah right uh okay i do that then okay what do you reckon yeah let's do that const um i don't know whether to do it in here or at the top maybe it doesn't matter const [Music] time because i feel like this is wrong um oh what are you trying to do i need to add the time javascript time no no countdown timer well when you say you need to add the time you mean you need to grab the what's on the screen the numbers on the screen i think that's what we need to do first yes so time display so let's grab let's grab that grab this put that in there yeah time display yeah and then this kind of display uh yeah and close why doesn't it yeah time display okay so now we can grab uh let's just grab time display and show number five when we click a button yes that has worked yeah so now on click or start timer victor is saying oh no oh no victor knows something we don't do i like query selected all for multiple elements because you can use array methods right after instead of converting from html to an array yeah nice yeah pretty neat this challenge made me use set interval for the first time yes we will be using that finally understood it that's good that's good because i still don't understand maybe well after this uh anyway yeah time display equals not all right equals not equal yeah equals five so i think the issue here is that it's a text assignment constant variable again did you say that i feel like i'm missing something yeah because it's it's a text so and you're assigning a number to it okay so i think you but you also need to update in the inner text no michael i this has worked text content yeah you can put a tomato in the background i like the tomato ones we've had they are nice but let's get it working first yeah okay right what next michael uh well i don't know what's on the list making we're still on the first one michael oh so make make the actual countdown yeah [Laughter] uh okay um so how do you want how do you want to do that do you want i suppose it's easier if you store the time in seconds and then you convert them on the fly i think that would be easier well first we need to set the times don't we so we need these times yeah so let's let's start with with work timer so that start timer let's just assume that it's just for work so 25 minutes const work time equals 25 yes okay yeah why not it's 25 yes sorry i'm late i hope it's going well for us yeah we're not going yeah it's not getting disastrously wrong just yet okay 25. uh but i think we cause work time i think we should convert that into save okay we should convert that into seconds i mean okay yeah that isn't going to work because it's not it's not a number is it so anyway let's just do this so we should probably mark 25 multiplied by 60. um why are we doing this because you don't need but uh by 60 anymore because that's that's going to give you seconds because yeah yeah so that's going to give you seconds right number of seconds yeah that's right so what we are going to do okay so now to display it properly what we are going to do is we are going to set it to put let's probably have a template literal this is probably just easier to probably have a template literal where what we're gonna have is we're gonna have the former use text content got split sorry okay okay uh and then what we are gonna have is so for example if we have seconds so let me just quickly try this out if we have uh you remember oh well it's let's just say this is 1500 right so now we're going to have is if we divide that uh what's the operators in english language called like when you divide modulo oh yeah i think so uh the one that looks like percent yeah can you move that a little bit yeah perfect and focus on the yeah now here can you hit the mouse on the screen so i can type yeah come on i don't know what like i should i'll just take the mouse okay yeah you do that i do you know i reckon youtube earlier sent me this message saying that it didn't know whether i was over 18 and now i can't see i mean look at me now i can't see the chat and i think that's why which is a bit annoying i see interesting okay so i'll just i'll just timeline this uh what time in seconds the modulo 60 will give us leftovers in seconds so for example if i have 1499 no i think modulo is the leftover isn't it so if you modular 60 is going to tell you how much is left after oh i need to press the button 99 click okay so 59 that's going to give you a left over so work time in seconds modulus 60 this is going to be our seconds what's the one that divides it by whole numbers and leaves it is it like floor or something um yeah yeah so mother floor whoops i think i need to divide by 60 yeah and that's gonna give us the minute that's going to give us the minutes there you 24.59 which would be right because we know that 1500 is 25 minutes uh 1500 is 25 minutes ah this is this shows a zero but i want to cut it out to two zeros i feel like there is a way to display i mean let's just leave it at that for now uh but i think there is a way to make it two zeros i can't remember how yes it's like a time format thing she really doesn't want you to butt in my cup that's not fair if i left is that what we've done i'm not sure anyway let's uh continue on um so yeah yeah anyway there is a way to formulate it but let's let's keep going that's like a small one yes so now we need so just make it 25 uh times 60 because that's more readable yeah that's more equal 25 times 60 and then this will be um oh i think you need the yeah then you will need different kinds uh uh do you need different functions you do need different functions i don't why not because i've done it before and i didn't i'm looking at my reference code i think i think you should have different functions no michael look this is what i did before let aloud time equals number of mins times 60. yep ah get rid of this and then we can do um [Music] where's your number of mints well that's what we do a conditional form what oh no they do have separate functions yeah come on let's have separates let's have separate functions yeah yeah no look look this is basically what happens function does it type of countdown equals work yeah and then in here if type of countdown equals do you think that you're making this a little bit more difficult than it needs to be i mean i saw your approach yeah you just have three functions and that's it then um you do numb of men's is twenty-five numbers 25 okay yep uh you need to declare it i know i'm just thinking about it so then i don't know no you need to say no of mints because in the functions i'll be fine it's it's yeah that name of mints that you're assigning it's not defined anyway just yet i always say error unknown error because type of countdown is also not defined i feel like you're making this like really more difficult you have a function with a type that tells you what it is okay number of mints is not defined okay so then you might be all right yes because you're scoping it is it on line 20 yeah it goes in the night night unknown work time in seconds is not where is what work um you just deleted that variable no yes you did it you called it allowed time now okay it's fine there is another one work time in seconds yeah okay well it took us a while to basically what get from working code back to working code yeah well that's deving for you [Laughter] can you use a conditioner yeah i reckon so i hope so let's continue why because michael is half past really yeah that makes it longer no it doesn't right else if yeah what can you explain to me what's the point of having these types so we can tell which one it is right yeah but we can tell them to have a different name [Music] oh that was a productive conversation let's discuss the architecture of this application i'll give you another bracket online i know it's okay come down come on you're getting into this like you know the wheel spins quicker and like you have to keep up yeah okay you don't need an else here then i do i think you have another function yeah yeah i think if if i'm going with this absolutely terrible idea [Laughter] how are you oh you're going to be calling start timer for instance this should be short break well it's not long break it's 15. oh yeah that was right oh jesus this is the real unreal in your head it seemed so robust and now it's like it's okay we need one for both of them yeah we'll create another function this is structural break function man jesus is going to be full of bugs i could tell it's fine make it work and then i impact it this now says long short break where help yeah start long break i think i wanted to say why is it doing that because it's all calling start time all of them so i think what you want let's just for everything the next one you should kate and i should be the backseat well i wanted to code this one but okay we can try your idea uh yeah okay now can we now we can okay um okay so yeah i think what you're doing here is yeah that's fair enough okay it's pants looks fine i think what you you're planning to do is pass an argument here right so what you want to do is start work and then you wanted to start timer with type of countdown pass passed in i really i really don't know why we have a separate name for a function and then type of conduct well you do what you think is best i think so many people are going to be so confused well if he confused them then can you close the console ah yeah basically yeah what you're trying to do is you have a start work function yeah that you're gonna pass into here that then starts a timer passes the type of countdown and based on the calendar you want to determine which number of minutes needs to go where right i think what we can do is if you just remove this and you say here 25 you can call it [Music] start work okay and then just you know just simple and then you can have start short break because you already have these values counted in and the names that you have they are you it like what's one of his clauses what is the point of f classes i struggle with that so she can't use on buttons so i look for another way we need two mouse yeah and then you have start long break so sorry this would be five and this would be 20. and this would be 15 right so let's just move this function below so it's a little bit more 25 15 5 uh so you can delete all of those starting functions that yeah uh until i'm 24 from 9 13. yeah and then i'm just going to delete these types i i don't i don't see like you're basically creating like a switch inside which is fair enough but why have it if you can start a little bit simpler and then you can see what's repeating here and then we can refactor that but stop work it's that long break and then ah no this is a short break so much nice tear around yeah so short break and then long break okay so now work short break long break okay we've got these being displayed um now what we see is it should just be function start and then you pass in an argument yes don't make sure yeah exactly and that's the conditioner yeah well not even that like you see allowed time so you just say so the first one will be time i think that's it so let's just rename this to timer time there you go uh i think bob has taught us that you can do basically an anonymous function that's an argument use a function here and now you can just say 25 here really um right let's try it stop timer 25 start timer time and then this will be our rendering logic okay that worked this has worked so now we just wow so now we just do this 15 5 it doesn't like it it's missing a curly bracket oh yeah i'm just done thank you very much and now with that so let's say that work draw break one break so now we can remove this code as well okay so now we've got the timer function with the times easily there you see you don't need the switches and the rest of it because they're already written there the rest of it yeah and then we do set intervals so the next thing we need to do is we need to somehow start the timer and every second we need to redraw the time so yeah let's how do you set an interval like this look good yeah let's set an interval keep this separate but every one second every one second we want to redraw the time that's doing something so what we want to do is yeah aloud time minus equals roots minus equals well equals you need minus minus just to yeah just to subtract one and then can you just cancel off yeah a lot of time yeah that'll do okay so let's go yeah okay so it's going and at that time we're at every of these we need to be redrawing it so what we can do is now this there's days in here no because you need to learn okay what's gonna happen when you do that but you did you see that you didn't have 25 minutes displayed at the very beginning so it's out by one second yeah i mean unless it's launching rockets i don't think that's well i mean it's still huge but even if it's launching rockets it's still it's not kind of what you expect right so what i think we just add plus one on line 14 what that's how that's how hacks you know that's how hacks why is that hacking michael uh it's not hacking it's a solution you know uh jose says oh i don't know if that's an impressed oh i know i don't know i don't think so somehow yeah i know exactly so what we can do is like we need to display it the first time and then you are just gonna so i'm just gonna extract this to a new function that we're just gonna call showtime [Music] so this is like your rendering function so you're separating what is like drawing on the screen from the logic that's operating this drawing [Music] and you just say allowed time but i'll just show time okay and then i suppose you could just do this on the rainbow you're just redrawing it again so you draw it once here and then you draw it again 25 and there you go off we went so now if i want to start a short break it starts with five oh yeah what it has not stopped the other timer uh it has not stopped the other oh yeah of course it hasn't stopped it hasn't stopped the other time yeah so presumably on start of the timer what we want to do is we want to i'll just indent this a little bit so presumably on startup time we want to what's that clear interval or something oh yeah i think it's clear interval um set interval ah so you need to store it in a variable and then okay yeah clear timeout clear time mode i reckon so that rings about clear interval versus clear climate let's have a look just move aloud time below the time display in a text clear timeout and clear interval are interchangeable decrement the allowed time after rendering to avoid redundant rendering html uh what are you reading this decrements they allow time after rendering to avoid uh redundant render html oh that's actually a good tip why not i mean let's have a look so what you're saying is remove this and move this down here so then you would start with 25 yes uh except that's a that's a good point except when when you click this button because the setting tool runs on after a second nothing happens for the first second you see so that would make the code a little bit more concise but for example if i make the timer interval for five seconds then i click the button for five and now it only shows so it's it's a good thing to like to hide it but i want the timer to start immediately and only after a second it would decrement it so i would keep with that but it's a good good job uh so we're gonna clear it yeah but well basically what i'm gonna do is uh let's time out just gonna keep it there and then over here the timeout equals set interval right and then over here timeout i know i think it's like clear intro okay so we've got something there and then yeah uh that okay so it doesn't show it doesn't re-render stuff the thing is though would that stop when it gets to zero i don't reckon it would well no it wouldn't because a lot as soon as it goes so start interval we basically have it in minutes here uh yeah i agree that basically what we want to do is let's just keep it in seconds right so ah that's a long break sorry short break four three two one and then i think yeah there you go uh so the miners i think while we need to do this if it's less than zero then we do then we yeah if it is zero then we stop we do clear interval yeah i think well right now let's let's just write something simple if allowed time equals zero uh then we just show time showdown zero right and clear interval i think it's banged in the other room yeah i think i think his pampini yeah pumpkin jumped somewhere clearly okay yeah i guess um hey else find out in a minute and else let's do that and there we go you're hungry today aren't you no it's the stress is it right whoa zero oh no i can't oh right oh yeah there you go so we stopped ah we stopped we still went change uh what what i tried triple equals i know because when so it ticks one more time put a look to it well i think we need to do that we need to clear interval and then show the time so four three two one left off it has stopped but does that not mean that the first time you're calling clear interval you have a timeout that's undefined uh yeah but calling uh clear interval undefined doesn't do any harm like it doesn't do anything condition should be equal to one uh i wanted to do that i wanted to do i wanted to say it should be one but i would feel that whoever reads that code would be like why is it one so they have to work around whatever is the problem but the problem is that the interval is cleared while the tick is has gone another one so you need to clear it right there so you clear the interval and then you show the time kind of what we did and that that solves the problem so now it's actually zero and it's easily a little bit easier to read as well pumpkin is not the only non-mathematician oh yeah definitely i'm not a mathematician now i'm an engineer which you're basically you crack with the materials anyway anyway button start timer okay cool i would now like to show this one remaining time in browser tab oh yeah um javascript change browser tab yeah there's like um text um no i don't want a js fiddle yeah sharing custom text on the taskbar you go document.title ah there you go yeah it should be fairly straightforward but i don't well you see my problem is i don't know if you can do it from inside of a scrim like it's very easy to do in javascript but is it um yeah i mean just writing document.title equals uh hello inside of a function well just like here yeah no just somewhere but the first first time you just put it in line 21. well let's just make it work all right that's right uh and then we'll see if it works or not okay hello no it doesn't look like it should we download it then we can download it can't we what download the script yeah uh and then run it locally very easy to do download as zip and i now have it in here right and this if you've ever wondered corresponds to the url all right oh nice yeah i actually did another true story wow oops timer okay so i will now open this in vs code or you can just drop drag and drop a folder onto vs code and it works yes wow i didn't know that and then you get this and then we need in index.js we have to delete no no html yeah we need to delete this because that's something that makes it work on screen but it won't work yeah exactly you can say that start okay work okay so the tab has changed oh yeah so it has way way way okay then so now back well what's the shortcut to split them like half and half or is there not one uh i do you have spectacle installed on on your mac no no then there is no shortcut well that's a bit yeah that's a bit of punch anyway so now we will go um index.js yeah do you want to zoom in a little bit for yeah and okay let's just arrange your what are we arranging michael we're not arranging literally all we're doing is this yeah but you can't see the tab now you just move yeah yeah show time set timer yeah so now we just need to show it in uh line this one no because you see no no no the one where um showtime allowed time well showtime is basically the function that works with showing the time sorry that that's kind of very weird so you can just display here right so both of them are going to be showing your time okay so what you can then do is you just go let time equals your string so this will be like how you show that time and then this will be a time and this will be a time there you go but i think that's that's literally it i don't think we need to do anything else oh but it would be nice if we have on page load why we can just do that in the html uh actually you should do it in the html oops yeah i suppose we can title but what do you want to show in the title well just you know something like pomodoro yeah tomato there you go yeah sure okay then so that has done that there you go yeah and now it shows in your browser tab as well wow amazing take that off the list okay back to the scrim yeah so as you can see like it's really yeah just add document.title and that's it apparently i've infected someone whoa whoa really well good idea date yeah if type timer is not equal to undefined click interval timer uh yeah yeah i do wonder well i mean let's just google uh let's just do a clear timeout was undefined well i kind of and clear timer with now learn to find throws an exception oh i see does that mean that does that mean that we basically throw an exception in the code max iteration count waged i wonder that what does that mean fair enough i mean yeah probably that that does make sense to if yeah why not well inside that then why not i didn't think that there's anything wrong with it but [Music] but there is but there is [Music] undefined then yeah cool i'll also remove this hello because that's uh yeah basically we've we've shown that you can do it i mean actually we could just go we could just do it uh it won't show in the scrim uh but we can still have it because we've checked it works right right you just copy it that's true but i've already written it okay what's the idea for designing um probably nothing in the next six minutes yeah but we'll look at some other designs on monday in the live stream yeah cool you can if after the timer in seconds if it's less than 10. you put another zero says michael [Music] so you can if else the timer the in seconds if it's less than 10 you put another zero yeah so this second part here i guess if it's isn't it if it's more than nine yeah i suppose like what is that is that the next thing we're going to be doing because uh let's just take or say your list so um sure remaining okay we've done that so i suppose the next thing we can do is like to display the times appropriately yeah so like pat them out just make you take it yeah but you see the thing is that if you say you put another zero the trick is where because so for example let's say i have this if we have seconds then you need to have zero on the left of the number this is the formula i used before so you say time display e shows zero but if it's divisible by 60 uh otherwise you should double zero yeah okay so pretty sure i copied it from stack overflow okay uh let's just show uh okay so um let's just split this uh actually no there's no split that's so we have this what did you uh so you say allowed time divisible by 60 and then you have a ternary so if it is divisible by 60 show this if not show that okay so it does it does need to be with these brackets so the trick you will see here is that it's still it's good but it only solves one problem okay so here you say if allowed time is divisible by 60 uh show it yeah if not show double zero so for example we have 15 seconds left or 25 seconds left or whatever let's show with well we're 15. so you have 14 13 12 10 9 then you need to pad a zero in front of a nine yeah but you only pad the zero on double zero there you go so really we need to do it the other way around and look at that you can use seconds less than 10. yeah and that's then you padded yeah and then you pad it with a zero path is saying something similar i think uh so i used i use this less than zero then set uh min minus minus seconds equals 60. okay yeah i think this this will be a little bit a little bit easier uh which is why you're going to do it hopefully yeah which is why i wanted to introduce the seconds variable and obviously we kind of need a minutes variable as well so you've got left minutes length seconds so minutes and then we were grabbing this two seconds and then we just draw this okay so let's just separate that after not plus seconds slice minus two so you are slicing from the back you're slicing from the back of the string you say no plus i was thinking more along the way let me just try to formulate it a little bit yeah so if there's a problem okay so every time it's less than zero i'm not sure if that one's finished yet uh what what's that minutes yeah that zero seconds yeah so i am yeah i don't want to do with i mean we could just google minutes and seconds with proper zeros i mean to be fair yeah you can probably find on suckers like how to pad there's probably a function that you can grab that is like padding the numbers correctly on the timer i did seconds less than 10 no and say considering seconds less than 10 equals zero plus seconds to string otherwise seconds yes that is that's a good one just give it a go then that basically that was basically what i was looking for yeah well um but you have seconds less than 10 oh i see so so basically allow time modulus 60 less than 10 uh zero in a string i want to just ah this gets a little bit cumbersome so modulus 60. anyway yeah hello so when this allowed time so let me just call this display seconds and by because i want to create kind of i want to i want to split it a little bit let's play minutes michael so that's amazing we'll try to do that next time and then you have uh yeah so let's seconds there we go so if those parameters seconds is less than 10. has started happy power out only display seconds otherwise uh oh yeah that's right so two two string there we go otherwise this play so pat it out yeah so we've padded that out otherwise uh show seconds all right yeah it's fine so 15 14 10. why now the trick is does it work with uh when it stops does it stop yes it does awesome okay so now we've got uh now yeah yeah so we've got seconds and seconds so what we can do is also need to do it for the minutes basically yeah yeah that's right so so i'll just call this function pad you give it you give it a number and what it does it returns you that string so if that number is less than 10 it pads it right and otherwise it just returns you that number now we have to put that in show time yeah and oh and basically we can say pad allowed time modular 60 and we can say that pad that right so if we do here we go okay now we've padded that uh now because i was like you see i was introducing the intermediate variables and see what so now we can just clean this code up a little bit again and say it's actually minutes and this is actually seconds okay and now we have padded it all out just disappear did you say and that's why yeah okay uh so i think what we want to do is probably like try to display something like on on the start so maybe we can just say time display like yeah just yeah yeah exactly but then we're basically for d by we're showing seconds yeah because it's just easier but obviously when i say they all show some time some default time okay so now we've got uh we've got those pads awesome yeah cool nice nice neat function that's exactly what i was looking for awesome huh tan latching yeah amazing and yeah and we've done the same for minutes with just abstracting this into a variable so we don't have to worry about it so yeah i think i think that part is done right yeah yeah take it off the list yeah exactly and then we're updating the time cool so just to i'll have to make a check it for the work we've already done as usual bad numbers just to wrap up can you go through what is happening oh wow it's already an hour plenty yeah yeah that was that was really quick cool yeah um so yeah let's go from the top um we're basically just that we don't need that anymore um so now when you look back at it would you prefer having the type or not having the type yeah it depends yeah that's as good as it gets that's that's good awesome uh so yeah we just grab the buttons from the dom and we also grab the time display so we basically just grab these this element and these three buttons into javascript and then we create a timeout which will be used for setting interval and clearing interval but in the meantime we've grabbed the dom elements we've added event listeners to the buttons we created this timer function to which we passed the time but now because we are wrapping up so let's just basically make this a little bit more productionized i suppose we give it uh minutes so now this 25 yeah five fifteen awesome yeah cool so now we say uh we start a timer if uh this is the first ever run of a timeout then we obviously don't do anything but if we have already previously set some timeouts we basically clear them out so they don't run together and then we just say uh allowed time is a time do you remember why we did that i suppose we can just pass it straight in here right and just clean this up a little bit right uh oh that's why you can then you start shadowing the variables and it starts mutating the same variable yeah okay very well anyway so let's do that so we have saved the time we get modify and then we've passed it down to here the showtime which is our rendering function which is basically just displays on on the stuff and this will be our logic for basically redrawing the time on the screen every second so we basically display it once the first run and then we display it we just play zero if the time is up and if not we just decrement by one and display the time again and the way we display the time is separately so we display minutes and we display seconds and then we just add the time into document well into the tab over here but because in scribble you can't write it but we're already showing the viscosity it works and then we obviously just display it on the screen over here and i say yeah and then the path function is thanks to lucho for a quick little one-liner it basically just pans out the zeros when the numbers are too low uh when they're below 10. yeah that is amazing yeah pretty good don't forget that you too can solve this challenge yeah here it is yes right nice here i hope many of you make amazing timers yes that would be great and then on monday i will be looking at them in this one upcoming live stream yeah very exciting oh uh i actually know one like almost professional uh pondora timer yeah i think it's called like llama kind of something sounds very professional yeah um i think it's uh some um i can't remember llama time oh lama life llama life it's like it's it's legit it's like you know when people say like oh maybe like pondori it's like it's like a hobby project or something no this is like a legit uh business song has like it's an actual product look at it it's got timer with plus minus five seconds you can add like little tasks you know and it's like an egg timer yeah it's really good it's really good uh i know there you go it's like uh four bucks a month or 30 bucks a year like it's amazing yeah so there you go uh if you think like oh yeah if you know building a pond or a clock who cares about it but there you go someone's uh legit business yeah it's a legitimate thing you really need to do number doctor string up to you yeah i actually i actually use it it's pretty good i like it you pay for a pomodoro time uh well i bought it i bought it before i bought it before it was like it's a one-time payment uh i don't know why yeah definitely it's it's well worth it yeah so that is that let us know what you reckon of this in the comments if you thought it was good if you thought it was terrible what you would like us to do next yes oh michael says it was amazing so i will take that and run with it and i'm glad you like you may be interested to know that i have my own youtube channel yes code with liam you can find out things like coding an accessible icon or a rounded gradient or generating random colors yeah so come along if that kind of thing interests you protocol loves it the llama um timer love my life great yeah i like it too that's it i guess for today yeah any closing thoughts micah well today wasn't as chaotic as it normally is no yeah i guess not it was very focused that's a bit worrying someone might say boring yeah yeah let us know if we were boring yeah we'll do some tequilas before the next one if so oh yeah i mean we should do both should do both i i never say no to tequila but you're not friends with it no if you don't use number string they'll end up adding number as an integer that sounds bad so i'm going to ignore it i mean yeah yes yes that's true uh you can you can quickly twix it fix it but you know what you can submit a pr for that yeah yeah well thanks ever so much for coming looking forward to seeing your submission we'll be back next week won't we oh yes uh was it wednesday vs go tips yeah yeah michael's joining me on the wednesday stream with his vs code tips and we'll be back on friday coding one of the other weekly web dev challenges i don't know which one yet though i have many to choose oops no come on maybe to choose from so oh yeah because we haven't done a few decide never the time it wasn't boring that's good oh you're not showing the screen now i don't need to share my screen oh okay here they are many to choose from mains choose from their charges yes something weekend says jose yes with that say goodbye [Music]

Channel: Scrimba

Views: 1,083

Rating: 5 out of 5

Keywords: web development, coding, learning to code, coding tutorial, learn web development, web development 2021, web development tutorial, front end developer, frontend, learn coding, web dev, software development, JavaScript, javascript tutorial, javascript for beginners, learn javascript, javascript tutorial for beginners, javascript tutorials, javascript beginners, javascript functions, learning javascript, js, js tutorial, javascript pomodoro timer, javascript timer

Id: puovsvSt79E

Length: 70min 24sec (4224 seconds)

Published: Fri Sep 17 2021