1
00:00:00,120 --> 00:00:01,690
All right, let's get to work.

2
00:00:01,860 --> 00:00:06,960
So, of course, we're navigating back to our people, we're looking for the dark mood.

3
00:00:07,170 --> 00:00:10,360
We have to set up our start of the dev server.

4
00:00:10,400 --> 00:00:14,190
So let me clear everything I'm going to navigate through just in case.

5
00:00:14,850 --> 00:00:18,900
And of course, we'll go city and then set up for Darkman.

6
00:00:19,380 --> 00:00:25,410
And then once we are here, we're going to go then install and P.M. start.

7
00:00:25,890 --> 00:00:31,890
Now, this project is also going to be a bit different because there's going to be more success because

8
00:00:31,890 --> 00:00:39,570
the honestly, when it comes to this darkman, so toggling all the colors or the mode or the theme,

9
00:00:39,570 --> 00:00:43,980
you can even say it is mostly done using the success.

10
00:00:44,010 --> 00:00:48,690
So, yes, of course, there's a little bit of Josquin functionality where we're changing what which

11
00:00:48,690 --> 00:00:50,070
theme we would want on display.

12
00:00:50,520 --> 00:00:55,880
But then as far as most of the functionality, it is actually done using success.

13
00:00:56,250 --> 00:01:02,100
So if you inspect the project and by the way, I don't know why it opened over there, doesn't matter.

14
00:01:02,310 --> 00:01:03,230
I'm going to get it later.

15
00:01:03,510 --> 00:01:10,960
Notice here how I have HDMI element and then I'm adding or removing the class of Darcie.

16
00:01:10,980 --> 00:01:12,570
So check it out once I click.

17
00:01:12,810 --> 00:01:14,510
Now, of course, I have the lighting.

18
00:01:14,850 --> 00:01:16,460
So essentially, this is what we're doing.

19
00:01:16,830 --> 00:01:21,900
So we have the class on the HDMI element and what we're doing with the button.

20
00:01:21,900 --> 00:01:23,850
We're just changing the value.

21
00:01:24,180 --> 00:01:29,040
And then the moment we change the value and of course we have different success variables.

22
00:01:29,220 --> 00:01:33,300
Don't worry, we'll cover that in the bigger detail once we get there.

23
00:01:33,300 --> 00:01:38,940
But I'm just telling you that, yes, and this project will write a bit more success.

24
00:01:38,950 --> 00:01:43,950
And of course, when I say a bit more, that just means that we'll write a few lines of this, because

25
00:01:44,130 --> 00:01:49,850
you probably have noticed that for the rest of the project, we haven't written any access whatsoever.

26
00:01:50,130 --> 00:01:52,260
So I'm going to go with localhost three thousand.

27
00:01:52,270 --> 00:01:53,940
That should be our star.

28
00:01:54,180 --> 00:01:57,690
I'm going to do the same thing on a small screen.

29
00:01:57,960 --> 00:01:59,810
So so we have Dark Mozhdah.

30
00:02:00,240 --> 00:02:07,980
And in order to speed this up, if you take a look at the setup, you'll notice data just so essentially

31
00:02:07,980 --> 00:02:11,300
there jazz are those blog posts.

32
00:02:11,790 --> 00:02:13,410
So we would want to iterate over.

33
00:02:13,980 --> 00:02:18,720
Of course, you wouldn't want to display the data, whether that is title, whether or not is the data

34
00:02:18,960 --> 00:02:20,100
and all that.

35
00:02:20,400 --> 00:02:25,800
And of course, there's also going to be some kind of number with a title and toggle.

36
00:02:26,100 --> 00:02:29,280
So in order to speed this up, I already prepared that data.

37
00:02:30,300 --> 00:02:36,710
And the interesting thing here is notice, of course, we have each particle as an object and then in

38
00:02:36,720 --> 00:02:39,440
the object, we do have the idea, we do have the title.

39
00:02:39,720 --> 00:02:45,990
But then as far as the date, I right away went with vanilla JavaScript, where I went with a new date

40
00:02:46,290 --> 00:02:48,330
and I set some kind of date.

41
00:02:48,930 --> 00:02:54,630
And of course, the goal here is to show you how we can work with moment just because, yes, we can

