Create Countdown Timer

4
votes

I want to create a countdown Timer in React Js in which i will user Start(To start the countdown), Stop(To stop the countdown) and reset (to reset the timer) as in the picture exemple.Wanted Timer

As i beginner developper in React JS and in javascript globally, i started by testing the button.After that i created a function "secondPass" to calculate the remaining time and after that displaying it.The "countDown" variable is for stopping the "setinterval" after that with "clearInterval(countDown)".

The problem is that i get an error msg in the "codesandbox" plateform as in the picture.If someone can explain my error and if not to much asked help me to write a very simple code to achieve my project.

: Error msg

Here the React code: 

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  function secondPass() {

  var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

  var remSeconds = seconds % 60;   // To Determine The Seconds

}

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}
3
javascriptreactjs
What is countdown? You need to initialise it with a keyword. Try putting let before countDown = ... - Kartik Sachdeva
You have some syntax errors. Basically, you can't define variables (seconds) and methods the way you do, it's wrong syntax. You may find this link useful developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - Anton Harniakou
try without the function keyword when defining the secondPass() method. - Julian

3 Answers

2
votes

It's because secondPass is a member function defined in the body of the Timer class. In JS, you do not need the function before it, declare it just like render: change function secondPass to secondPass

1
votes

remove the function keyword for secondPass function. you don't need function keyword for function if you are declaring it inside a class.

make it like, 

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  secondPass() {

    var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

    var remSeconds = seconds % 60;   // To Determine The Seconds

  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}
1
votes

You don’t need to use function keyword when declaring functions in a class for secondPass function. It’s the new ES6 syntax.