Day 23: Timer

Lesson 3: Timer: 3

Now we want to add some control to our timer.

Add these two functions:

1function stopTimer() {
2  console.log("stopping timer");
3  clearInterval(timerInterval);
4}
5
6function resetTimer() {
7  console.log("resetting timer");
8  time = 0;
9  timeInputElement.value = "";
10  timerElement.innerHTML = time;
11}

stopTimer is pretty easy to understand and resetTimer just clears everything back to a fresh start.

Set a timer running and play around for a bit.

You'll notice that, while it works, there are some clear useability issues and outright bugs. Try starting a timer and then clicking Reset. Doesn't make much sense right?

So, how do we fix this?

Go ahead and change the HTML for the buttons to this (I've just added disabled to Stop and Reset)

1<button onclick="startTimer()" id="start">Start</button>
2<button onclick="stopTimer()" id="stop" disabled>Stop</button>
3<button onclick="resetTimer()" id="reset" disabled>Reset</button>

Now the buttons are slightly transparent on page load and you can't click them. Sadly we can't click them even when the timer is running. Let's address this in the next lesson.