Skip to content

Instantly share code, notes, and snippets.

@kshitijpurwar

kshitijpurwar/timer.js

Created June 14, 2017 09:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kshitijpurwar/4dc36c33b5ea36ca2e648f2ec0ff019d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kshitijpurwar/4dc36c33b5ea36ca2e648f2ec0ff019d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kshitijpurwar created this gist Jun 14, 2017.
    117 changes: 117 additions & 0 deletions timer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,117 @@

    // Just shows the time, taking app state time as input prop
    const Timer = function(props) {
    return (
    <h1>
    {props.time}
    </h1>
    );
    };

    // Resets the timer on click and clear the setInterval
    const Reset = function(props) {
    return (
    <button onClick={props.onClickReset} className="reset">
    Reset
    </button>
    );
    };


    // Pause/ play button
    class Control extends React.Component {
    constructor(props) {
    super(props);
    };

    onClickHandler = () => {
    if(this.props.paused){
    this.props.start();
    }
    else{
    this.props.stop();
    }
    }

    render() {
    return (
    <button className={this.props.paused?"paused":""} onClick={this.onClickHandler}>
    {this.props.paused?"play":"pause"}
    </button>
    );
    };
    };


    class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = { timer: 0, paused: true };
    };

    tick = () => {
    this.setState({ timer : this.state.timer + 1 });
    }

    startTimer = () =>{
    this.interval = setInterval(this.tick,1000);
    this.setState({ paused : false });
    }

    stopTimer = () => {
    clearInterval( this.interval );
    this.setState({ paused : true });
    }

    reset = () => {
    this.setState({ timer : 0, paused: true });
    clearInterval( this.interval );
    }

    render() {
    return (
    <div>
    <Timer time={this.state.timer} />
    <Control
    paused={this.state.paused}
    start={this.startTimer}
    stop={this.stopTimer}
    />
    <Reset onClickReset={this.reset}/>
    </div>
    );
    };
    };

    ReactDOM.render(<App/>, mountNode);

    // CSS Styling
    *{
    text-align: center;
    }
    #mountNode{
    height: 400px;
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .reset{
    margin-left: 10px;
    background: orange;
    }
    button{
    min-width: 72px;
    outline: none;
    border: 0;
    padding: 10px;
    text-transform: uppercase;
    color: white;
    background: #f44336;
    cursor: pointer;
    transition: all .4s ease-in-out;
    }

    .paused{
    background: #50c950;
    }