Can someone explain to me the logic behind this countdown timer code?

Question

1.00/5 (1 vote)

See more:

I was watching "10 Javascript projects in 10 hours on Youtube", and there is an important part of the code I'm struggling to understand, on the first project which is a countdown timer from Sept 2020, to New Years 2021.

Here's the code:

Copy Code

const newYears = '1 jan 2021';
function countdown (){
 
 const newYearsDate = new Date (newYears);
 const currentDate = new Date ();

 const totalSeconds = (newYearsDate - currentDate)/1000;
 const days = Math.floor(totalSeconds/3600/24);
 const hours = Math.floor(totalSeconds/3600)%24;
 const mins = Math.floor(totalSeconds/60)%60;
 const seconds = Math.floor(totalSconds)%60;

 daysE1.innerHTML = days;
 hoursE1.innerHTML = hours;
 minsE1.innerHTML = mins;
 secondsE1.innerHTML = seconds;
}

I understand the first and last blocks of lines inside the function, but as for the one in the middle, I'm completely lost. This is basic Math so I'm able to do the calculations I just don't understand their meaning. I don't understand why:

1. in order to get the seconds with divide newYearsDate and currentDate's difference by 1000.
2. in order to get the remaining days, we divide the total of seconds by 3600 and then divide the result by 24.
3. Probably the most confusing thing for me, why are using remainders ? I know what remainders are but I don't understand their meaning in this case ?

In conclusion I just need someone to explain to me the reasoning behind every line from "const totalSeconds" to "const seconds". I understand what** we're doing, but not how we're doing it :/.

Thank you so much, in advance !! I tried to get an answer on Stack Overflow but realized people can be uselessly bitter on there at times haha !

Hope you're having a lovely day !

What I have tried:

(just pasted the code hereabove)

Posted 25-May-21 3:51am

Heny Spider

Updated 25-May-21 4:04am

Add a Solution

Comments

Gerry Schmitz 25-May-21 10:20am

If this is going to work at all, you need to change "newYears" to "1 jan 2022".

You need to consider the "intermediate results" to make sense of it: total seconds / 3600 = hours; hours / 24 = (whole) days; .... % 24 = (remainder) hours; etc.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2021-05-25T04:04:00

JavaScript

Copy Code

1. const totalSeconds = (newYearsDate - currentDate)/1000;
2. const days = Math.floor(totalSeconds/3600/24);
3. const hours = Math.floor(totalSeconds/3600)%24;
4. const mins = Math.floor(totalSeconds/60)%60;
5. const seconds = Math.floor(totalSconds)%60;

1. The difference between the dates is in milliseconds, so divide by 1000 to get seconds.
2. 3600 seconds (60 * 60) in an hour, so divide by 3600, and then by 24 to get the days from the seconds
3. Divide by 3600 to get the number of hours, and use the modulo function to get the remainder after dividing by 24, gives the number of hours on the final day.
4. Similar to 3 to get the number of minute.
5. And the residual number of seconds.

If you feed a few dates in to the function you can see the results.

Can someone explain to me the logic behind this countdown timer code?

1 solution

Solution 1

Add your solution here

Preview 0

Can someone explain to me the logic behind this countdown timer code?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us