Build React Apps | Create a Clock Timer Using React 05

Key Takeaways

hello guys i'm oliver doing welcome to a new video tutorial on the series of learning yeah today we're gonna have a practical example and we're just gonna create something really really cool from scratch using react in order to show you how absolutely ik works and how you can maintain your like create a real-world applications in real-world UI states and you can manage it however you want using the power of 3 yet we're actually going to do today is create a timer so a time was that you can just I don't know how seconds hours in minutes and whenever you press the button just the time we're gonna start counting from from 0 of course this is not a countdown so I'm just gonna create it like a stop watch so yeah you start recording the time and see that if like something happened on dips this particular thing you just click on the button off capture this time and the time is gonna get captured for you out there in the UI as well and you're gonna get a really nice clock over there so this is really trying to do here is like a screenshot on the screen so like yeah we get like a stop timer we get a stop talk about any kappa timer and a reset button that we can click to reset everything to do 0 seconds 0 minute 0 hours to stop again and from scratch in Houston so this we're going to do is in react just fully react no flux is near the flat you still can use box for that first 20 some sincerity I like the captures and stuff like this but we're not going to need that you can do that or you can put this as a challenge for you or as an example so you can just create by yourself you want me to see how we act vs. flag saying just maintain yourself and making lost other practice for you but for now I'm just gonna clear the by myself over you also one thing I wanna mention you can just go ahead and website up is calm can find up really nice tutorials over here a lot of tutorials actually and yeah you can just skills out or something like this so yeah enough of that I've opened up the project that we were working on so nothing changed so far just a little thing called talk about in a second so this like how the project this is like waiting to the Dharma stuff gonna create a couple but before that I've created God and created the the main style over here so this style is like I've imported it or I've done it by myself so like you can go ahead and get hop because this project is deploying to get how going grab all of that because it's available over there so there's no problem ok so make sure to grab it before you can use the style or you can start by yourself doesn't really matter that much but this is what I want to mention so here this is the main style it's placed into the SAS end of the SRC or source SAS and there's me stuff and this opto LCSs will be SAS so as CSS stands for SAS we just imported this main saw so this up top scissors if we go into web pack makes jeaious go all the way up and you can find apart and a new methods so and then this new method of tied SAS and if given it the source we want to compile which is our superfast SAS for each class up top CSS and although we're just gonna put the compiled or a pre compiled CSS and do the distribution folders you can see here we have up top CSS so just don't like chosen where the folder to put that in the distribution protostars I'm just gonna put it over there so just all of I've done all the changes I've done over here is very very basic also I'm using the normal web pack think so yeah here I'm not using what pack gives you as we have done with fonts because we all really need it and yeah this is all we pretty much need no so let me just go ahead and create a new component so I'm just gonna go ahead and crease layout components and just extends extends it from the you know react the components also need the constructor over here so yeah make sure to type in constructor and props and just gonna call the super method and we passing in the props also we need the render method as you know and we're just gonna return something under this primitive method so for now I'm just gonna use one single components is like a single timer we don't need a lot of components over you just really basic things so yeah this is what we need to render for now so there's a return here we need to return like a container so with this particular container what I'm going to render is I'm using just bootstrap custom container and I'm gonna put it into a container and I'm not looking chain like predefined one G's into the main star which is like the timer container using the Watts Bar flex box design action so yep going ahead with the gab so let me just recreate that okay yeah and I'm just gonna give it the class name make sure to use a class name not a class because usually class gonna give you a weird error and here to get it for the container so this is gonna be the the main container on also I'm just gonna put a class and I'm gonna give it like a tiger or - okay now you're done container I'm obviously under this container we can put in here like age two or something like this like react be something like based time or something this okay just for letting you know that's I'm using this particular thing all so what I'm going to do it as using like the this States and using like the current timer so what we need is to deploy the the current time alike in zeros like minutes hours and seconds so we can do that as well I've already like done a class for this so under the CSS or the sass so run timer and just gonna put that as well in there and obviously what I'm going to do is like timer controls so also class name equals so timer touch controls and this is what pretty much we need so for the time of controls what we need is the buttons so a couple of buttons actually so let me just go ahead and create those buttons for us so class name and just gonna use a BTN began Tosh success so this is like the bottom forced time timer so start timer and we're gonna have another button as well so another button is going to be like stop timer so class name is going to be like a danger or something less okay I'm just gonna use the beatty and also I'm using a blue shopping you just bloody you know so push shop and this is gonna be like long for something and it stop timer also what we need is another bottom and class name so also vidiian and this is going to be like the capture so I'm going to capture like we are within time and let's say I'm 14 minutes and 3 seconds and I want to cut through this time so just click this capture button and just gonna get registering and awesome show us in the UI so this is like from the membrane that we have done something is this particular time or something of this okay now here capture capture time and timer time only time let me just copy that or can you meet you and here we can just reset so Lisa exclamation in this going to be a danger so this like if the buttons that we mainly need for that just a very basic things and yeah so for the current time or what we need is to render a couple of things so here we need to render the hours the minutes and the second for that we need to store them on the state so always remember that something is going to update over time when whenever likely were interaction of the user so whenever one same quick comment click in the bottom and they want to change some or some tax or something like this so this needs to be soared into the state so it's likely going to be updated during the runtime so it like the state need to hold that so I'm just go in and initialize that it's not very important to initialize this state but for the in this case it is very very important because like not all the components meet the state initialized into the constructor but this one really really needs to get initialized into the constructional actually so here what I'm going to do is just keep track a couple of bullies in here so like the timer of starting and like the timer starts so Todd and it's going to be false like the timer's not start yet also timer stopped so for like the application starts with the timer stops oh it's gonna be true and you're gonna have like the hours so our is going to be zero on the beginning minutes also gonna be zero obviously seconds also it's gonna be zero so yeah this is what actually we need for now so seconds minutes and hours and also what we need is two captures so the captures whenever you click this button we need to keep it capture so we need to sort of something some kind of an array in order to render it out so with us we need to choose Torah captures array and do the state as well so remember the capture is if something is going to change so we need to store it into these state so nope everything is going to be stored the state you can store it into the class the this particular class over here so always distinguish between like whatever you store into the class context and under the state objects so make sure to know about that because this is not gonna like work alot on optimizing your application and neatly it looks a little bit more better and less baggy okay now after initializing a couple of things now let's go and do that into the current Tyler death so with this I'm just gonna use this state the powers we start with hours so the hours gonna comes up the on the left side so hours plus two points so concatenate in strings or in streams and integers so in JavaScript concatenate a string and an integer gonna do just pretty much fine like rather than - you need to like static cast or like cast it into the other type around into it like concatenated with each other so if you've got the point actually so here we need the minutes plus this this sees door on the second okay this is what we pretty much need for now so just from doing this couple of things in here and here we are doing just the time or soft and yeah we are actually you let's try to see what we have in here for now so let me just go ahead and undo it into the we are Dom window process so here we put in layout okay smoke Arabic I'm sorry good so layouts just call it you remember that web call reality and control s for saving let me just go back into the indexed or HTML and open it in the default browser remember I'm not the using the server so I'm just using the reactor and yep awesome so everything is getting rendered for us one thing I have forgot about I didn't hear just a little thing here is a class a bootstrap class text align so class name and just gonna be like text soldier for taking this takes into the soldier in yeah I believe we are good skills can see we have a stake timer and we get a reset capture time stop time as it's hard time so now the time it does nothing pretty much what we need is to add the functionality whenever we click this button the timer needs to start counting here so I start with a second whenever the second is like 60 we need to reset the seconds and take the minute into one minute and keep carry on carry on whatever the minutes like comes up to sixty minutes we need to clear that in to zero and add the 1 or +1 to the hours and someone and so forth so it starts with the only thing we need to count as the second so the second needs to go from zero to 60 then all of the other ones gonna get like get linked up with the seconds and think I'm just gonna account like it's way through and adds up and adds up and so on and so forth and you always top the timer or like reload or capture the time or we so let's try to add the functionality of this so first things first let's add the handler stream wheels so we need like a couple of hunters this button like on the on click on this button we need to run a function or a callback so let me just add that into the scope of this class so handle timer start and it's gonna be like taking event but we really need it so we can use events to prevent default before using something like a forum or something or this button is a submit button so when you click it you get a refresh thing so using a prevent before going to prevent the default behavior on this particular button so yeah it's like very helpful in in most cases so make sure to just to use it for making your application looks a little bit better surely now here we need to actually stop counting down so for that the timer what it needs is to count down from or each second so like this is the main thing so each second we need to add one to this particular thing so how we can tell JavaScript to tell or to give it each second so there's like a built in function is called go to or set ultra ball so let's set interval function takes a callback so they're just gonna call or execute this function or this callback it takes every single time up so you can see this the first one is a callback the second one is the number of milliseconds so if you give it a second if this callback is going to be executed every second so this is what we know we actually want so go ahead and use ESX arrow callback and we give it like a thousand milliseconds which means like a second and yeah this is what we need to tell it to do so for this this is gonna be the callback actually and here we need to add up each time plus one to the second so this is actually gonna be very very basic and very simple so each time we set the state and we check every time I stop so then we set the stage we said venture ball or so on so forth so let's go ahead and see em the timer actually is stopped or now so we can just say if state dot timer is stopped so the timer stops so we are good to solve the time if you don't do that I'm just gonna give you a really weird error because if you just try to click a couple of times on this button so it tries to something like it's two seconds instead of a second and so on and so forth so duplicate the number of seconds in need to add every single second so if this is like something a little bit confusing but if you need to do some checking before before you actually can do that correctly so here we need to set the stage of the timer stop so whenever this one we need to stop the timer so this got set State and here the state takes um you know an object so like timer start and usually try to say true and timer stopped we need to say false so by the way here were checking every time actually the stopped which is true like when when the application is initialized and construct so the timer start is a true so this is just gonna enter for the first time we try to set it all same back and forth whenever we click this button will stop time I'm just gonna set it to true again then someone else off all so yeah here we check for that and also here we need to check if actually the timer is a soft so f.f state dot timer is a start and we can give that so pretty much what you need to check as well as this one needs to go up so go up pretty much so go out of the the the interval function and actually me because we we need to check if it is stopped then we can stop the interval is to not stopped we can't execute this interval because it's just gonna give you a real world error so make sure just to do that and here we need to start the timer now we need to do the count down so each time we need to +1 to the seconds only and here we do this like this doctor set state and here we need to get the previous days if you have watched my first one about fairies third tutorial but the state change it or react component so you need to pass in the producer stage which is like giving a callback into the stage method for doing that pretty much so here we giving it like the previous state was the first so let me just use that so previous state okay smoke diamonds do ok the previous stage in here we need to update that so if we call this set state and here the stage pretty much on inside a set state oh this is taken an object and also make sure to wrap this object into a parenthesis mainly because you if you don't do that JavaScript or we are gonna take this as a function scope while you need to tell JavaScript or react to take this as an object Scott not a function scope the function scope instead of those curly braces aren't going to be in parenthesis when you actually put them so this is what we want and here we need to set the objects say so we can say seconds is going to be previous stage stop seconds plus one so each time we +1 to meet seconds so let's go ahead and just click that and let me add the on click so or click equals this dots handle timer start so handle time start don't bind and also make sure to bind this context so YT this context will just give it the this into the the runtime process because on click is going to be executed from other context so it doesn't know about this exists or the other context so you just need to bind about that just find it never takes care abouts and now control as a stop timer and let's see inhale we get as you can see in a very awesome way we get that tire versus can see just gonna stop counting up every single second passing only the second oh no this is the manner in business the hours so are we getting that working pretty much fine now now what we need is whenever this reaches 60 seconds we need to clear that in to zero and it takes the minutes by one and plus one to the minutes pretty much so yeah let's go back and do that pretty quickly so here we need to add like in a statement so into here we say if this so this state top second so we need to check if the seconds are greater than or equals 60 so if they are greater than or equal 60 so we need to adds up one to the minute also we say else have this dot state dot and alpha isn't really that good so let me just add if statement so to me both of them execute at the same time if we if he gets into that so if this state dot minutes are greater than or equals to 60 we pretty much need to like add one to the hours and someone or so forth so let me just go ahead and do that let's copy this really quickly and let's go ahead and use now the second so now the second so whenever they reach to 60 we need to clear that up so we just say second equal to zero minutes equals previous state dot minute plus one so yes exactly this is what we want so previous state of minutes e plus 1 or equals minutes it was previous States minutes plus one and this is how he takes it up now also for the hours gonna take the same approach so we need to clear now the minutes and the seconds so both of them got equals zero since the man is gonna equal 60 or something and also the seconds need to get cleared out no so here the hours need to get I want stop hours so I'm just gonna get previous States top hours dot or plus one only like this so people say two hours plus a one and also the four minutes previous minutes plus one and so on and so forth so this is how we can get achieving that very quickly whatever this is going to be like included on that so whatever it reaches 60 plus one to the minutes whatever the manage reaches 60 or greater than 60 wants the hours and so on and so forth in here we plus seconds every single like a second since we're using the set interval on a second in here so yeah this is what we need to do so much control s and go back refresh everything stop the timer again and try to see that so but for wait for this actually and yeah you can see that we are almost there and 61:1 okay we get one plus two the minutes and the seconds carry on and counting someone and so forth the hours we can't like demonstrate that for you actually guys but you can try it by yourself by waiting hours but I really advise you to go ahead and wait for this particular thing for an hour not to see that because this is not a real big deal but you can do that anyway so here we need also to stop the timer shrila okay let's go back and stop the timer so this we need to add another click event handler so just gonna call it this handle timer stop stop bind and also we need to bind the coins context of course and let me just copy that antique just down into the other one take me there and yeah we need to stop the timer so I'm gonna start being the timer we obviously gonna need let me just take in the event and say prevent default so II need to prevent default same as the other one I need we need to say this top set state and reset stays timer started equals false it's not stopped most so timer stops gonna equal true so we are stopping the timer here we can start again and also we need to clear let's see here so leave the child stops is working and this should work too much right now so let me just go back control us and go here refresh everything we start this over we see it starting correctly in here just start counting in the second we click the stop timer and try that ok we are not getting actually nothing we're not stopping anything let me see why that is helping you pretty much and yet one other thing I missed about doing it here is clearing the interval so what I need is to like keep track of this particular interval on here so as you can see this interval returns you can however it eats returns an OGS timer so we can store that into this class contacts so triangle equals set interval timer and whenever we stop that we need to call it like clear the Cullens interval so here and you can pass in this but timer in order to get it cleaned so yes and another thing here we're sending the stage of the timer stopped but pretty much here we say if timer start state timer start stuff in here handle timer stopped the bind ok this onclick function every morning now everything seems to be fine I don't know what should go back let's see if starting the timer now and trying to stop it and yeah actually we getting in stopping it so yeah as you can see it stopped nothing just click on start timer again is just gonna resume on counting up and so on and so forth now yeah I give the timer again it stops on whatever number it was in but yeah it is working pretty much fine no notice can see here it is fully working with the start time and stop time and showing off fine and with a clear interval and everything working fine so I guess this is pretty much it actually guys I'm not I'm not abandoning that because in the next video tutorial I go through is reset button and the capture time I'm just gonna talk a little bit more about stuff that we need on the reacts optimization or react components and Riata application so I think that's watching again in the next one we're gonna go resume this application and we're just gonna fully finish it so yeah as I've said I will catch you in the next video tutorial