diff --git a/snippets/CountDown.md b/snippets/CountDown.md new file mode 100644 index 000000000..a6568c62f --- /dev/null +++ b/snippets/CountDown.md @@ -0,0 +1,94 @@ +### CountDown + +Renders a countdown timer that prints a message when it reaches zero. + +- The timer starts automatically with the initial value passed through the `props` +- Each second, `tick()` is called. It updates the timer, decreasing the time by one second each time. +- If the `pause` button is clicked, `tick()` refrains from updating the time until the `resume` button is clicked. +- If the `restart` button is clicked, the timer starts over from step 1 +- If the time hits zero, the message 'Time's up!' is printed + +```jsx +class CountDown extends React.Component { + constructor(props) { + super(props); + this.state = { + paused: false, + done: false, + s: parseInt(this.props.seconds), + m: parseInt(this.props.minutes), + h: parseInt(this.props.hours) + }; + + this.tick = this.tick.bind(this); + this.pause = this.pause.bind(this); + this.reset = this.reset.bind(this); + + this.timerID = setInterval(this.tick, 1000); + } + + tick() { + if (this.state.paused) { + return; + } + + if (this.state.s === 0 && this.state.m === 0 && this.state.h === 0) { + clearInterval(this.timerID); + this.setState({ + done: true + }); + } else if (this.state.m === 0 && this.state.s === 0) { + this.setState(state => ({ + h: state.h - 1, + m: 59, + s: 59 + })); + } else if (this.state.s === 0) { + this.setState(state => ({ + m: state.m - 1, + s: 59 + })); + } else { + this.setState(state => ({ + s: state.s - 1 + })) + } + } + + pause() { + this.setState(state => ({ + paused: !state.paused + })) + } + + reset() { + clearInterval(this.timerID); + this.setState({ + paused: false, + done: false, + s: parseInt(this.props.seconds), + m: parseInt(this.props.minutes), + h: parseInt(this.props.hours) + }); + this.timerID = setInterval(this.tick, 1000); + } + + render() { + return ( +