appwebtech/14_timers_state_part_6.html

## 14_timers_state_part_6.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>

<script id="jsbin-javascript">
// A SIMPLE TIMER USING REACT & STATES

// A Toggle button now can hide or show the timer buttons


// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, null)
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0,
      isStarted: false
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
    this.setState({
      isStarted: true
    })
  }

  endTimer() {
    clearInterval(this.timer)
    this.setState({
      isStarted: false
    })
  }

  handleClick() {
    this.state.isStarted ?
      this.endTimer() :
      this.timer = setInterval(
        () => this.startTimer(),
        1000)
  }

  render() {
    return(
      React.createElement("div", null,
      React.createElement(TimerHeader, {time: this.state.time}),
      React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
      )
    )
  }

}


// Button.js
import React from 'react';

export default class Button extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      React.createElement("button", {onClick: this.props.changeName}, this.props.firstName)
    )
  }
}


// Layout.js
import React from 'react';

import Button from './Button';

import Timer from './Timer';

export default class Layout extends React.Component {
  constructor() {
    super();          // To get context in terms of our class
    this.state = {
      firstName: 'Joe',
      isTimerMounted: true
    }
  }

  changeName() {
    this.setState({
      firstName: 'Foo',
      lastName: 'Bar'
    })
  }

  toggleTimers() {
    this.setState(prevState => ({
      isTimerMounted: !prevState.isTimerMounted
    }));
  }

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("h1", null, this.state.firstName),
        React.createElement(Button, {firstName: this.state.firstName, changeName: this.changeName.bind(this)}),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),

        this.state.isTimerMounted ?
          React.createElement("div", null,
            React.createElement(Timer, null),
            React.createElement(Timer, null),
            React.createElement(Timer, null)
          )
          :null,


        React.createElement("button", {onClick: this.toggleTimers.bind(this)}, "Toggle timers")

      )
   )
  }
}


// TimerButton.js
import React from 'react';

export default class TimerButton extends React.Component {
  constructor() {
    super()
  }

// The flexibility of React still marvels me way beyond using HTML in JS.
// I'll use the ternery operator to change the button in different time intervals

  render() {
    return (
      React.createElement("button", {onClick: this.props.handleClick}, this.props.isStarted ? 'Stop Timer' : 'Start Timer')
    )
  }
}


// TimerHeader.js
import React from 'react';

export const TimerHeader = ((props) =>
  React.createElement("h3", null, "I've been jogging for ", props.time, " seconds")
)
</script>


<script id="jsbin-source-javascript" type="text/javascript">// A SIMPLE TIMER USING REACT & STATES

// Used previous examples to apply some Logic in creating Timers which can easily be toggled by clicking on them to start and stop various time intervals.

// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		<div>
			<Layout />
		</div>
		)
	}
}


ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0,
      isStarted: false
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
    this.setState({
      isStarted: true
    })
  }

  endTimer() {
    clearInterval(this.timer)
    this.setState({
      isStarted: false
    })
  }

  handleClick() {
    this.state.isStarted ?
      this.endTimer() :
      this.timer = setInterval(
        () => this.startTimer(),
        1000)
  }

  render() {
    return(
      <div>
      <TimerHeader time={this.state.time}/>
      <TimerButton handleClick={this.handleClick} isStarted={this.state.isStarted}/>
      </div>
    )
  }

}


// Button.js
import React from 'react';

export default class Button extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      <button onClick={this.props.changeName}>{this.props.firstName}</button>
    )
  }
}


// Layout.js
import React from 'react';

import Button from './Button';

import Timer from './Timer';

export default class Layout extends React.Component {
  constructor() {
    super();          // To get context in terms of our class
    this.state = {
      firstName: 'Joe',
      isTimerMounted: true
    }
  }

  changeName() {
    this.setState({
      firstName: 'Foo',
      lastName: 'Bar'
    })
  }

  toggleTimers() {
    this.setState(prevState => ({
      isTimerMounted: !prevState.isTimerMounted
    }));
  }

  render() {
    return (
      <div>
        <h1>Just some React code...</h1>
        <h3>Just switched to the Atom text editor</h3>
        <h1>{this.state.firstName}</h1>
        <Button firstName={this.state.firstName} changeName={this.changeName.bind(this)}/>
        <p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>

        {this.state.isTimerMounted ?
          <div>
            <Timer />
            <Timer />
            <Timer />
          </div>
          :null
        }

        <button onClick={this.toggleTimers.bind(this)}>Toggle timers</button>

      </div>
   )
  }
}


// TimerButton.js
import React from 'react';

export default class TimerButton extends React.Component {
  constructor() {
    super()
  }

// The flexibility of React still marvels me way beyond using HTML in JS.
// I'll use the ternery operator to change the button in different time intervals

