ernestlv/timer.html

## timer.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Timer</title>
    <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">

      class Timer extends React.Component {
        constructor(props) {
          super(props);
          this.state = { time: 30 };
        }

        updateCounter() {
          if (this.state.time > 0){
            //arrow function properly pass the state value (prevState) to update
            this.setState( prevState => ( {time: --prevState.time} ) );
          }else{
            this.pauseTimer();
          }
        }

        startPauseTimer(e) {
          this.counterID = !this.counterID ? setInterval(e => this.updateCounter(e), 1000) : clearInterval(this.counterID);
        }

        resetTimer(e) {
          this.setState({time: 30});
        }

        render() { //execute each time state changes
          return (
            <div className="timer">
                Time: {this.state.time}<br />
                {/* arrow function properly binds "this" to the react component */}
                <button onClick={e => this.startPauseTimer(e)}>start-pause</button> <button onClick={e => this.resetTimer(e)}>reset</button>
            </div>
          );
        }
      }

      ReactDOM.render(
        <Timer />,
        document.getElementById('content')
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React Timer</title>
	<script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/babel">

	class Timer extends React.Component {
	constructor(props) {
	super(props);
	this.state = { time: 30 };
	}

	updateCounter() {
	if (this.state.time > 0){
	//arrow function properly pass the state value (prevState) to update
	this.setState( prevState => ( {time: --prevState.time} ) );
	}else{
	this.pauseTimer();
	}
	}

	startPauseTimer(e) {
	this.counterID = !this.counterID ? setInterval(e => this.updateCounter(e), 1000) : clearInterval(this.counterID);
	}

	resetTimer(e) {
	this.setState({time: 30});
	}

	render() { //execute each time state changes
	return (
	<div className="timer">
	Time: {this.state.time}<br />
	{/* arrow function properly binds "this" to the react component */}
	<button onClick={e => this.startPauseTimer(e)}>start-pause</button> <button onClick={e => this.resetTimer(e)}>reset</button>
	</div>
	);
	}
	}

	ReactDOM.render(
	<Timer />,
	document.getElementById('content')
	);
	</script>
	</body>
	</html>