Build a Notes App with Alpine.js
Playing
03. Initialising and 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
The first thing that we want to do when we land on this page is create a new note. Now there is a condition around that. If there is already a note in the storage, we don't want to create a new note.
00:12
But we're going to start off by just pushing a new note to the stack. We don't have any kind of storage in place at the moment. We're going to be using local storage for that later. But let's look at doing that and then just dumping our list of notes out on the page.
00:25
Now we don't even have Alpine pulled in at the moment. So I'm going to go ahead and grab version 3 just here. Let's go up to the top of the page and we'll just put that in the header. So now we have Alpine pulled in.
00:36
Now, of course, at the bottom of the page, just after our wrap-up for our entire design, we can go ahead and create a script tag out just here. And let's go ahead and start to listen for Alpine initializing. Remember, if you've watched the series on state management,
00:52
we need to go ahead and add an event listener to our document, which is Alpine, and init. So we need to wait for Alpine to initialize. And then this closure that we run, we will now have access to Alpine, which we can then use to define out a store.
01:08
So if we do this outside of this event listener, it's not going to work. So we wait for Alpine and then we define a store. This store is just going to be called notes. And it's just going to be an object inside of here.
01:20
So we are going to start out with some data, which is just going to be our state. So let's go ahead and just add in an array inside of here to start with. Now, when we initialize this store, which can be done with the init method, similar to normal Alpine components, this is where we want to go ahead and create a new node.
01:38
So just to get started with, just to make sure we're on the right track, let's just go ahead and say create node inside of here. If we come back over, close this off, give this a refresh, make sure we open our console here.
01:51
Sure enough, we see create node dumped out. So this is where we can start the process of creating a new node. Now, we're not going to do this all in here because, of course, creating a new node doesn't just happen on initialization.
02:02
It happens when we click the new node button. So let's go ahead and call a create node method out in here. And then let's just go ahead and define that. So create node.
02:12
And of course, this is just a standard function. And we can do something inside of here to actually create a new node. So let's, before we do that, go right up to the top of our wrapper and just dump out what we see inside of our state.
02:28
So I'm going to go ahead and make this span a Alpine component. And we're going to go ahead and use X text. In fact, it'd probably be better to set up an init method in here. So let's do that now, just so we can kind of keep an eye on what we're doing.
02:43
Let's pull this down. And let's go and inside of this object, say init, and let's console log in here on this store and notes and data, just so we can see what's in there.
02:58
If we give that a refresh, we just end up with an empty object in here or an empty array. And that's pretty much it. But now let's create a new node on the initialization of this.
03:08
So let's think about the kind of data that we're actually going to need for a node. We'll kind of map it out here first. So a node's going to have a unique ID. That's really, really important.
03:17
We'll figure out how to generate that in a second. The other pieces of really important information, of course, are a title and a body. So let's go ahead and just say ABCDEF.
03:28
And let's go over and just give this a refresh. So sure enough now, the array inside of here has that item that we have just set initially in here. But we don't want to do that directly in here.
03:39
That's going to come from our local storage for nodes that have already been saved. So let's think about how to generate an ID. We're going to do this in a really, really simple way and just use DateNow. Not the best solution.
03:51
There are lots of different ways that we could do that. A UUID would be better, or if you're storing this in a database, of course, using the primary key you get back from your database. But let's just roll with using DateNow, which will just be the current timestamp.
04:05
So now let's say this data. And, of course, what we want to do is add it to the list of already included data. So let's go and just define out an entire array that we're going to replace with this data. Inside of here is going to be the new node, just inside of this object.
04:24
And then what we're going to do is spread in the existing nodes. If that doesn't make sense, we'll take a look at that in a second. But let's add that ID in here. And let's add the title in, which is going to be an empty string,
04:34
and the body in, which is going to be an empty string as well. So effectively what we're doing, generating an ID, constructing a new array with the existing nodes inside of data, plus an additional node with the ID, the title, and the empty body. So let's go over now and just give that a refresh.
04:51
And we should end up with an ID of the current timestamp, title, and empty body. So that's working really, really nicely. So that's pretty much all we're going to do inside of there for now. And we now have our first node created.
05:06
Now, of course, a really, really important thing to figure out here is we don't want to create a node if there are already nodes in the stack. So I'm just going to add a node here because we're going to use a getter to grab the length a little bit later. So don't create node if nodes exist, basically. And we could do that really simply in here to start with, actually, just by checking the data that we've already got.
05:33
So we could say this data length. So if we have a length in data, don't do anything. Otherwise, go ahead and create a node. Now, the reason I've set it up like this is because inside of here,
05:47
what we're going to have to do is set the current node to the first item in that nodes array, which might not make sense at the moment. So essentially, if we do have nodes, set the latest node inside of the current node, which we can then edit. Otherwise, just create a new node.
06:06
So let's kind of leave it like this for now, just so we've got that node in there. And, of course, what that's going to do, because we start out with no nodes, is give us an initial empty node. But we'll leave it like that, and we'll come back to that in a second, because that is not going to make too much sense at the moment.

Episode summary

In this episode, we're kicking things off by setting up the ability to create a new note as soon as you land on the page. The intention is that if there aren't already any notes saved (we'll handle storage with localStorage later), we'll automatically generate a fresh, empty note for you to work with—the goal being you always have somewhere to start.

First, we make sure Alpine.js is loaded onto the page and then set up a store for our notes. This store holds an array (our notes list), and we define an init method that will handle creating a new note if it's needed—no duplicating notes if one already exists!

We walk through writing the basic logic to generate unique note IDs (using the timestamp for now), and we give each note a structure: an ID, a title, and a body (both of which are empty strings to begin with). You get to see this data added to the page and visualized right away.

We also get a sneak peek at how we'll check if notes exist and only create a new one if no notes are present. The episode lays that foundation, setting things up for later when we'll make this persistent across sessions using localStorage.

Episode discussion

No comments, yet. Be the first!