#React Stopwatch
Let's build a stopwatch using React. Feel free to use the Codepen starter template and fork it.
http://codepen.io/bhague1281/pen/JXEaeK
To submit, create a pull request with a link to your fork.
##Part 1 - Time display
Create a component called TimeDisplay
- should take a time as a number of seconds (includes fractions) and displays it in a stopwatch format:
00:00:00
- should have one property called
time
. Thetime
should be required and must be a number. - should maintain the format regardless of the number of seconds (up to
59:59.99
). Examples:00:01.10
,01:05.02
,01:15.12
, etc.- Note: You may want to take advantage of the
substr
function to take care of the leading zeroes in the time. That said, if you can't get the format perfect, don't waste too much time and move on to the next parts.
- Note: You may want to take advantage of the
- make sure the component can be rendered to the page.
##Part 2 - StopWatch
Create a component called StopWatch
that includes a <TimeDisplay />
and 3 buttons (start, stop, clear).
- The timer should default to 0 (
00:00.00
). Start
should make the display count up by "centiseconds" (1/100th of a second).setInterval
is very handy for this
Stop
should pause the timer.- If start is clicked again it should resume where it left off.
Clear
should stop the timer and set it back to 0.- make sure the component can be rendered to the page.
##Part 3 - Counting laps
Add a "Lap" button to the StopWatch
when it is clicked the timer should keep running, but the time when the button was clicked should be stored (added to an array).
- each lap should be displayed in a list below the buttons using the
TimeDisplay
to keep it formatted (use CSS to make the font smaller on the laps if needed). - each lap time should have the lap number next to it (Lap 1, Lap 2, etc...).
The clear button should clear all laps.
##Bonus
- Make the
Start
button disabled once the clock is running. - Make the
Stop
andLap
buttons disabled once the clock is stopped. - Make another component to make multiple
StopWatch
components.