Need help: What is Wrong with my link

JavaScript
1

Hello Everyone! I have countdown clock with input start time and input end time , but my function is not run countdown when i click button here this my link
Countdown clock by reactjs

2

Timer.js line 48 if(timeRemaining>0){ This condition is always true. Because startDate and endDate never changes.

3

Hi @boscojfelix ! Can you explain more to me! To my knowledge , I thinks when i input startDate and endDate ==> update state

4

@DuongQuocViet Lets analyze
calculateCountdown

const { startDate, endDate } = this.state;
//here startDate=this.state.startDate
// endDate=this.state.endDate
.
.
.

if (timeRemaining > 0) {
      const start_date = new Date(startDate);
      const end_date = new Date(endDate);

here you are getting startDate, endDate which is not changed by previous setTimeout call.
.
.
.

this.setState(
        () => ({
          days,
          hours,
          minutes,
          seconds
        }),
        () => {
          this.timer = setTimeout(this.calculateCountdown, 1000);
        }
      );

// in above statement you change days, hours, minutes and seconds. Will this change startDate and endDate. It will remain constant.

let’s say user choose:
start time = 14/12/2020 3:00 PM
end time = 14/12/2020 3:01 PM

1’st call to calculateCountdown is called by button click wright
startDate = 14/12/2020 3:00 PM
endDate = 14/12/2020 3:01 PM

2’nd call to calculateCountdown is called by setTimeout function after 1 second (i.e. 1000 milli seconds)
startDate = 14/12/2020 3:00 PM
endDate = 14/12/2020 3:01 PM

Your algorithm is like

  1. get startDate and endDate
  2. if endDate - startDate is > 0
    2.1. Calculate and set value of days, hours, minutes and seconds.
    2.2. set timeout for 1 second to call again.

HINT: Add at line 94 in Three.js

console.table({ 
    startDate: startDate, 
    endDate: endDate,
    days: days, 
    hours: hours,
    minutes: minutes,
    seconds: seconds

 });

and check console window you might understand what is happening.

6

Hi @boscojfelix!I sorry for the late reply and I found the solution through your explanation, Thank you for all the support

1 Like