Now, before we work on the date,
there is one important thing,
a little bit of extra CSS knowledge,
which I absolutely want to highlight here.
This post body here,
has all the line breaks
I added in the text area when we created the post.
And that is not something you should take for granted,
because early in the course, you learned, that by default,
the browser ignores all the white space,
and all the line breaks in the HTML code.
And dynamically output text is no exception from this.
But, you can override that default.
And what I did do here, is in my styles,
in the posts.CSS file at the very bottom,
we have this style here for the element, with the body ID.
And there I set the white space CSS property to pre-wrap.
And that's a built in CSS property
that allows us to control the browsers behavior,
when it comes to dealing with white space and line breaks.
Now, we've got a couple of values here,
which we can assume.
And normal if we use that, and save that,
would actually not contain
the white space and line breaks.
So then, line breaks and white spaces are ignored,
as they always are.
So that's the default behavior.
And hence this text here does not have the line break,
which we did enter in our text area.
Now, very often you want that default,
which is why it is the default,
but especially in cases like this,
where you want to output some user-generated data,
you might not want that.
And that's why we have different modes here,
and you can simply play around with them,
but pre-wrap will simply make sure that white space
and line breaks are preserved.
And that, therefore, if a reload,
we do have that line break again.
So, that's something worth keeping in mind.
Whenever you have some HTML code that contains line breaks,
and white space,
which you want to preserve,
this CSS property with this concrete value
will be your friend.
And here I'm using it to preserve that user input.
Now with that, we're outputting the details.
The date, however,
is not formatted in the way I want it to be formatted.
And therefore,
I'll do a little bit of extra work on the backend,
in my route, to format the date appropriately.
Here after checking that I do have a post,
I will actually add a new constant post data, for example,
which will be a new object.
And that will be the object I want to pass to my template.
So, the object that should hold all the posts data.
Therefore, first of all,
I will use the spread operator you learned about,
to get all the data off my single post into that object.
Now, this operator insures that
we take all the key value pairs that are part
of this single post object,
which we have here as the first item in the posts array,
and all those key value pairs
are spread out into this new object.
So they are copied over into this new object, you could say.
So with that,
I simply created
a copy of that first item in the posts array.
I did that, because now I will enrich this copy.
I will enrich this object with more data.
To be precise, I want to overwrite the date property,
which would have been part of this post,
with a different formatted date.
I want to access the date that's stored in that first post,
but call toISOString on it.
The date which we got here.
So the date,
which is stored in the database, by default,
is converted into a date JavaScript object,
by the mySQL package.
When it sees a date or a date-time value in the database,
and you fetch that data,
it will convert it into a date object for you.
Therefore, we can call date object methods on it,
like toISOString,
which converts it into a standard, machine readable,
string representation.
Which is what we'll need for this date-time attribute here.
There, we want to have a machine readable representation,
and we will get that by calling toISOString.
But in addition,
I also want to have a human readable representation.
So, I'll add a human readable date here.
The property name is up to you,
because it's your object,
and I'm simply adding a new property to it.
And that will be posts[0].
So that single post we have .date,
which is a date objects you learned,
to local date string,
and make sure you don't add a typo in there,
which is another built in method,
you can call on date objects.
This allows us to transform this date into a string
that is human readable.
So that is formatted in a certain way.
For that, we first of all,
as a first parameter value have to pass in the local,
which we want to use, like E N U S.
And then we pass in a second parameter value,
which is an object
with the options that tell JavaScript
how that date should be formatted.
And you can search for JS toLocalDateString
to find the MDN documentation
with all the options you have there and how they work,
if you want to play around with that.
What I want to do here is,
I want to add a weekday option,
and set that to 'long',
add a 'year' option,
so the year key with a value of numeric,
add a month key with a value of long,
and a day key with a value of numeric again.
And again,
to find out which keys are supported,
and which values are supported for which key,
you can dive into these docs.
If you want to deeply dive into this specific method,
and how it works.
This will give us a nicely formatted date.
And hence,
I will now pass this post data into my post here,
instead of post zero in line 63,
and then the post detail template,
we can now utilize these new fields.
Here for the machine readable field,
I still will access post date,
because we now did
overwrite that with a more machine-readable version.
But between the time text,
I will now output post.humanReadableDate.
And this field will be available,
because it is a field we added to this object,
which we pass as a post into the template.
Hence with that,
after adding all of this here in the template,
if you save all the files,
and you reload this single post page,
now we've got that more human readable version off the date.
And that's, of course, also just a little bonus,
not directly related to fetching data from a database,
but I find it important to also show you
what you can do with data coming from such a data source,
and that is one possible example.
And with that,
we're now also showing the details about a post
that's working,
we have the list of posts,
we can add posts,
what's missing, of course,
is the feature to update,
and to delete posts.
As always, as mentioned before,
feel free to try implementing those features on your own.
We're going to work on those features together
in the next lectures.