stopwatch

An ultra-simple HTML + JavaScript stopwatch.

Try it: https://dwyl.github.io/stopwatch/

Why?

Helping people learn how to code requires a simple but functional example.

Everyone has experience using a stopwatch. Whether to time an experiment in school (science class), cooking in the home or holding ones' breath under water, we can all immediately see the use of a stopwatch.

Yes, I hear you, "most mobile phones have stopwatches, why would anyone want to build their own?"
I agree, why "re-invent the wheel" if you already have a perfectly good one?

Well, as you are about to discover we are not re-inventing anything (yet!) simply discovering a few computer/web programming basics by building something we already know.

Once you have the basics mastered, you can unleash your imagination! :-)

How?

Open the index.html in your web browser and try the simple stopwatch. Then read the code in the files to understand how it all works!

Interface

I tried to simplify the UI as much as possible so there is a single button/control for the stopwatch: Go (If you chose to edit the file you can change this to Start or what ever you prefer)

While the stopwatch is running we only have one action: Stop
(We can/will add the Lap function in a later tutorial bur for now KISS!)

When the "Stop" button is pressed/clicked it stops the timer.
We then have two options: we can either Go again to keep counting or Clear.
Clicking/Pressing the Clear button simply clears/resets the current count.

Questions?

If you get stuck while reading the code or have any questions, please open an issue

Note on "re-inventing the wheel" - if anyone ever asks you why you are re-inventing the wheel, show them these links: