Stop Watch with time-records
Best Practices


Ideally you should separate your logic from your HTML as much as possible.
Building a string with += is less efficient than using a buffer. In other words, push each part of the string into an array and then join() the array. When you use += you're loading the entire string into memory every time you add to the string. Here's a re-write of your listPastTimes function.



function listPastTimes() {
  pastTimesDisplay.innerHTML = 
    '&lt;ul class="list-past-times"&gt;&lt;li&gt;' +
    pastTimes.join('&lt;/li&gt;&lt;li&gt;') +
    '&lt;/li&gt;&lt;/ul&gt;';
}



Stuff that's just my opinion


I personally would not use the curlies for your if if you're only calling a function. I would put the function on the same line and lose the curlies. Some people are religious about the curlies and it's ok if you are, but in my opinion it's just adding unnecessary lines to the code. I'll defend that to the death. The Apple SSL bug is not a valid argument for curlies because that developer did not put the code on the same line as the if.
This is only gonna work on relatively new browsers (maybe that was inended) - I would have used more widely supported methods.
I've really don't like the idea of assigning booleans in an if/else. To me, this feels redundant. I would have done triggerStartStop like this:



function triggerStartStop() {
  intervalId = timeRunning ? 
    clearInterval(intervalId) : 
    setInterval(increment, 10) ;
  timeRunning = !timeRunning;
}

function increment() {
  currentTime += 10; // Increment
  currentTimeDisplay.textContent = // Write
    (currentTime / 1000).toFixed(2);
}