All right, let's get to work.
So, of course, we're navigating back to our people, we're looking for the dark mood.
We have to set up our start of the dev server.
So let me clear everything I'm going to navigate through just in case.
And of course, we'll go city and then set up for Darkman.
And then once we are here, we're going to go then install and P.M. start.
Now, this project is also going to be a bit different because there's going to be more success because
the honestly, when it comes to this darkman, so toggling all the colors or the mode or the theme,
you can even say it is mostly done using the success.
So, yes, of course, there's a little bit of Josquin functionality where we're changing what which
theme we would want on display.
But then as far as most of the functionality, it is actually done using success.
So if you inspect the project and by the way, I don't know why it opened over there, doesn't matter.
I'm going to get it later.
Notice here how I have HDMI element and then I'm adding or removing the class of Darcie.
So check it out once I click.
Now, of course, I have the lighting.
So essentially, this is what we're doing.
So we have the class on the HDMI element and what we're doing with the button.
We're just changing the value.
And then the moment we change the value and of course we have different success variables.
Don't worry, we'll cover that in the bigger detail once we get there.
But I'm just telling you that, yes, and this project will write a bit more success.
And of course, when I say a bit more, that just means that we'll write a few lines of this, because
you probably have noticed that for the rest of the project, we haven't written any access whatsoever.
So I'm going to go with localhost three thousand.
That should be our star.
I'm going to do the same thing on a small screen.
So so we have Dark Mozhdah.
And in order to speed this up, if you take a look at the setup, you'll notice data just so essentially
there jazz are those blog posts.
So we would want to iterate over.
Of course, you wouldn't want to display the data, whether that is title, whether or not is the data
and all that.
And of course, there's also going to be some kind of number with a title and toggle.
So in order to speed this up, I already prepared that data.
And the interesting thing here is notice, of course, we have each particle as an object and then in
the object, we do have the idea, we do have the title.
But then as far as the date, I right away went with vanilla JavaScript, where I went with a new date
and I set some kind of date.
And of course, the goal here is to show you how we can work with moment just because, yes, we can
create a new date in JavaScript, but you won't be able to display in this type of format by default.
So, yes, you can technically work around it using vanilla.
But like I said, it is somewhat of the pain.
And that's why jazz is so, so, so, so, so popular online.
We have the article, which, of course will display that each block lost, of course, and indexes,
which at the moment just has the default setup where we're targeting the euro, meaning the HDMI moment
and we have some serious variables.
I'm not going to go over in more detail at the moment because, of course, we will cover that later
when we start toggling these themes.
And once we're clear what we have set up now, I'd like to navigate to the objets and I'm just going
to worry about my return.
So I'll close the sidebar so I have a bit more real estate.
I'm going to go with the main and in here maybe I'll zoom in two hundred fifty, something like that.
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
with class of nav center.
So we go here now center there and then instead of this there there's going to be one with some kind
of text over reacted.
And by the way, if you're wondering where I got the inspiration for the project, it is coming from
one second.
Let me go to my search engine and I'll type over overreacted.
And the name is Dan Abramoff.
And he's actually part of the reality.
And he always, always provides a lot of useful info, whether that is on Twitter or on his personal
blog.
So if you navigate to the site, you'll see that it is somewhat similar.
Of course, I didn't go into great detail to recreate exactly.
But the main idea is exactly the same, where there's some kind of blog or some kind of blog post.
And of course, he has pages.
We won't create pages in this project, but of course he has them.
And the main idea is this light or dark theme.
So that's where I got the idea from.
That's why the name is overreacted the same way.
And then right next to that one, I'm going to go with my button and I'll out of class also here of
B10, of course, and I would want to go with Tuggle again.
We won't set up any kind of functionality at the moment.
It is not necessary.
We're going to get there in no time.
And then right next to the nerve, I'm going to go with section and then the class will be articles.
So and then inside of the section I would want to iterate over my data.
So over my and we're going to do that by going data and map.
And then remember, we can call it whatever we would want in this case.
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.
And then, of course, I would want to pass in the Kiprop and that is going to be item that ID.
I'm not so spread out of the item.
So we save it.
We should have article component sense of that, that's what I have currently in my article component
and of course, we would want to navigate there and we'll just set up a simple return.
So at the moment, we won't worry about the date because, of course, I would want to do that using
my address, and I'm going to do that in a separate video.
But for the time being, what I would want is to display the title here, display this snippet.
So some kind of info about the article and the date and of course, the length.
So how long it takes to read the article and then when we talk about the return would go with article.
Of course, I'll add here a class name of post and online as far as the values I'm going to go with
heading to and this is going to be my title.
OK, so so we're going to go with title here and then we're going to go with post info.
So yes, I have the title, but right next to it I would want to go with Post and that info dev and
then eventually there's going to be a date.
So I'm going to go here with spane and I'll just type date for time being.
So I just have the text and then also another spane.
And this is going to be how long it takes to read this particular article.
So we're going to go the length and line.
Of course, I would want to go with men.
And that read, we said we should see something like this on the screen and line still within the post,
but not inside of the post info.
I'm going to go with paragraph and this is where I would want to display my sympathy.
And before we go any further.
I mean, just cancel log, the date went so and not only that, I would want to access it in the G.S.,
so I'm going to go here with date and we should get a big, fat mess.
And the reason why we're getting that, because, of course, we cannot render that currently the way
the format is in the area.
So I'm going to go to my starrer and I'm going to check out the console and you'll notice that, yes,
we're getting some kind of hours, but we can also see two problems.
Well, first of all, this is not particularly helpful.
So, yes, I have the date, but probably I would want to have format like this.
All right.
So the day and the date and then the year instead of this long one.
And also I have a complaint where objects are not valid as a reachout.
And that is essentially something that we're going to fix in the next video.
So I'm going to go back to the hard core values and of course, we'll explore the moment.
A jazz library.
For the time being, this is something that we should have on a screen where we have the Navar.
We have a list of our posts with title, with the snippet and rest of the info.
And of course, we can click all day long and nothing is going to happen since we haven't added that
functionality yet.