1
00:00:00,180 --> 00:00:08,910
All right, so we've got some kind of date, but the goal is to have more friendlier format when we

2
00:00:08,910 --> 00:00:09,480
display that.

3
00:00:10,260 --> 00:00:18,500
And if you have taken my vanilla jobs, of course, or if you have been working on my Vanilla Joska

4
00:00:18,520 --> 00:00:23,600
project, you know that there is a way how you can do that in villages.

5
00:00:23,760 --> 00:00:28,130
So let me just quickly assure you, we have vanilla JavaScript projects.

6
00:00:28,500 --> 00:00:30,480
So these are all the projects we're doing.

7
00:00:30,480 --> 00:00:36,750
And my vision, not just course, but more specifically, we have this countdown timer.

8
00:00:37,200 --> 00:00:44,690
And you'll notice that we have the format, we have the day, we have the date and the month and the

9
00:00:44,690 --> 00:00:45,270
year, of course.

10
00:00:45,750 --> 00:00:50,010
And yes, in this project, we did everything using vanilla.

11
00:00:50,070 --> 00:00:50,420
Yes.

12
00:00:50,910 --> 00:00:55,770
But if you worked on a project, you know that it wasn't a walk in the park.

13
00:00:56,250 --> 00:00:58,050
It wasn't just a few lines of code.

14
00:00:58,620 --> 00:01:02,000
There was some intense coding involved.

15
00:01:02,430 --> 00:01:08,850
And of course, when I say intense, it doesn't mean that it was particularly hard, but it just took

16
00:01:08,850 --> 00:01:13,250
us at least 20 lines of code to get this kind of person.

17
00:01:13,830 --> 00:01:20,600
And instead, in this project, instead of going the religious route, I'm going to show you a moment

18
00:01:20,640 --> 00:01:26,910
just which is, like I already previously mentioned, one of the most popular libraries to work with

19
00:01:26,910 --> 00:01:28,230
JavaScript page.

20
00:01:28,680 --> 00:01:35,430
And you simply go to moment a Jayesh and then in here follow the link.

21
00:01:35,880 --> 00:01:41,850
So and in order to install the package, you just need to go with NPM install moment.

22
00:01:41,850 --> 00:01:48,770
And then, of course, on this project, if you check out the package based on where you have it.

23
00:01:49,200 --> 00:01:50,270
So we have the moment.

24
00:01:50,280 --> 00:01:57,180
Yes, I'm just telling you, if you need to install it for your own project and then once you install

25
00:01:57,180 --> 00:02:01,290
it, we need to run moment and then how we would want to format it.

26
00:02:01,560 --> 00:02:05,570
Now, I'm not going to cover each and every option they provide.

27
00:02:06,120 --> 00:02:09,030
You know where to find the documentation.

28
00:02:09,290 --> 00:02:12,410
Of course, you can experiment with your own values.

29
00:02:12,750 --> 00:02:20,760
In my case, essentially, we're just going to go with day nine of the date as well as the year.

30
00:02:21,090 --> 00:02:26,730
And the idea is following where we go with some kind of letter on this, because if we want to have

31
00:02:26,730 --> 00:02:32,930
a month, which is go with four arms, and of course, we will tinker around with these values a little

32
00:02:32,940 --> 00:02:35,240
bit just so I can see different results.

33
00:02:35,640 --> 00:02:39,510
So we would need to navigate back to our project.

34
00:02:40,020 --> 00:02:46,760
And we're looking for article I already imported at the moment, from the moment that's the library.

35
00:02:47,160 --> 00:02:53,100
And then you can either do it above the return if you want to test out the values or you can simply

36
00:02:53,100 --> 00:02:58,060
do it directly in the process where I'm going to go back to the Joske plant.

37
00:02:58,410 --> 00:02:59,700
That's why I have the Curley's.

38
00:03:00,090 --> 00:03:03,590
Then we go with the moment and we would need to pass in that date.

39
00:03:04,200 --> 00:03:07,130
So, of course, every article gets its unique date.

40
00:03:07,380 --> 00:03:13,800
So we just pass in the date and then once we get the date, then we would want to run for a month and

41
00:03:13,800 --> 00:03:16,250
then how we would want to format that date.

42
00:03:16,680 --> 00:03:17,970
So I'm going to go here with date.

43
00:03:18,850 --> 00:03:24,640
And then right after that, we're going to go with format and then, like I said, I'm going to go with

44
00:03:24,640 --> 00:03:31,270
day, the date and then year, but we will tinker with these values a little just so I can see different

45
00:03:31,270 --> 00:03:31,720
results.

46
00:03:32,110 --> 00:03:39,150
And in order to get my format, I just need to go with Forty's then D and then all the nonsense.

47
00:03:39,170 --> 00:03:40,090
I would want to have a comma.

48
00:03:40,210 --> 00:03:46,930
I just add a comma, just like in regular text and in order to display the year which is go with four

49
00:03:46,930 --> 00:03:48,880
uppercase, why now?

50
00:03:48,880 --> 00:03:54,570
If you want to see how it's going to look like with different values, we'll just change it around.

51
00:03:54,910 --> 00:03:57,850
What if we go here with one simple B?

52
00:03:58,420 --> 00:04:02,230
Then of course we just get four, meaning the date is four.

53
00:04:02,630 --> 00:04:09,730
If you're going to go with two days and of course you're getting a shorter name so you don't have some.

54
00:04:09,740 --> 00:04:11,740
They just have short name.

55
00:04:11,800 --> 00:04:17,020
If you go with three, as you can see now, you're getting three letters and hopefully you get the gist.

56
00:04:17,350 --> 00:04:24,480
So if, for example, I would want to add the month, I just go here and I'm going to say four MS.

57
00:04:24,520 --> 00:04:29,700
And now I have October and then Sunday fourth and then twenty twenty.

58
00:04:30,220 --> 00:04:38,590
And if I'm going to go to uppercase and then of course I'm just getting the number for my month.

59
00:04:38,980 --> 00:04:46,030
And since October is a ten month, that's why you have value often now if you don't pass anything.

60
00:04:46,180 --> 00:04:50,650
So if I remove everything then of course I'm just going to have this long value.

61
00:04:51,010 --> 00:04:53,920
So I'm going to go back to my original one.

62
00:04:54,340 --> 00:05:00,660
So DDD and the on line, of course I would want to display the year as well.

63
00:05:00,970 --> 00:05:07,570
And like I said, if you're interested in different formats, not navigate the documentation and get

64
00:05:07,570 --> 00:05:09,190
the value that you need.

65
00:05:09,460 --> 00:05:16,570
But the basic setup would be following where you would need to install the moment a library and you

66
00:05:16,570 --> 00:05:23,710
just one moment, which of course is already important from the moment, just library and then you pass

67
00:05:23,710 --> 00:05:27,490
in the date, which of course, in our case is available in our article.

68
00:05:27,910 --> 00:05:34,990
Then we invoke format and we just need to specifically say, well, what is the format that we're looking

69
00:05:34,990 --> 00:05:35,250
for?

70
00:05:35,650 --> 00:05:41,740
And with one line of code, essentially, you get the format that you are looking for.