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
09. Creating a new note

Episodes

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

Transcript

00:00
Let's now tackle creating a new note when we click on New Note just up here.
00:04
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
00:23
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
00:43
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.
01:06
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.
01:26
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,
01:46
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,
02:05
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.

Episode summary

In this episode, we dive into how to create a brand new note when clicking the New Note button in our app. We notice that a lot of the functionality for this is already set up from our app's initialization, where we create a fresh note, set it into the editor, and update the timestamp.

We start off by cleaning up our demo data—removing the example notes that we initially forced. This way, we're starting with just one untitled note, ready for editing. Then, we focus on hooking up the New Note button to our CreateNote method. At first, if nothing happens when you click, we see it's because the button isn't part of an Alpine component yet. So, we make the button (or even the whole thing) an Alpine component, making it easier to add more functionality like showing the count of notes in the future.

After updating and refreshing, we confirm that clicking New Note does exactly what we want: It creates a new note that we can edit, and everything works as expected—the latest edited note moves to the top, and we can freely switch and edit notes.

To finish up, we tidy things by removing the old init method since it's no longer needed. Now, we can create as many notes as we like! The only downside? Our notes still aren't persistent—refreshing the page wipes them out. We'll tackle saving notes between reloads in the next episode!

Episode discussion

No comments, yet. Be the first!