42
00:02:54,630 --> 00:03:02,860
create a new date in JavaScript, but you won't be able to display in this type of format by default.

43
00:03:03,270 --> 00:03:07,680
So, yes, you can technically work around it using vanilla.

44
00:03:08,160 --> 00:03:10,740
But like I said, it is somewhat of the pain.

45
00:03:10,740 --> 00:03:16,320
And that's why jazz is so, so, so, so, so popular online.

46
00:03:16,320 --> 00:03:22,280
We have the article, which, of course will display that each block lost, of course, and indexes,

47
00:03:22,530 --> 00:03:30,540
which at the moment just has the default setup where we're targeting the euro, meaning the HDMI moment

48
00:03:30,870 --> 00:03:32,910
and we have some serious variables.

49
00:03:33,390 --> 00:03:39,600
I'm not going to go over in more detail at the moment because, of course, we will cover that later

50
00:03:39,840 --> 00:03:42,360
when we start toggling these themes.

51
00:03:42,840 --> 00:03:50,580
And once we're clear what we have set up now, I'd like to navigate to the objets and I'm just going

52
00:03:50,580 --> 00:03:52,650
to worry about my return.

53
00:03:53,100 --> 00:03:57,030
So I'll close the sidebar so I have a bit more real estate.

54
00:03:57,030 --> 00:04:03,870
I'm going to go with the main and in here maybe I'll zoom in two hundred fifty, something like that.

55
00:04:04,200 --> 00:04:10,560
And then inside of the main, I'm going to go with NAV and then in the nav I would want to have a div

56
00:04:10,980 --> 00:04:12,930
with class of nav center.

57
00:04:13,080 --> 00:04:19,710
So we go here now center there and then instead of this there there's going to be one with some kind

58
00:04:19,710 --> 00:04:22,050
of text over reacted.

59
00:04:22,940 --> 00:04:30,650
And by the way, if you're wondering where I got the inspiration for the project, it is coming from

60
00:04:31,190 --> 00:04:31,670
one second.

61
00:04:32,150 --> 00:04:36,890
Let me go to my search engine and I'll type over overreacted.

62
00:04:37,310 --> 00:04:39,890
And the name is Dan Abramoff.

63
00:04:39,890 --> 00:04:42,320
And he's actually part of the reality.

64
00:04:42,440 --> 00:04:48,560
And he always, always provides a lot of useful info, whether that is on Twitter or on his personal

65
00:04:48,560 --> 00:04:48,970
blog.

66
00:04:48,980 --> 00:04:53,360
So if you navigate to the site, you'll see that it is somewhat similar.

67
00:04:53,630 --> 00:04:58,370
Of course, I didn't go into great detail to recreate exactly.

68
00:04:58,610 --> 00:05:04,450
But the main idea is exactly the same, where there's some kind of blog or some kind of blog post.

69
00:05:04,470 --> 00:05:06,800
And of course, he has pages.

70
00:05:06,800 --> 00:05:09,890
We won't create pages in this project, but of course he has them.

71
00:05:10,190 --> 00:05:14,840
And the main idea is this light or dark theme.

72
00:05:15,060 --> 00:05:16,880
So that's where I got the idea from.

73
00:05:17,090 --> 00:05:19,580
That's why the name is overreacted the same way.

74
00:05:20,830 --> 00:05:28,330
And then right next to that one, I'm going to go with my button and I'll out of class also here of

75
00:05:28,330 --> 00:05:33,140
B10, of course, and I would want to go with Tuggle again.

76
00:05:33,170 --> 00:05:35,400
We won't set up any kind of functionality at the moment.

77
00:05:35,860 --> 00:05:37,250
It is not necessary.

78
00:05:37,390 --> 00:05:39,400
We're going to get there in no time.

79
00:05:39,730 --> 00:05:46,570
And then right next to the nerve, I'm going to go with section and then the class will be articles.

80
00:05:46,930 --> 00:05:51,700
So and then inside of the section I would want to iterate over my data.

81
00:05:51,900 --> 00:05:56,890
So over my and we're going to do that by going data and map.

82
00:05:57,280 --> 00:06:01,450
And then remember, we can call it whatever we would want in this case.

83
00:06:01,460 --> 00:06:06,970
I'm just going to be lazy and I'm going to call this item and then we go with a return of an article.

