1
00:00:00,590 --> 00:00:08,800
In this lesson, we need to calculate how much time is left between the end date and our current time.

2
00:00:08,810 --> 00:00:14,900
So whatever the current system time is, and we're going to be using a date method in order to accomplish

3
00:00:14,900 --> 00:00:16,690
this, using date pass.

4
00:00:16,970 --> 00:00:19,850
So we start the clock, we output that value.

5
00:00:20,090 --> 00:00:27,980
But if we take that date value and if we cancel log out using a method called Dete Pass.

6
00:00:28,220 --> 00:00:34,880
And what this does is this returns a string representation of the date since the number of counting,

7
00:00:34,880 --> 00:00:38,230
the number of milliseconds since January 1st, 1970.

8
00:00:38,480 --> 00:00:43,750
So if we take that D object and we place it in here, we're going to get a numeric value.

9
00:00:44,300 --> 00:00:46,550
So try that again and make an update.

10
00:00:46,670 --> 00:00:49,160
And we see we get this millisecond update.

11
00:00:49,310 --> 00:00:56,060
So that's how many milliseconds and we can use this value in order to calculate what the current value

12
00:00:56,060 --> 00:01:05,300
in milliseconds is since that start point of in December of 1970 or January 1st, 1970.

13
00:01:05,600 --> 00:01:08,860
And there's more information on the Mozilla developer network about it.

14
00:01:09,200 --> 00:01:11,210
So you can see that date pass passes.

15
00:01:11,210 --> 00:01:17,190
A string representation of the date returns a number and milliseconds since January 1st, 1970.

16
00:01:17,540 --> 00:01:21,740
So basically what we're doing is we're equating the two values.

17
00:01:21,890 --> 00:01:27,080
So we have the same starting point for the values, which is going to give us a number of milliseconds

18
00:01:27,230 --> 00:01:33,080
and then those milliseconds we can use to subtract out and actually calculate how many milliseconds

19
00:01:33,200 --> 00:01:35,000
are between the two dates.

20
00:01:35,360 --> 00:01:38,700
And there's an example over here where we've got date pass.

21
00:01:38,930 --> 00:01:42,470
So it's parsing that January 1st, 1970.

22
00:01:42,650 --> 00:01:45,200
And then we're also parsing out another date.

23
00:01:45,470 --> 00:01:49,970
And you can see that there's going to be two different numbers that are going to be returned here and

24
00:01:49,970 --> 00:01:53,220
as it gets passed out, JavaScript release.

25
00:01:53,240 --> 00:01:58,940
So this is when JavaScript was released and this is the number of milliseconds since that start date.

26
00:01:59,030 --> 00:02:04,670
And you see that the Unix time is zero because this is the starting point for the calculation.

27
00:02:04,860 --> 00:02:08,380
And if you actually go before the state, then you're going to get a negative number.

28
00:02:08,630 --> 00:02:13,760
So let's try that out within our own code and we're going to get the milliseconds of this date, which

29
00:02:13,760 --> 00:02:14,480
we already have.

30
00:02:14,660 --> 00:02:19,660
And we're also going to get the milliseconds of what the current time is hitting.

31
00:02:19,670 --> 00:02:22,760
A variable actually set up a new date first.

32
00:02:22,940 --> 00:02:25,310
So within here, it's just getting the new date.

33
00:02:25,580 --> 00:02:27,050
So this is getting the current date.

34
00:02:27,140 --> 00:02:30,430
And I'll consult logout this information as we go along.

35
00:02:30,440 --> 00:02:38,510
So current date value and instead of outputting it here, are going to pass that through console log

36
00:02:38,510 --> 00:02:42,570
there, and then we can take that value and we can output it once again there.

37
00:02:42,920 --> 00:02:46,180
So the last part in the console is now going to be the current date.

38
00:02:46,520 --> 00:02:47,380
So let's try that out.

