1
00:00:00,150 --> 00:00:05,070
I know the last lesson was rather long, and this lesson, I promise you, is going to be a little bit

2
00:00:05,070 --> 00:00:10,740
shorter and we are going to be using what we did in the previous lesson where we're actually calculating

3
00:00:10,740 --> 00:00:19,920
out the minutes, hours, seconds that are between the current value that were of our date as well as

4
00:00:20,070 --> 00:00:22,020
the value that's selected within the input.

5
00:00:22,320 --> 00:00:25,740
So now it's just a matter of outputting that within our HTML.

6
00:00:25,950 --> 00:00:31,950
And I know we can do it really easily where we can select our element that has our output.

7
00:00:32,280 --> 00:00:39,060
So we could use clock and we could really easily just output that information into the clock so we could

8
00:00:39,060 --> 00:00:39,840
do clock.

9
00:00:40,530 --> 00:00:46,980
So selecting that object, updating the entire HTML and we could overwrite everything with what's being

10
00:00:46,980 --> 00:00:47,630
returned here.

11
00:00:48,150 --> 00:00:50,460
And this one, let's set up a variable.

12
00:00:51,370 --> 00:00:53,560
So we'll call it T.L. for a time left.

13
00:00:55,600 --> 00:01:02,170
And we can log out that time left value the total value, and this is going to be returned back within

14
00:01:02,170 --> 00:01:05,370
an object format, and that means that we can use it in our JavaScript.

15
00:01:05,380 --> 00:01:07,250
So that's that title being output there.

16
00:01:07,600 --> 00:01:14,290
So if I want to get these, I can do T.L. days and again show you how that works so we get twenty five

17
00:01:14,290 --> 00:01:15,330
days and so on.

18
00:01:15,610 --> 00:01:18,040
So I could really easily type that out.

19
00:01:18,190 --> 00:01:21,430
I could do D space.

20
00:01:23,270 --> 00:01:31,100
And we could pretty much wrap up this lesson so we could do days, hours, minutes and so on, but let's

21
00:01:31,100 --> 00:01:35,660
do something a little bit more difficult and a little bit harder where we're not just going to update

22
00:01:35,660 --> 00:01:39,890
that inner HTML, we're actually going to select the content of those elements.

23
00:01:40,070 --> 00:01:44,000
So as we have an output here, we did create a bunch of span's.

24
00:01:44,090 --> 00:01:50,330
And these spans have classes that correspond with those values that were being returned back from those

25
00:01:50,330 --> 00:01:50,900
objects.

26
00:01:51,260 --> 00:01:58,760
So what we can do is we can match those objects and then update that inner HTML that corresponds with

27
00:01:58,760 --> 00:01:58,940
it.

28
00:01:59,270 --> 00:02:00,470
And I'll show you how to do that.

29
00:02:01,660 --> 00:02:08,050
First of all, let's set up a loop for the objects and setting up a variable so this will be whatever

30
00:02:08,050 --> 00:02:12,100
the property is and this will be whatever the object is.

31
00:02:12,100 --> 00:02:16,760
So properties in object and we're going to loop through them all.

32
00:02:17,860 --> 00:02:21,130
So within the console output, that property value.

33
00:02:23,920 --> 00:02:26,410
Where we have our T.L. object.

34
00:02:27,420 --> 00:02:33,810
And this is going to be the property that's being output within that object, and when we try it out

35
00:02:33,810 --> 00:02:39,030
in our source code, we see that we get all of this information being output so we can also specify

36
00:02:39,030 --> 00:02:42,990
the property itself on its own and click it once again.

37
00:02:43,000 --> 00:02:45,330
So we've got days, hours, minutes, seconds.

38
00:02:45,510 --> 00:02:52,980
And these actually correspond with the classes that we have within our Jowett, within our HTML, so

39
00:02:52,980 --> 00:03:05,400
we can use so set up a temporary element and using document query selector, we're going to select the

40
00:03:05,400 --> 00:03:07,370
element with the class.

41
00:03:07,800 --> 00:03:15,660
So make sure that we do the prefix it with the dot and the name the string value of that particular

42
00:03:15,660 --> 00:03:16,130
object.

43
00:03:16,500 --> 00:03:22,860
So see if we can find a match and we'll output those into the console as well so we can see those in

44
00:03:22,860 --> 00:03:23,400
the console.

45
00:03:23,760 --> 00:03:30,510
So try that out, select something and we can see that we do get these corresponding classes, the corresponding

46
00:03:30,510 --> 00:03:36,240
objects, and if we do get a null, then we can skip that one as well.

47
00:03:36,630 --> 00:03:40,340
So we can see that if it exists.

48
00:03:40,470 --> 00:03:44,630
So if the element exists, then only will output it into the console.

49
00:03:46,170 --> 00:03:50,810
So updating that and that should skip that total value because we don't have a class of total.

50
00:03:51,420 --> 00:03:56,100
And if we go up here, so total got skipped and now we're only outputting it in those elements.

51
00:03:56,370 --> 00:04:04,080
So now we can take that element and we can update the inner HTML with whatever value is associated with

52
00:04:04,080 --> 00:04:04,770
that property.

53
00:04:07,100 --> 00:04:09,350
And let's try that out one more time.

54
00:04:09,890 --> 00:04:15,550
So now we've get 18 days, 23 hours, five minutes, 58 seconds, and this is all dynamic.

55
00:04:15,590 --> 00:04:19,850
So it always updates and it selects those elements properly using the classes.

56
00:04:20,820 --> 00:04:22,430
So go ahead and try this out for yourself.

57
00:04:22,430 --> 00:04:25,010
And I know this was a little bit of a roundabout way to do that.

58
00:04:25,310 --> 00:04:31,340
And it's always great to try different things with JavaScript and this introduce some more advanced

59
00:04:31,340 --> 00:04:35,960
functionality, how you can make selection of those elements within JavaScript.

60
00:04:36,170 --> 00:04:41,980
And you can also update this to clock as well in order to select only within the clock object.

61
00:04:42,320 --> 00:04:47,420
So that will work the same way and that will produce the same result as we saw with the document object,

62
00:04:47,630 --> 00:04:53,240
because remember, once again, the clock is an object and we've built that here using document query,

63
00:04:53,240 --> 00:04:57,290
selector clock, and that's selecting all of that particular block of code.

64
00:04:57,470 --> 00:05:03,920
So if perhaps you might have these classes being used outside of this block of code, then you can really

65
00:05:03,920 --> 00:05:06,140
fine tune your selection process this way.