Add Timer component

[anantoghosh]

Adds <Timer />

Timer counts down from timeLimit to 0, calls onFinish when done

Usage:

<Timer /> // Use defaults

<Timer run={true} timeLimit={20} onFinish={() => {}} /> // Default values

• To stop the Timer, render with run={false}.

  <Timer run={false} />

• To restart the Timer, stop it first. Even after the Timer has finished.

• timeLimit can be set when creating or when restarting the Timer. It will not change if the Timer is already running.

• onFinish accepts a function to be called when timer reaches 0. It will not execute if timer is stopped mid run.

---

Example:

class TimerTry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      running: true
    }
    this.currentTimeLimit = 30;
    this.onDone = this.onDone.bind(this);
  }

  render() {
    return (
    <div>
      <Timer run={this.state.running} timeLimit={this.currentTimeLimit} onFinish={this.onDone} />
      <div onClick={() => {this.setState({running: false})}} >STOP</div>
    </div>
    )
  }

  onDone() {
    // Time's up
  }
}

[anantoghosh]

Preview (looping)

"STOP" is not a part of the timer.

[skyshader]

Can we have a format of 00:00? What are your thoughts? Because a single number based countdown doesn't look like a timer.

Other than that this seems like good to go.

[anantoghosh]

Yes, ok. ss:mm format right? with maximum 60s?

On 11 May 2018 at 18:14, Shardendu Kumar Gautam notifications@github.com wrote:

Can we have a format of 00:00? What are your thoughts? Because a single number based countdown doesn't look like a timer.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/UdacityMobileWebScholarship/guess-quote/pull/71#issuecomment-388352812, or mute the thread https://github.com/notifications/unsubscribe-auth/ALxHfJtojJrAOhMEyZ20XEu4xDB5Mttwks5txYelgaJpZM4T4Fu- .

[skyshader]

Was thinking of minutes:seconds format.

[twishasaraiya]

Why we do we need a mm:ss format, we are going to keep only 30 seconds timer for our app??? That's what I have thought.

[Sahil-Dhawan]

Yes a 30 second timer is all thats needed to the max we can increase it to a 60 sec time , ss format is enough

[skyshader]

So, mostly it's for the look and feel of it. A timer with 00:30 would actually be clear than just writing 30. Let me know if you have better ways we can covey the timer to the user. :)

[skyshader]

Hmm keeping "30s" and counting down does make sense. Let's see who does that look in our UI.

I think we might need to tag this with a text saying "Time: 30s" to convey better. But "30s" alone seems okay.

[Sahil-Dhawan]

https://www.youtube.com/watch?v=_Vj10mHe3i0 we could do something like this

[twishasaraiya]

I agree with @Sahil-Dhawan we could do it that way. It would look better than Time :00:30

[skyshader]

Awesome. Then let's merge this thing asap.