84
00:06:07,360 --> 00:06:12,070
And then, of course, I would want to pass in the Kiprop and that is going to be item that ID.

85
00:06:12,520 --> 00:06:15,280
I'm not so spread out of the item.

86
00:06:15,670 --> 00:06:16,450
So we save it.

87
00:06:17,330 --> 00:06:23,450
We should have article component sense of that, that's what I have currently in my article component

88
00:06:23,900 --> 00:06:29,380
and of course, we would want to navigate there and we'll just set up a simple return.

89
00:06:29,660 --> 00:06:34,400
So at the moment, we won't worry about the date because, of course, I would want to do that using

90
00:06:34,410 --> 00:06:37,190
my address, and I'm going to do that in a separate video.

91
00:06:37,490 --> 00:06:43,310
But for the time being, what I would want is to display the title here, display this snippet.

92
00:06:43,760 --> 00:06:50,460
So some kind of info about the article and the date and of course, the length.

93
00:06:50,750 --> 00:06:58,320
So how long it takes to read the article and then when we talk about the return would go with article.

94
00:06:58,340 --> 00:07:08,060
Of course, I'll add here a class name of post and online as far as the values I'm going to go with

95
00:07:08,360 --> 00:07:12,020
heading to and this is going to be my title.

96
00:07:12,340 --> 00:07:18,320
OK, so so we're going to go with title here and then we're going to go with post info.

97
00:07:18,710 --> 00:07:25,940
So yes, I have the title, but right next to it I would want to go with Post and that info dev and

98
00:07:25,940 --> 00:07:27,920
then eventually there's going to be a date.

99
00:07:28,100 --> 00:07:32,710
So I'm going to go here with spane and I'll just type date for time being.

100
00:07:32,990 --> 00:07:36,130
So I just have the text and then also another spane.

101
00:07:36,380 --> 00:07:40,370
And this is going to be how long it takes to read this particular article.

102
00:07:40,670 --> 00:07:43,310
So we're going to go the length and line.

103
00:07:43,310 --> 00:07:44,930
Of course, I would want to go with men.

104
00:07:45,410 --> 00:07:54,860
And that read, we said we should see something like this on the screen and line still within the post,

105
00:07:55,220 --> 00:07:57,230
but not inside of the post info.

106
00:07:57,620 --> 00:08:02,830
I'm going to go with paragraph and this is where I would want to display my sympathy.

107
00:08:03,350 --> 00:08:05,180
And before we go any further.

108
00:08:06,040 --> 00:08:13,500
I mean, just cancel log, the date went so and not only that, I would want to access it in the G.S.,

109
00:08:13,660 --> 00:08:19,490
so I'm going to go here with date and we should get a big, fat mess.

110
00:08:19,870 --> 00:08:24,430
And the reason why we're getting that, because, of course, we cannot render that currently the way

111
00:08:24,430 --> 00:08:26,610
the format is in the area.

112
00:08:26,950 --> 00:08:33,250
So I'm going to go to my starrer and I'm going to check out the console and you'll notice that, yes,

113
00:08:33,610 --> 00:08:37,960
we're getting some kind of hours, but we can also see two problems.

114
00:08:38,320 --> 00:08:40,670
Well, first of all, this is not particularly helpful.

115
00:08:41,020 --> 00:08:46,140
So, yes, I have the date, but probably I would want to have format like this.

116
00:08:46,420 --> 00:08:46,830
All right.

117
00:08:46,840 --> 00:08:52,090
So the day and the date and then the year instead of this long one.

118
00:08:52,360 --> 00:08:57,850
And also I have a complaint where objects are not valid as a reachout.

119
00:08:58,000 --> 00:09:01,930
And that is essentially something that we're going to fix in the next video.

120
00:09:02,200 --> 00:09:07,990
So I'm going to go back to the hard core values and of course, we'll explore the moment.

121
00:09:07,990 --> 00:09:09,340
A jazz library.

122
00:09:09,460 --> 00:09:14,080
For the time being, this is something that we should have on a screen where we have the Navar.

123
00:09:14,320 --> 00:09:19,990
We have a list of our posts with title, with the snippet and rest of the info.

124
00:09:20,040 --> 00:09:24,520
And of course, we can click all day long and nothing is going to happen since we haven't added that

125
00:09:24,520 --> 00:09:25,830
functionality yet.