1
00:00:00,420 --> 00:00:07,410
In this lesson, we're going to be looking at JavaScript Dete, which allows us to get back the current

2
00:00:07,410 --> 00:00:10,200
date using the JavaScript date object.

3
00:00:10,650 --> 00:00:16,590
We've got an example here at the Mozilla Developer Network where we create a brand new date object.

4
00:00:16,890 --> 00:00:22,950
And then within that date object, we have an option to set the date and we can return back a specific

5
00:00:22,950 --> 00:00:24,750
date being returned back.

6
00:00:25,020 --> 00:00:29,860
Or what we can do is we can just specify JavaScript date.

7
00:00:30,300 --> 00:00:34,380
So in order to see that in action, we can set up a variable.

8
00:00:34,380 --> 00:00:35,610
We can call it Dete.

9
00:00:36,990 --> 00:00:44,250
And using DEET, we can do new DEET, and now when we output DEET, we see the current DEET and the

10
00:00:44,250 --> 00:00:50,550
time stamp, just as we see here that's available within the demo using DEET.

11
00:00:50,580 --> 00:00:54,270
We can also be more specific so we can set a value.

12
00:00:54,270 --> 00:01:01,440
We can also use a date string and then we can also use this type of format as well, where we've got

13
00:01:01,440 --> 00:01:07,200
the year, the month index and then we've got the days, hours, minutes, seconds and milliseconds.

14
00:01:07,530 --> 00:01:11,610
So that gives us the ability to set the date in a number of different formats.

15
00:01:12,270 --> 00:01:20,700
Using the date object, we can also return back specific hours within a specified date so we can return

16
00:01:20,700 --> 00:01:27,330
back a date or we can use the current date and we can get the hours associated with the current date.

17
00:01:27,660 --> 00:01:31,230
So let's open up our editor and we're going to try out using the date object.

18
00:01:35,090 --> 00:01:42,430
First, let's set up and set our button to be interactive, to have an event listener, so grabbing

19
00:01:42,440 --> 00:01:50,990
that button element, using a document query selector, selecting it by tag, so using button, adding

20
00:01:50,990 --> 00:01:53,840
in an event listener or adding an event listener to the button.

21
00:01:54,230 --> 00:01:58,680
So whenever it gets clicked, we're going to invoke the function called show output.

22
00:01:59,180 --> 00:02:00,640
Let's set up that function.

23
00:02:00,680 --> 00:02:06,080
So so output is the function that we want it to create and then within so output for now we're going

24
00:02:06,080 --> 00:02:09,110
to console, log out, refresh.

25
00:02:09,890 --> 00:02:11,440
So our button now should be clickable.

26
00:02:11,720 --> 00:02:13,580
We've got works being output there.

27
00:02:13,760 --> 00:02:15,350
Now let's bring in the date object.

28
00:02:15,500 --> 00:02:18,110
So setting up our date under const.

29
00:02:19,540 --> 00:02:23,650
Using new Dete objects are setting that in JavaScript.

30
00:02:24,930 --> 00:02:29,250
And we want to get the current hours of the date right now.

31
00:02:30,910 --> 00:02:33,100
So we can console log out.

32
00:02:34,240 --> 00:02:40,600
And using that brand new date object that we just created, we can use a method called get date, get

33
00:02:40,600 --> 00:02:47,080
ours, get full year so we can return back any one of those objects that are available within the date

34
00:02:47,080 --> 00:02:47,590
object.

35
00:02:49,780 --> 00:02:57,190
Let's refresh Klick message, and now we've got get ours is being returned back, so this is actually

36
00:02:57,190 --> 00:02:57,840
a function.

37
00:02:57,850 --> 00:03:00,340
So don't forget to add in the curly brackets.

38
00:03:00,670 --> 00:03:07,330
Try that one more time and you can see that it returns back the current hours within a 24 hour clock

39
00:03:07,540 --> 00:03:08,890
of the current time.

40
00:03:08,900 --> 00:03:12,140
So it's five p.m., which is seventeen hundred hours.

41
00:03:12,340 --> 00:03:14,980
So go ahead and try this out for yourself.

42
00:03:15,490 --> 00:03:22,810
Set up your HTML, add in a button, make that button clickable with an event listener, and then once

43
00:03:22,810 --> 00:03:29,800
the button is clicked, create a brand new date object and get the current hours that are available

44
00:03:29,800 --> 00:03:31,180
within that date object.

45
00:03:31,600 --> 00:03:32,710
Try it out for yourself.

46
00:03:32,950 --> 00:03:34,330
And coming up, the next lesson.

47
00:03:34,330 --> 00:03:40,510
We're going to continue to build out this project, creating a welcome message depending on what the

48
00:03:40,510 --> 00:03:41,410
time of day it is.

49
00:03:41,530 --> 00:03:47,890
So customized welcome message, depending on the time of day that the user clicks the message button.