All right, let's get going. But real quick, let's take a look at the browser. And yeah, if you don't mind, why don't we take two or three minutes to freshen up the design just a little bit. And if you don't care, just fast forward. All right, I'm going to visit my index.html file. And why don't we set a background color of maybe gray, and then text white. We're going to use a dark theme. Yeah. Okay, next up, we'll visit the assignment list.

And on the label, we'll set padding to all around. Okay. Next, I'd like borders between each of the assignments. So I could set a border bottom here, but sometimes you end up with double borders. So instead, on my assignment list, I can actually use, because I'm using Tailwind, I can use this divide-y class. And this will automatically figure out how to add dividers between each of the items. It's pretty useful. But once again, let's make sure that it's the exact same color. So we want gray-600.

every single assignment list we create. All right, and I think that's good enough for now. Okay, so now let's move on to adding a box down here to add a new assignment. Of course, that's an essential feature. Okay, so we'll go into our Assignments component. And to start, why don't we put it right down here? I'll add a form that consists of an input that'll have a placeholder of new assignment. Okay, let's have a look at that. Come back, give it a refresh. And yeah, but if I type into it, notice the text is white, and we don't quite want that.

So I'll do the same thing. Let's do this. Let's wrap this within a div. And then here, I can set a border like so. Yeah, but now once again, I'd like a little space between them. And then maybe I should set the background color of the button. So let's do this. Background color of white, text black. But now we've doubled up on text black. So let's just set it on the div instead.

I think that's fine. Okay, so now think about it. When the user types in here, and when they press the submit button, we should then catch that and add the new assignment to the list. Okay, here's how we do that. The first step is I'm going to listen for a submit event. Now, a handful of episodes ago, you learned about using v-on. And I think we used the click event as an example. And that works. And also don't forget the alias of @simple.

And that works. And also don't forget the alias of at simple. This listens for a click event on the form. In our case, though, I actually want to listen for when the form is submitted. So why don't we say when it's submitted, call a method named add. And we'll do that here. Methods add. And for now, let's just alert Hi there, to make sure it's working. Okay, come back, refresh, submit the form.

Hi there, to make sure it's working. Okay, come back, refresh, submit the form. And yes, I get an alert here. But I want you to pay attention right up here. When I click on it, did you see that the page refreshed? And of course it did. We submitted the form. Okay, so often, though, you want to prevent that default action. So typically what we do is you call e.preventDefault() when the form is submitted, right? And that prevents the default action, which is to submit.

So typically what we do is you call e.preventDefault() when the form is submitted, right? And that prevents the default action, which is to submit. So now if I do it, I get my alert. But again, notice you're not going to see the page refresh. Okay, but now because this is such a common thing, Vue makes this a little easier. It has modifiers that we can add to our event listeners like this, submit.prevent. So listen for when the form is submitted, but prevent the default action and the process. And now that'll take care of it. Okay, so what should we do here? Well, when you submit it, we get our alert.

Okay, so what should we do here? Well, when you submit it, we get our alert. And it sounds like I need to grab what the user typed into this input. So again, back in the day, you would have done some kind of like document.querySelector, track down the input, grab its value, and then do something with it. This is kind of the old school, dive into the DOM and do something with it approach. But with Vue, we have a single source of truth. So with that in mind, we're going to leverage v-model. We'll call this new assignment. And this will be our source of truth.

We'll call this new assignment. And this will be our source of truth. Okay, let's bind it. vModel is new assignment. And now when we submit the form, let's just alert this.newAssignment and see what we get. Okay, so we come back, refresh, read chapter five, submit. And there we go, we are tracking it. And of course, don't forget, you can open up Vue DevTools to see exactly what we have here. All right, very cool. So now if you think about it, what we should probably do is append a new item to this assignments.

All right, very cool. So now if you think about it, what we should probably do is append a new item to this assignments array. So we'll say this.assignments.push, where the name is this.newAssignment. Of course, it's not completed. And then we need to set the ID. And I think a simple enough approach is to grab the length of items here and increase it by one. So I could say this.assignments.length plus one, and that should do it. Okay, so now think about what happens when the user types in here. Let's refresh.

Okay, so now think about what happens when the user types in here. Let's refresh. When they submit it, we will call this method. This method will push a new item to this array. Because this data is reactive, Vue will pick up on that. And as a result, re-render the assignment list to match. Okay, so we give it a shot, and it works. How cool is that? And of course, I can complete it just like any other assignment. Okay, but now notice when we added one here, it didn't get cleared for next time.

And of course, I can complete it just like any other assignment. Okay, but now notice when we added one here, it didn't get cleared for next time. So every time I do this, I would then have to delete and start over. Okay, we can fix that really easily. What if we just update this value to be an empty string like this? this.newAssignment is back to an empty string. And when we change it, it re-evaluates because it's reactive. Read chapter five, we add it to the list, and then we clear the input for next time. Okay, cool. So this is looking pretty good.