39
00:02:47,750 --> 00:02:49,820
And we see that this is the current date.

40
00:02:49,830 --> 00:02:56,600
So it's January 3rd, 2018, and the date that we're looking for is January 30th, 2019.

41
00:02:56,870 --> 00:03:00,350
So next we need to standardize them so that they're in the same format.

42
00:03:00,590 --> 00:03:08,300
So if we take our console log and if we update using date pass, let's remember again turning it into

43
00:03:08,300 --> 00:03:14,480
milliseconds and we take our current date value so that object value and we output that.

44
00:03:14,750 --> 00:03:21,380
You're going to see that now when I change it, we're going to get two numbers in milliseconds and obviously

45
00:03:21,380 --> 00:03:22,150
the latter one.

46
00:03:22,190 --> 00:03:26,500
So the January 16th is a larger number than the current one.

47
00:03:26,690 --> 00:03:30,420
So that's how we can calculate how many milliseconds are between the two.

48
00:03:31,040 --> 00:03:37,180
So now we can make that calculation and let's calculate over of time that's between them.

49
00:03:37,800 --> 00:03:40,250
We can just use a variable called T for time.

50
00:03:40,550 --> 00:03:47,330
So taking that end date, which is going to be the bigger one, unless you set your timer to be before

51
00:03:47,330 --> 00:03:49,820
this current date, but that wouldn't make a whole lot of sense.

52
00:03:50,300 --> 00:03:54,930
And then taking this value, we're going to get the number of milliseconds.

53
00:03:54,950 --> 00:03:58,970
So it's console log out t so that we can see that in the console as well.

54
00:03:59,660 --> 00:04:04,260
So now when I change it, we're actually going to get the number of milliseconds between the two.

55
00:04:04,610 --> 00:04:08,090
And as you can see, if I do go negative, we get a negative number.

56
00:04:08,300 --> 00:04:11,110
So we definitely don't want a negative number in our countdown.

57
00:04:11,180 --> 00:04:14,380
And if the number is negative, then that means that we've reached that time.

58
00:04:14,390 --> 00:04:17,310
So then we don't have anything to count down to, of course.

59
00:04:17,600 --> 00:04:21,730
So this is the number of milliseconds that is being output.

60
00:04:22,070 --> 00:04:26,790
So all we have to do is return that value in the time left.

61
00:04:26,810 --> 00:04:32,180
So I log out time left as we're going to be returning something here.

62
00:04:32,180 --> 00:04:38,670
So we returning T for now and I can come into these console messages and we'll get remove them afterwards.

63
00:04:38,870 --> 00:04:42,230
So now we have a value of t this is how many milliseconds.

64
00:04:42,540 --> 00:04:51,380
And in order to get an actual number of days, hours, minutes, seconds out of it, we need to do some

65
00:04:51,380 --> 00:04:54,560
calculations and we can do this by doing so.

66
00:04:54,560 --> 00:04:58,750
Seconds would be equal to ninth floor.

67
00:04:59,030 --> 00:05:00,110
And this is getting rid of.

68
00:05:00,190 --> 00:05:08,320
All the decimal places, and let's do a calculation so we have our value of T if we divide it by a thousand,

69
00:05:08,500 --> 00:05:14,260
that's going to give us the number of seconds that we have available to us, that value of seconds.

70
00:05:14,260 --> 00:05:15,250
How many seconds do we have?

71
00:05:15,250 --> 00:05:15,720
In a minute?

72
00:05:16,090 --> 00:05:17,110
We have 60.

73
00:05:17,380 --> 00:05:23,170
So anything that's beyond that that's going to be moved into minutes, do the same thing.

74
00:05:23,170 --> 00:05:25,850
Four minutes and I show you how this works out afterwards.

75
00:05:26,260 --> 00:05:29,530
So, again, math floor and the same calculation.

76
00:05:30,070 --> 00:05:34,120
So we've got our T divided by one thousand.

77
00:05:34,280 --> 00:05:37,810
So the same thing that we're doing that break by milliseconds.

78
00:05:37,990 --> 00:05:44,590
And this time we need to divide that value by 60 so that we're not overlapping the number of seconds

79
00:05:44,860 --> 00:05:47,760
and then we're going to do a modulus of 60.

80
00:05:48,220 --> 00:05:51,940
So with the modulus does is it returns the remainder amount.

81
00:05:52,540 --> 00:05:56,830
So let's say, for instance, we have let me clear this make this bigger.

82
00:05:57,160 --> 00:06:02,620
Let's say we have a value of 1000 and we do modulus 60.

83
00:06:02,770 --> 00:06:11,470
It's going to return back 40 because we can multiply 60 so many times until we hit nine hundred and

84
00:06:11,470 --> 00:06:12,100
sixty.

85
00:06:12,280 --> 00:06:15,880
And once we hit nine hundred and sixty, there's no more 60s that can go in there.

86
00:06:16,030 --> 00:06:18,850
So we get a modulus return value of forty.

87
00:06:19,540 --> 00:06:20,610
So let's do one more.

88
00:06:20,770 --> 00:06:25,770
So if we do forty five and we do a modulus of nine, what do you think the answer is going to be.

89
00:06:25,780 --> 00:06:29,050
It's going to be zero because nine goes into forty five.

90
00:06:29,170 --> 00:06:29,900
Exactly.

91
00:06:29,920 --> 00:06:30,880
So there's no remainder.

92
00:06:31,060 --> 00:06:35,310
But if we do forty six modulus of nine, what do you think the answer is going to be.

93
00:06:35,320 --> 00:06:41,620
It's going to be one because we get a remainder of one and two and three and so on.

94
00:06:42,010 --> 00:06:49,030
So this is how we can calculate out how much is remaining because once we divide it out so we get a

95
00:06:49,030 --> 00:06:54,040
number here returning back that value that we had here within our selection.

96
00:06:54,310 --> 00:06:59,170
And we're taking that value and we're first dividing it by a thousand.

97
00:06:59,500 --> 00:07:01,720
So that will leave this many seconds.

98
00:07:01,840 --> 00:07:08,830
And if we take this value and if we get a modulus of 60 of it, that gives us 36 seconds.

99
00:07:09,070 --> 00:07:10,930
So that's how much is currently left.

100
00:07:11,140 --> 00:07:15,910
And as that number changes and updates, we're going to have different amount of seconds.

101
00:07:16,150 --> 00:07:22,850
And if we take this number and if we divide it by 60, you're going to get this many minutes are left.

102
00:07:22,870 --> 00:07:24,130
So it's thirty four minutes.

103
00:07:24,520 --> 00:07:28,000
And once again, if we take this number and if we.

104
00:07:29,350 --> 00:07:36,460
Because we know within a day there's 24 hours, so we want to find out exactly how many days are in

105
00:07:36,460 --> 00:07:36,790
here.

106
00:07:37,180 --> 00:07:42,870
So if we take this value, we multiply it by 60 and multiply it by 60.

107
00:07:42,880 --> 00:07:45,840
Again, this is going to give us the number of hours.

108
00:07:45,970 --> 00:07:52,030
And of course, we need to wrap this so that we can do the calculation first and then return back that

109
00:07:52,030 --> 00:07:52,520
value.

110
00:07:53,500 --> 00:07:55,430
So let's add the thousand in.

111
00:07:55,540 --> 00:07:58,270
So we need to know how many days are going to be between the.

112
00:07:59,300 --> 00:08:05,360
The number of hours that are available that are remaining and if we want the number of days that we

113
00:08:05,360 --> 00:08:11,600
just need to multiply it by 20 for this number, so we move the 24 in there and that formula and now

114
00:08:11,600 --> 00:08:12,580
it's going to return back.