  render() {
    return (
      <button onClick={this.props.handleClick}>{this.props.isStarted ? 'Stop Timer' : 'Start Timer'}</button>
    )
  }
}


// TimerHeader.js
import React from 'react';

export const TimerHeader = ((props) =>
  <h3>I've been jogging for {props.time} seconds</h3>
)


</script></body>
</html>

## jsbin.paluhaxigi.js
// A SIMPLE TIMER USING REACT & STATES

// Used previous examples to apply some Logic in creating Timers which can easily be toggled by clicking on them to start and stop various time intervals.

// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, null)
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0,
      isStarted: false
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
    this.setState({
      isStarted: true
    })
  }

  endTimer() {
    clearInterval(this.timer)
    this.setState({
      isStarted: false
    })
  }

  handleClick() {
    this.state.isStarted ?
      this.endTimer() :
      this.timer = setInterval(
        () => this.startTimer(),
        1000)
  }

  render() {
    return(
      React.createElement("div", null,
      React.createElement(TimerHeader, {time: this.state.time}),
      React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
      )
    )
  }

}


// Button.js
import React from 'react';

export default class Button extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      React.createElement("button", {onClick: this.props.changeName}, this.props.firstName)
    )
  }
}


// Layout.js
import React from 'react';

import Button from './Button';

import Timer from './Timer';

export default class Layout extends React.Component {
  constructor() {
    super();          // To get context in terms of our class
    this.state = {
      firstName: 'Joe',
      isTimerMounted: true
    }
  }

  changeName() {
    this.setState({
      firstName: 'Foo',
      lastName: 'Bar'
    })
  }

  toggleTimers() {
    this.setState(prevState => ({
      isTimerMounted: !prevState.isTimerMounted
    }));
  }

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("h1", null, this.state.firstName),
        React.createElement(Button, {firstName: this.state.firstName, changeName: this.changeName.bind(this)}),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),

        this.state.isTimerMounted ?
          React.createElement("div", null,
            React.createElement(Timer, null),
            React.createElement(Timer, null),
            React.createElement(Timer, null)
          )
          :null,


        React.createElement("button", {onClick: this.toggleTimers.bind(this)}, "Toggle timers")

      )
   )
  }
}


// TimerButton.js
import React from 'react';

export default class TimerButton extends React.Component {
  constructor() {
    super()
  }

// The flexibility of React still marvels me way beyond using HTML in JS.
// I'll use the ternery operator to change the button in different time intervals

  render() {
    return (
      React.createElement("button", {onClick: this.props.handleClick}, this.props.isStarted ? 'Stop Timer' : 'Start Timer')
    )
  }
}


// TimerHeader.js
import React from 'react';

