And we can use that interval functionality to create the time output we want in this timer clock. So let's start by triggering the clock at the right time. We already know we want the clock to start when the first keystroke happens and we've captured that value here in text entered length. When text entered length is zero that's when we start typing and that's when the clock should start running. So I can setup a conditional statement inside the start function. If text entered length triple equals zero, then I want to start an interval.
So I'll set an interval. When the interval starts I want to run a function. I'll call it run timer. And I want to run this function every thousandth of a second. Now set interval will literally run the function every thousandth of a second. So this is kind of like a loop except it's an interval, so it's timed and we can control exactly when the function runs. Of course I need to build that function. Run timer.
And inside this function I need to display some information. So I'll create a global variable for now called timer. Set it to zero first. Then inside run timer I will grab the timer, that's the actual timer element here, defined up here as a constant. I'll set it inner HTML to timer. And then I'll incrementally increase timer. So now, this function will run every thousandth of a second and we should see a number start at zero and then very quickly increase over here in the timer.
So I'll save that. Start typing here. And the number starts counting, alright. That works, so I can reload my browser just so the counter stops. Now comes the challenge. I need to break that number, that just starts counting from zero and up, into hundredth of a second, seconds and minutes. And I also need to store each of these independently so that I can carry over values from one to the other. So instead of having just this var timer which has a number I'm going to change it to an array. Here I'll capture the minutes, seconds, hundredth of seconds and thousandths of seconds.
Then, instead of updating timer I'm going to update the last value there. So that would be value number three. And instead of displaying just the timer I'll create a proper string that actually displays the time in this format we have down here. So I'll create a new let call it current time. Set it equal to timer zero, so that would be minutes, plus colon, plus timer one, that would be seconds, plus timer two, that would be hundredth of a second.
Then the timer inner HTML will display current time. Save that and test it. And now nothing happens. That's because right now we're incrementally updating the fourth value in our array and we're not displaying that value. So here I need to do some math to display the different values. And this requires a bit of a weird setup. So I'll start by defining the minutes. Timer zero equals, I'll use the math object to find the floor.
That just means I don't get any decimals. Then I want to grab timer three, that would be the thousandth of a second, divided by 100 so that I get just seconds. And then divide that by 60, so I get minutes. Then I'll set timer one, again math floor so we get clean numbers. Here we'll do the same as above. Timer three divided by 100 and this time I'll subtract the value of timer zero, which is the minutes, times 60.
And this time I'll subtract the value of timer zero, which is the minutes, times 60. So that every time we hit 60 seconds this value returns to zero. Then we'll set up the hundredth of a second. Timer two. Again math floor to get a clean number. Here I'll grab timer three, that is the thousandth of a second. Then I'll subtract timer one times 100, that way we clear out every time we get to 100 hundredth of a second.
Because that's now a second and we need to get back to zero. And I also subtract timer zero times 6,000. Now that's every time the minutes reach 100 so that we don't start counting upwards from there. Alright, if you don't follow here just trust me, this works. Save that, go back in the browser. And now we should see a proper count. Hundredth of a second counts up and eventually will get to 60 seconds which will count up to a minute.
It's not perfect but it's almost where we need it to be.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality