 Hey there, polycasters. I'm Elliot. Welcome back to our series on building an element in Polymer 2. In the last video, we got to know the layout of a Polymer element. Now let's get to work building a simple checklist. We'll start by mocking it up. So a checklist is going to have some simple checkboxes and a input. So let's create a checkbox, so input of type checkbox. Remove these other things. We don't need that right there. And then we'll create a normal input. And so if we go over here, this looks about right. You have a checkbox and you have the name of your task, like get Tomatoes. But the thing is, the checkbox usually has more than just this. So we might want to have more than just that. Let's copy-paste this a bunch of times. And here's a bunch of different checkboxes. And let's see what else we can do. Let's add a header for the title. Let's say this is the to-do section. And we'll also create a completed section. So you know exactly what you've done already. And we'll call this completed. And we'll copy-paste a few here. And we'll add a button at the bottom to create a bit more. So add task. Give it a refresh. Looks pretty good. We have a to-do section with a bunch of things that you want to do. And then you have a completed section. And these should all be checked at the end. And an add task button, which would create more tasks. All right, so let's go back. Let's clean it up just a bit. Let's remove this section. We'll put a placeholder here. So we remember to go back here. Add completed stuff. And then let's take a look at the to-do section. So the to-do section is a bit long. It's something that we can't really scale up. So if somebody wants 100 different things, you're going to have to copy-paste this 100 times. And that's not exactly what we want. It'd be nice to consolidate and have one section that repeats dynamically. Luckily, the Polymer library has a very nice feature in it called DOM Repeat. You can find this and other types of useful libraries in the lib folder inside of the Polymer directory. In here, you'll see things like elements, and utilities, mixins, and some legacy stuff from Polymer 1 if you're still attached to that. And so here you'll see DOMRepeat.html. Let's import that. So we'll go into the Polymer directory and import the lib directory and then elements. And then DOMRepeat. Ta-da, there it is. Let's type it in here. And so DOMRepeat is an element that wraps around your repeating sections. So create that, move this, cut it up, create a template tag, and paste it in there. All right, now let's just fix this up and make it look all pretty. Cool. Nice. So let's go repeat. Nothing's repeating. What did we do wrong? So luckily, the Polymer IDE, when you mouse over it, will tell you a lot of nice features about this element. So here, it's actually a slightly older version of DOMRepeat. So it takes an items property, and it has a template with the things that you actually want to repeat. So let's go type that in. So in DOMRepeat, let's type in items. Here, the Polymer IDE, again, will tell you a bunch of different things, like items only takes an array, and it determines how many instances you'll have with the template. So let's data bind this over to a variable that we're going to call tasks. And so tasks, we're going to have to define over here in the properties block. So we have tasks. We're going to call the type array, and then call the value. We're going to make it a function that just simply returns an empty array. It's refresh. Still nothing, because the array is empty. So let's fill it up with stuff. So we'll have 1, 2, 3, 4, 5. Sorry, it's not zero indexed. And ta-da, here you go. You have five different things repeated. You can also do nice things, like rename the property with as. And so we'll say, these items that are passed in, we're going to call them the variable task. And in here, in the text input, we'll bind it to that. So we'll have input type text with the value of task. Go back over here, and there you go. It data binds the values that were in the array. So we've mocked up a simple checklist, but there's still some work that we can do to make it look a little nicer. In the next video, we'll use pre-made elements and styling to clean things up. See you soon.