export const TimerHeader = ((props) =>
  React.createElement("h3", null, "I've been jogging for ", props.time, " seconds")
)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>

	<script id="jsbin-javascript">
	// A SIMPLE TIMER USING REACT & STATES

	// A Toggle button now can hide or show the timer buttons


	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	React.createElement("div", null,
	React.createElement(Layout, null)
	)
	)
	}
	}


	ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);




	// Timer.js
	import React from 'react';
	import { TimerHeader } from './Timer/TimerHeader';
	import TimerButton from './Timer/TimerButton';

	export default class Timer extends React.Component {
	constructor() {
	super()
	this.state = {
	time: 0,
	isStarted: false
	}
	this.handleClick = this.handleClick.bind(this)
	}

	// componentDidMount is a React built in method
	// I'll use it to invoke the buttons upon mounting instead of clicking them.
	componentDidMount() {
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	componentWillUnmount() {
	clearInterval(this.timer)
	}

	startTimer() {
	this.setState(prevState => ({
	time: prevState.time += 1
	}))
	this.setState({
	isStarted: true
	})
	}

	endTimer() {
	clearInterval(this.timer)
	this.setState({
	isStarted: false
	})
	}

	handleClick() {
	this.state.isStarted ?
	this.endTimer() :
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	render() {
	return(
	React.createElement("div", null,
	React.createElement(TimerHeader, {time: this.state.time}),
	React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
	)
	)
	}

	}



	// Button.js
	import React from 'react';

	export default class Button extends React.Component {
	constructor(){
	super()
	}

	render(){
	return (
	React.createElement("button", {onClick: this.props.changeName}, this.props.firstName)
	)
	}
	}



	// Layout.js
	import React from 'react';

	import Button from './Button';

	import Timer from './Timer';

	export default class Layout extends React.Component {
	constructor() {
	super(); // To get context in terms of our class
	this.state = {
	firstName: 'Joe',
	isTimerMounted: true
	}
	}

	changeName() {
	this.setState({
	firstName: 'Foo',
	lastName: 'Bar'
	})
	}

	toggleTimers() {
	this.setState(prevState => ({
	isTimerMounted: !prevState.isTimerMounted
	}));
	}

	render() {
	return (
	React.createElement("div", null,
	React.createElement("h1", null, "Just some React code..."),
	React.createElement("h3", null, "Just switched to the Atom text editor"),
	React.createElement("h1", null, this.state.firstName),
	React.createElement(Button, {firstName: this.state.firstName, changeName: this.changeName.bind(this)}),
	React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),

	this.state.isTimerMounted ?
	React.createElement("div", null,
	React.createElement(Timer, null),
	React.createElement(Timer, null),
	React.createElement(Timer, null)
	)
	:null,


	React.createElement("button", {onClick: this.toggleTimers.bind(this)}, "Toggle timers")

	)
	)
	}
	}



	// TimerButton.js
	import React from 'react';

	export default class TimerButton extends React.Component {
	constructor() {
	super()
	}

	// The flexibility of React still marvels me way beyond using HTML in JS.
	// I'll use the ternery operator to change the button in different time intervals

	render() {
	return (
	React.createElement("button", {onClick: this.props.handleClick}, this.props.isStarted ? 'Stop Timer' : 'Start Timer')
	)
	}
	}


	// TimerHeader.js
	import React from 'react';

	export const TimerHeader = ((props) =>
	React.createElement("h3", null, "I've been jogging for ", props.time, " seconds")
	)
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// A SIMPLE TIMER USING REACT & STATES

	// Used previous examples to apply some Logic in creating Timers which can easily be toggled by clicking on them to start and stop various time intervals.

	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	<div>
	<Layout />
	</div>
	)
	}
	}


	ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);




	// Timer.js
	import React from 'react';
	import { TimerHeader } from './Timer/TimerHeader';
	import TimerButton from './Timer/TimerButton';

	export default class Timer extends React.Component {
	constructor() {
	super()
	this.state = {
	time: 0,
	isStarted: false
	}
	this.handleClick = this.handleClick.bind(this)
	}

	// componentDidMount is a React built in method
	// I'll use it to invoke the buttons upon mounting instead of clicking them.
	componentDidMount() {
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	componentWillUnmount() {
	clearInterval(this.timer)
	}

	startTimer() {
	this.setState(prevState => ({
	time: prevState.time += 1
	}))
	this.setState({
	isStarted: true
	})
	}

	endTimer() {
	clearInterval(this.timer)
	this.setState({
	isStarted: false
	})
	}

	handleClick() {
	this.state.isStarted ?
	this.endTimer() :
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	render() {
	return(
	<div>
	<TimerHeader time={this.state.time}/>
	<TimerButton handleClick={this.handleClick} isStarted={this.state.isStarted}/>
	</div>
	)
	}

	}



	// Button.js
	import React from 'react';

	export default class Button extends React.Component {
	constructor(){
	super()
	}

	render(){
	return (
	<button onClick={this.props.changeName}>{this.props.firstName}</button>
	)
	}
	}



	// Layout.js
	import React from 'react';

	import Button from './Button';

	import Timer from './Timer';

	export default class Layout extends React.Component {
	constructor() {
	super(); // To get context in terms of our class
	this.state = {
	firstName: 'Joe',
	isTimerMounted: true
	}
	}

	changeName() {
	this.setState({
	firstName: 'Foo',
	lastName: 'Bar'
	})
	}

	toggleTimers() {
	this.setState(prevState => ({
	isTimerMounted: !prevState.isTimerMounted
	}));
	}

	render() {
	return (
	<div>
	<h1>Just some React code...</h1>
	<h3>Just switched to the Atom text editor</h3>
	<h1>{this.state.firstName}</h1>
	<Button firstName={this.state.firstName} changeName={this.changeName.bind(this)}/>
	<p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>

	{this.state.isTimerMounted ?
	<div>
	<Timer />
	<Timer />
	<Timer />
	</div>
	:null
	}

	<button onClick={this.toggleTimers.bind(this)}>Toggle timers</button>

	</div>
	)
	}
	}



	// TimerButton.js
	import React from 'react';

	export default class TimerButton extends React.Component {
	constructor() {
	super()
	}

	// The flexibility of React still marvels me way beyond using HTML in JS.
	// I'll use the ternery operator to change the button in different time intervals

	render() {
	return (
	<button onClick={this.props.handleClick}>{this.props.isStarted ? 'Stop Timer' : 'Start Timer'}</button>
	)
	}
	}


	// TimerHeader.js
	import React from 'react';

	export const TimerHeader = ((props) =>
	<h3>I've been jogging for {props.time} seconds</h3>
	)




	</script></body>
	</html>