 Hey there polycasters, I'm Elliot. Welcome back to our series on how to build an element in Polymer 2. Last time, we used pre-made elements and styling to make our element look great. But the checklist doesn't really work yet. If we take a look, pressing the Add Task button doesn't really add tasks. So let's make that work. So when you click the Paper button, we want something to happen. And what you want to do is add a ClickListener. So Polymer has a nice way to do this. If you look again in your dependencies, go into the Polymer directory, back into lib. But in the Utilities section, you'll see something called gestures.html. Gestures.html allows you to add a bunch of listeners to user actions, like tapping, clicking, or dragging. And in this case, we want to add a ClickListener. So let's import that. So Polymer, Polymer directory in the lib, but it's in Utils. And it's called gestures.html. Cool, gestures.html allows us to add listeners to the events, like this. You type in on dash, and then the type of event that is happening. So on click. And on each click, we're going to call the method Add Task. All right, but now we have to create Add Task. So here, we'll go into our Polymer Checklist class and create a Add Task method. All right, so in the Add Task method, what we're going to do is add to our task list. Our task list currently is 1, 2, 3, 4, 5. We'll make that empty for now. And let's define a new task, so const new task. And for now, we'll make it an empty object. And then we will add that to the task list. So in normal JavaScript, you would simply just push onto a variable. You would do that by doing this. You'd select the tasks list, which in Polymer, you can select a property by doing this dot, then the name of the property. So this dot tasks. And then in JavaScript, you would just do dot push, and then the new value, new task. The problem with this is the Polymer data binding system doesn't necessarily know when you want to update the template. So here, we're going to do something a bit different. We're going to call the this dot push method, which is defined by Polymer, then give it the name of the property that you want to push to, which is tasks, and then push the new task value. Now let's define what goes inside of our task. So each task has about two things in it. It has a checkbox and an input. And we're going to need two properties to define this. So let's say the name of the task. For now, we'll leave that as an empty string. And then whether it's completed or not. And we can do that with a completed value. And for now, we'll say it's false because you're creating a new task, so I don't think it's going to be finished. Let's go refresh. And let's add a few tasks. Oh, all right. We're creating tasks now. We just have something wrong with our data binding. Let's go change that right now. So now let's go back to our DOM repeat. In the DOM repeat, you'll see that we're actually just passing in the task to the paper input, which is now an object. So actually, we want to pass in the name into here, task.name. And in the paper checkbox, we want to see if it's checked. And to that, we want to data bind whether it's completed, task.completed. I can't type. Completed. Let's go refresh. All right. That's starting to look a bit better. Let's see if our data binding is actually working. So we'll go down here and we'll change completed to true. And we'll add a test, task, test name, refresh and task. And there you go. It's checked and the value is in there. All right. So now let's go reset this back to an empty string, set this to false. And that's good. So now that we have this going, when you check things, it doesn't seem to go into the completed section. So let's go change that right now. So what we want to do is we want to first get rid of the things that are in the to-do section when they're checked. So if you mouse over DOM repeat, you'll see a bit more documentation. And at the bottom, you'll see something about filters and observing. So let's type in the filter property. And you'll see that the Polymer IDE tells you that it takes a function. And this function is used to filter an array that is passed in, the array being the tasks array. So we'll filter with a function called isNotCompleted. And then we'll define the isNotCompleted function, isNotCompleted, and it will pass in a task. The way the DOM repeat filter function works is the same way as an array.filter works. You pass in a function that returns a boolean true or false that if true will include the current task in the array and if false will exclude it. So in the isNotCompleted function, we will return NotTask.Completed. So it'll be the opposite of completed. And then one more thing is that we have to add the observe property. The observe property is a string that tells the data binding system when to recalculate this filter. And we want to recalculate this filter whenever task.Completed is changed. So we'll save that, go over, refresh. We'll add a few tasks. We'll call this hello, polycast. And we'll leave that one empty. And if you check one, it disappears. It's getting filtered out. Cool. Only one step left. Add them to the completed section. So here we have R2DU, the addCompleted stuff, which, as you saw earlier, looks very much the same as it did to the 2DU section. So we'll just copy this, paste it right over, and fix the tabbing. All right. So the completed section is basically the exact opposite of the 2DU section. So what we have to do is remove this filter and make it isCompleted, rather is not completed. So here we'll define it isCompleted, takes in a task. And then it just returns the opposite of isNotCompleted. So task, return, task.Completed. Save that. Give that a refresh. Add a few things. Hello, world. Click that. And there you go. We have a functioning checklist. All right. Now how do you actually use this checklist element? So if you look back in our demo directory, you'll see that we have a polycast checklist, an element that we just defined. So you can actually just copy this multiple times. You can make as many as you want. Let's make a bunch of checklists because we're such busy people. And here you go. There's a lot of different stuff on the page. Let's scale it back a bit. Let's add a quick title to this. So we'll add an H2 title. And we'll call this name. And this will be the name of the checklist. So creating a property should be pretty quick. Name type is a string. And the value, this will be the default value. We'll call this toDoList. Cool. Let's refresh. We have a toDoList up here. It's data bound in there. And then we can change the demo. Ooh. Didn't mean to close that. You can change the demo and change the name. We'll call this shopping list. All right, so now let's test out that this actually works. Here you can add a few tasks. We can add tasks to create a shopping list, finish the polycast, and add a few tasks over here, add some tomatoes, add some lettuce, check, check. And it looks like it works. And the nice thing about having a Polymer element is that you could just import the element and put it on your page. And then you're done. Great. That completes this tutorial on how to build an element in Polymer 2. For more tutorials, you can go to the start section of the Polymer project site, which I'll link down below. If you have any questions or ideas for future Polycasts, leave us a comment on this video or tweet us at hashtag askpolymer. See you next time.