Creating New Todos

[00:00:00]
>> What else we need, to do, is we need to find, our ability to, add a Todo that's probably the easiest place to start. So, in order to add a Todo, we're gonna add an event to our input and interestingly enough Todo MVC example. I mean, we could just use one of the onBlur, onChange events, actually, typically.

[00:00:34]
But Todo MVC actually has more functionality built into it, whether we'll get all the way there. So we're actually going to, for now I guess we'll we'll use a blur event we can change it let's go later if we need to but this input here I'm actually gonna use onChange specifically.

[00:00:58]
Some developers coming from certain frameworks have completely mangled the meaning of onChange. OnChange is an event that only fires when the focus is blurred, lost from the element when it's changed. If it hasn't changed, it won't fire, and it only fires when you leave the element. So there's another native DOM event called onInput that happens whenever the key presses strokes.

[00:01:25]
But there are some other certain frameworks and different conventions here. Even though the way the actual DOM works. The change event only fires when you actually leave the elements. So it's important to know this and for our to do example, we don't actually care that every keystroke triggers an event we only care when we actually, leave it, so to speak.

[00:01:49]
Actually, after giving that spiel, I've decided I'm just gonna go with keydown anyways just because I can. So, disregard that anyways, or don't disregard it remember that, but we're gonna do onKeyDown anyways, because I'm gonna keep it closer to the actual real Todo examples. So we're gonna make an addTodo function.

[00:02:06]
Okay? Okay onKeyDown we're gonna have to do but I just wanted to point that that one out there it's one of those interesting differences that people tend to get caught up on. So how do we add a Todo well, we're gonna make a function to addTodo and our Todo function is essentially going to let's think of the best way to put this.

[00:02:31]
We're just gonna push the item onto the list. What we'll have is we're gonna have an event, right? And our event is gonna have a target with some text on it, which is gonna be from our input. So we're gonna go, let's get the title first. So it's gonna be like event.target.value and we're actually gonna trim it because we don't need empty space on the ends of our Todos right and essentially if the event.keyCode now, this is the enter key.

[00:03:16]
This will be relevant later but if it's the enter key and there is a title I'll give you the keyCode for enter in just a moment then we're gonna update some stuff okay so. Up at the top here, I'm gonna just will add a couple keyCodes here that will come in later.

[00:03:33]
If you've ever implemented Todo MVC specifically you will have hit this before but we're gonna so we're gonna do this ENTER_KEY and we're gonna do ESCAPE_KEY. This is important when we add editing functionality a bit later. But let's see here. So ENTER_KEY ESCAPE_ KEY. And so if there is a title and the person clicked enter, then we need to add it and in our case, we're gonna do something fairly straightforward.

[00:04:13]
We're gonna say setTodos and then we haven't covered this yet on our signals because we've been just setting a value but our signals actually take a functional form. So what we can do is we can get the current todos and pass like a function form in like this and actually go, actually we wanna take the current todos, copy them, and then add a new todo to the end, which has an id, which is our counter plus plus, let's say.

[00:04:47]
And, completed:false. And we'll add, the title will be just the title that we just had. So see if this all things yeah so setTodos current todos return an array spread it in and then add the new todo to the end sorry let me keep that on the screen for a second so make sure everyone everyone's got that I'm actually gonna remove this todo here for a moment.

[00:05:27]
And if everything is still building okay, we have some stuff going on. If I type something and click enter, of course you can see there's already a couple problems with this. I'm not clearing the input after each one and it just keeps on adding as many as I want here, right?

[00:05:50]
So what we're gonna do, in addition to setting those todos we're gonna need to actually handle our title a little bit differently we're or actually not differently so not yet what we need to do actually simply just clear the title from our event, target, essentially. So target.value="". All right.

[00:06:26]
Internal Server Error, fun. See if that actually, it's cuz I put in the wrong spot. We only need to clear the title if it actually is in the if statement. So now this should basically working, so what do we have, learn SolidJS. Do something else, okay? So now we have this but it's not completely working because we need to actually do some stuffs for our list when we're checking stuffs it's not completing, when we are clearing, we have no other functionalities.