Transcript
English (Auto-generated)
Hi everyone. And now let's go ahead and start working on this start button, which when clicked will display the time with the seconds ticking. So in our code editor, we're still working in the main dot Js file. So what we're going to do is we'll add an event listener method to the start button which is referenced by this variable appear const button. So let's go ahead and do that and I'll do it here. So um start button, just putting in a comment and Britain dot add event, listener. And the event that we're listening out for is a click event. And in response to the click event, we want a callback function to execute now only when the button is clicked. Do we want to set the detection interval? So let's go ahead and copy paste this here. So now the chrome idle a P I is inside our add event listener callback function. Now, when the button is clicked, we want to show the current time in hours, minutes and seconds format with the seconds ticking since we're detecting the idle state at an interval of 15 seconds. So what we're going to do is we'll assign the time of variable to the set interval method. And inside of that we'll use the date method and assign that to the date variable. So let's go ahead and do that. So we'll assign the time variable to be equal to the set interval method. And out here we are going to uh to structure our callback function and we're just going to use the function out here. Okay, so what we're doing out here is we're going to say that um one second. This does seem I seem like I'm missing the curly braces. Okay, so out here, what we're going to say is well set interval. And out here we will a sign the local variable date to be equal to the a new date. So the current date. And now what we're going to do is we'll make a local variable called time by using the two local time string method. So let the time is equal to date dot to local um not date, but time strength method. Okay, so this method converts a date to a string representing the current time. And then we want to display the time, which we will do in the inner html of the display time p variable. So this is going to be equal to time. And after that, the time variable displays the statics time. So when we put it inside the set interval method, it's updated every one second. Okay, so out here we'll write one. Okay, so let's go ahead and check this and again got the syntax incorrect so that's the correct syntax and after that, what we're going to do is we'll delete the display time dot inner html. Let me just go ahead and get rid of that. Okay, so we'll delete this line out here because we don't really need to now see the idol or active state. We just need to see the time which is going to be anyways displayed up here, display time is equal to time. Okay, now at the end of this event listener method, what we're going to do is we're going to call a function uh which we call detect state, right? And we're going to be wrapping up this on a state on state, changed event handler. And we'll wrap it inside the detect estate function. So let me go ahead and do that. So just wrapping everything up inside the detect state of function and this is going to end out here. So end of the tech state. So the reason we do this is because we only want to set the detect the detection interval at 15 seconds once the start button is clicked and then we want to start detecting the state change afterwards subsequently. So first the user clicks on the button and we've set the detection interval and once we've done that, only then do we want to call this function detect state inside of which we've wrapped our on state changed rent handler. Okay? So let's go ahead and now we'll wrap things up and let me just go ahead and control us a safe before we do that. Let's actually test this. So control us to save and come here, remove the previous version and let's upload the new version and okay, and procrastinator and time. Okay, so it seems like the time is not displaying. Let's see what's happening out here, so might be a small issue. So what we want to do is we've added the add event, listener click function, chrome idol set detection interval. So time is equal to set interval method, which is going to new date, time, display time. Oh, there you go. So this is what was wrong. We are actually missing the inner html. Okay, so control? S and then let's come back, remove this and once again downloads chrome extension because if we didn't have the inner html property, so nothing is going to be displayed in the pit tag. So we needed that. Okay, there you go. So our timer is ticking and we'll move on to the next cast now and we'll wrap things up by playing the sound when the start button is clicked.