Building a Todo App

[00:00:00]
>> We have our working Hello. And let's start kind of, we're gonna build a To Do app. It does have a specific structure to it. So that is something that we have to keep in mind as we're building it out. But I'm gonna type this up piece by piece and we're gonna work through it.

[00:00:19]
By the end, this might not be like the full TodoMVC example, but we can kind of construct this as we go. So, let's forget about that h1. Let's get some thing in it. The way that this works is it starts with a section that has a class, which is a todoapp.

[00:00:45]
And which has a nested header in it. Just get the base styles working here for us, which has a class, which is called header unsurprisingly. And inside our header, we're going to, I guess we gonna make an h1 that like introduces the whole thing. What is it? Todo, todos maybe?

[00:01:12]
Okay, this is starting to look like something I've seen before and we need an input, all right? And unlike HTML, which has void elements, you always have to close an input in JSX. It's XML based and this class will be new-todo. And let's do here. Placeholder, I think, what was it?

[00:01:45]
What needs to be done? Okay. Okay, this is already starting to look a bit like classic Todo MVC. Okay, so we need to probably create some state here to where we're going. So I'm gonna start this by creating a signal. And our signal is gonna be an array, I guess, and it's gonna be called todos and setTodos, okay?

[00:02:31]
And import createSignal from solid-js if it didn't autocomplete for you, okay? And the first thing that we need to be aware of here is we're gonna use our show component, which probably should be imported also from solid-js, yeah. And we're only gonna show most of this when todos.length is bigger than 0.

[00:03:02]
So when there's actually a todos.length, okay? And then we're gonna wanna iterate over our todos. This is probably where I'm gonna start this here. So we're gonna make ul, or list with class "todo-list". And then for each todos, call it as a function, important. And then we're gonna break into this and for each todo, we're going to make it todo like this, okay?

[00:03:53]
And it's gonna be a list item. I think, yeah, we'll make a list item and it's gonna have class "todo" and, Yeah, a little bit of boilerplate here. But this example doesn't actually have a ton of HTML or CSS, generally speaking. So we just need to kind of get through the little bit here.

[00:04:27]
div with a class of "view" and I'm gonna stop here for a moment and literally just put todo.title or something in here just so we can see it. And we're gonna add some data right now just for a moment so we can actually see what we're editing. So in our array to start let's just add something in there.

[00:04:58]
The shape of this is gonna be like id, and I'm gonna say the id:1. And then title is let's say, Learn SolidJS, okay, and then completed: false, okay? Let's add the label actually around this, which I think is what I'm missing. Let's add, This label. Sorry, did I have an extra return somewhere?

[00:05:38]
>> No, you need one.
>> I need one, of course, thank you. Yeah, I don't know why, sometimes I think the autocomplete auto does it. We don't actually need the second set of curly braces or any of this stuff, it just, thank you. So yeah, now at least we're seeing something here.

[00:05:57]
Make sure that you have the todos here as a function call where you access them and then make sure that, yes, that is actually returning the DOM elements in the JSX. Easy thing to do with JSX unfortunately. Okay, so let's build this out a little bit more coz our list item should also have not just a label, but a checkbox.

[00:06:21]
So we're gonna make another input element. And we're going to make this one type "checkbox" and give it class="toggle", all right? Nice, should be getting some, okay, styles coming in through there and, See if this is formatting it. And then we also need the button to remove the todo, class = "destroy".

[00:07:02]
And let's close our button and give it some text. I think it's just, I'm trying to remember what it is. Actually, it shouldn't have text. It should just be styled that way. This can actually be a self-closing element. Yeah, and there we are. If you hover, you'll see that there's an X that shows up by just having this class to destroy on it.

[00:07:34]
So CSS styles built into to do MVC make life a lot easier for us here. So yeah, this is not functional. But at least, we have a kind of the basic UI that we're gonna be using here, all right. Cool, so everybody gets so far? All right, so now obviously this is not much of an app so we actually have to build some logic into it.

[00:08:05]
And for the todo example, what this means is actually creating some kind of global counter. So I'm just gonna call it counter and with counter = 0;. This is just how we kinda keep track. It's like our full database for now. Essentially, we need the ID, unique identifier.