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

And we pretty much already have the functionality for this because when we first initialize our app, we know we always want to create a fresh note in here, set it into the editor view, and then update the current timestamp. So what we can actually do here is get rid of the two example notes that we forced inside of

our data. And we can come over and see our untitled note here, which we can start to edit. And this works nicely, as we would expect. But then we can click to create a new note and have that automatically put into view. So let's go over and see how this works. So we have this Create Note method. Let's go up to where we have our New Note

button. And let's hook this up. So X on click Store Notes and Create Note. Let's invoke that, see what happens. So when we refresh, we get an untitled note. We're just going to say ABCDEF, hit New Note. And nothing happens at the moment. Let's go over and see why. OK, that's just because none of this is an Alpine component.

So we could even make this single button an Alpine component, or we can make the whole thing an Alpine component. So let's do that because we might want to do something else in here, like output the count of notes that we have at some point. Let's go over and give that a refresh. We'll update the fresh note that we get created when we first land on the page.

Hit New Note. And you can see, sure enough, that's created a new note, which we can now edit. So I'll just say this is a new note and a new note body. And then I can switch back to the original note, edit that. We know that bumps to the top, because that's the latest edited. And there we go. It's as simple as that to create a new note,

because we have implemented everything we need to kind of get this working. So the last thing I'm just going to do is get rid of the init method we have up here, because we don't actually need, well, we don't need any of that span at all. That's just kind of getting in the way now. So there we go. We now have a fresh note to start with,

the ability to create any amount of new notes that we want. And that's it. What would be really useful at this point would be to persist the note state, because at the moment, every time we refresh the page, anything that we have added to our notes gets removed. So let's tackle that in the next episode.