115
00:08:12,590 --> 00:08:15,500
How many days are remaining between here?

116
00:08:15,740 --> 00:08:17,750
And, of course, we've got that thousand in there.

117
00:08:17,750 --> 00:08:19,190
So we're not getting the exact date.

118
00:08:19,460 --> 00:08:25,790
But this way, we're getting that there's 11 days that are being returned back and we can see that that

119
00:08:25,790 --> 00:08:27,370
calculation actually comes out.

120
00:08:27,380 --> 00:08:27,790
True.

121
00:08:27,980 --> 00:08:34,760
So if we have 15 and minus three, so there's 11 days and some hours remaining.

122
00:08:35,930 --> 00:08:41,630
So let's bring that into our formula and you can try this out for yourself within the console as well.

123
00:08:41,840 --> 00:08:47,060
So it takes a little bit of practice to get used to what's going to be returned back, but that's essentially

124
00:08:47,060 --> 00:08:48,200
how the modulus works.

125
00:08:48,500 --> 00:08:53,060
So if we have ours, we're going to take our math and floor.

126
00:08:53,060 --> 00:08:56,180
And what math is doing is it's getting rid of all those decimal places.

127
00:08:56,330 --> 00:09:00,450
So instead of having eleven point nine eight, we're just going to be simply returning back 11.

128
00:09:00,950 --> 00:09:03,050
So taking the value of teh.

129
00:09:05,540 --> 00:09:09,470
Dividing it by and the number that we want to divide it by is going to be.

130
00:09:10,590 --> 00:09:17,340
One thousand times, 60 times 60, so whatever that value is, and we're simply returning back to that

131
00:09:17,340 --> 00:09:23,760
modulus of twenty four and let days and then one last one for.

132
00:09:24,970 --> 00:09:32,800
And taking the value of t dividing it by one thousand sixty, or you could calculate what this value

133
00:09:32,800 --> 00:09:38,470
is and simply divide it by that value if you want it to, we're going to return back whatever the value

134
00:09:38,470 --> 00:09:39,080
of T was.

135
00:09:39,250 --> 00:09:40,870
So it gives us our total value.

136
00:09:42,320 --> 00:09:44,600
Next, let's return back days.

137
00:09:46,170 --> 00:09:49,950
And use the variable days and we've got ours.

138
00:09:52,080 --> 00:09:56,970
Return back our value for hours and we'll close off the object there.

139
00:09:58,340 --> 00:10:05,060
And minutes, and these are all values that we can then utilize within our JavaScript to output those

140
00:10:05,060 --> 00:10:09,800
values that are going to be then visible to the person interacting with the application.

141
00:10:10,580 --> 00:10:14,870
So we've got our total we've got our days, minutes, hours and so on.

142
00:10:14,870 --> 00:10:18,110
And we're turning that value back to the user.

143
00:10:18,890 --> 00:10:20,510
Let's beautify that.

144
00:10:20,510 --> 00:10:21,470
Clean that up a bit.

145
00:10:22,190 --> 00:10:26,630
Before we try that, let's get rid of that bracket and refresh.

146
00:10:27,020 --> 00:10:34,160
So now when I hit whatever value we can see that the total is 11 days, 23 hours, 30 minutes, two

147
00:10:34,160 --> 00:10:37,270
seconds, and we're ready to output that to the user.

148
00:10:37,610 --> 00:10:39,010
So that's coming up in the next lesson.

149
00:10:39,410 --> 00:10:46,430
So try this out for yourself and break down the number of milliseconds from that Unix time stamp date

150
00:10:46,520 --> 00:10:53,390
of January 1st, 1970, and use that in order to calculate the difference in milliseconds between the

151
00:10:53,390 --> 00:11:00,530
current data and the suggested date for the timer and and then calculate out the minutes, hours, days,

152
00:11:00,530 --> 00:11:04,310
seconds, and then return that within your JavaScript function.