Build a Notes App with Alpine.js
This episode is for members only

Sign up to access "Build a Notes App with Alpine.js" right now.

Get started
Already a member? Sign in to continue
Playing
06. Touching the last edited date and time

Episodes

0%
Your progress
  • Total: 55m
  • Played: 0m
  • Remaining: 55m
Join or sign in to track your progress

Transcript

00:00
When we make any changes to the note that we have in our current note view, we want to touch a timestamp on the note that we are currently editing. Now what that means is we can then order these notes by the last edited
00:15
and therefore when we eventually put these into local storage and we refresh the page, we can order them by the last edited and grab the last note that we actually edited. That's pretty much what we would expect from a notes app. So the first thing that we need to do is figure out that when we type something in this input here
00:34
or this text area here, how do we touch a timestamp on the current note? Let's look at the event handler for this first of all and we'll start with the input for the title. So we're going to use on and we're going to say key up and we're going to go ahead and debounce this. The reason being is we don't want this run for every time we hit a key on the keyboard.
00:57
We're going to give this about 200 millisecond delay before we then go ahead and touch the current note. So if the user is constantly typing, we don't want to have this method that we're about to call called every single time. We want a slight delay. We'll see how that works in just a second if you're new. So from this what we're going to do is access our store, access notes or the note store
01:20
and we're going to call a touch current note method and invoke that. So let's go ahead and just call that in here. So let's just say touch current note and we will just console log something out in here just so we can see how this works. So we'll just say touch timestamp. Great. Okay, let's head over and let's go ahead and edit this and you'll see we get touch timestamp.
01:46
Now you'll have noticed that slight delay that's from the debounce. If I just keep typing say ab over and over again, notice that method is not called until I stop for about 200 milliseconds. Then it goes ahead and touches the timestamp. I've noticed also we have a slight bug here with the UI which we'll fix up. Okay, so now that we have that done, let's go and apply that to our text area as
02:11
well because we also want the current timestamp touched when we edit the text area. So let's go ahead and do that again and there we go. So how are we going to go ahead and touch a timestamp on the current note? Well, let's go down to this method and the first thing that we want to do is access the current note. We want to set a property on here like last edited. Now we don't
02:36
have that when we create a note so what we could do is add that in here now. So let's say last edited and we could just say zero and in here we want to go ahead and set that and again we're just going to use date now because that kind of makes sense and that's pretty much it. So we now have the last edited timestamp on the current note that we are editing which is really the only thing we
02:57
care about because the current note is the only thing that's ever going to be in view. So now that we want to what we want to do is output the actual timestamp here so when we type here we can actually make use of this and see it. So that's just going to be a display thing. So let's go up to where our current list of notes is and we have our timestamp just here which we can get rid of and we can use
03:21
x text to output that in here. So let's start out by just outputting the current note last edited time and see what we get. So of course by default that is nothing but when I do make a change we see the timestamp in there for that if I do it again you can see that the timestamp just keeps getting updated every time we edit it. So now all we need to really do is format this to make it work. So on
03:46
here let's go ahead and instead of just outputting the last edited time we're going to go ahead and do something a bit more useful. So let's go and just grab this out of here and I'm actually going to pull this down to make it a little bit easier for us to read. So what do we want to see in here well we want to see the hours and the minutes that this was updated. So if we just update that to the
04:08
string zero zero colon zero zero it's exactly what we saw before. So let's work on the hours first of all. We'll keep these back ticks in here so we can go ahead and use string interpolation to output this and we're first of all going to create a new date object we're going to pass through the last edited date into that date object and then we can start to do things like get hours like so and that's
04:31
going to give us the hours that we get. Now at the moment that's just going to end up as not a number so what we can do is we can use to string on this and have a look and we end up with 21. Now we end up with zero to start with because we have a zero value but that's fine we're going to be touching these time stamps as soon as we create them and the reason that we see not a number is because
04:53
in here we don't have a last edited time so just kind of ignore that initially for now. So this is 21 so nine nine o'clock so now that we've done that let's go up and finish this off with the minutes as well so let's pretty much just grab all of what we've done here add a colon and then add in get minutes simple as that let's go over and give that a refresh let's make a change and you can see
05:23
that we get eight now eight isn't great because we kind of want to pad this out to make it actually look a time it doesn't really look a time at the moment so to do this for both of these both the hours and the minutes we can go ahead and use pad start and we can say that we want this to be two characters in length but we want to pad that with a zero and we'll put that in a string so we want
05:45
to start this with a zero if it's a single digit number we can do the same for this one so let's say pad start two and again zero so that's going to end up as 21 09 and if this was say five it would be 0 5 0 9 so hopefully that makes sense okay so now we're actually outputting the timestamp and we're touching that really really importantly now we want to kind of do this when we first
06:14
create a new note or really whenever we create a new note so what we're going to do is we're going to say touch current note here as well so when we create a note initially the last edited time is technically the time when this note was created now what we can do to test this is get rid of the two fake notes that we have inside of our data and when we first land on
06:35
this you can see that this untitled note has a time here and of course it's been set to the current time so i can just say a new note and you can see that the time has been changed as well so this is a new note so every time we edit that we're going to see this and you could even include the seconds there if you wanted to or the full date so we're now touching the current note to
07:00
update the last edited time which is going to be really useful for the ordering of this list what we're going to do is just bring back the two fake notes that we created which at the moment we know have a not a number output from the manipulation we're doing at the day and we're going to look at ordering these notes now

Episode summary

In this episode, we tackle how to keep track of when each note in our notes app was last edited. This is a pretty standard feature in any decent notes application and super useful for sorting and displaying our notes by recent activity.

Here's what we do: Every time you change the title or content of a note, we automatically update a last edited timestamp on that note. To keep things efficient and not bog down the app, we use a little debounce trick—so the timestamp only updates if you pause typing for about 200 milliseconds, rather than updating after each keystroke.

We wire up this logic to both the note title input and the main text area. Then, we adjust the note data structure to have a last edited property, and display that value in the UI. To make it readable, we format the timestamp to show hours and minutes, with some nice zero-padding so it always looks like a clock (e.g., 21:09 instead of 21:9).

We also make sure that when you create a new note, its last edited time is set right away—so even fresh notes show up with the correct timestamp. At the end of the episode, the groundwork is in place for sorting your notes by when they were last touched, and we preview how to move on to actually ordering the list using that timestamp in the next episode.

Episode discussion

No comments, yet. Be the first!