` elements. Next, let's put them together to create one element that we can append to the document! Let's do it:
```javascript
todo_card.appendChild(todo_text_elem);
```
Here, we're appending the `
` element, stored in `todo_card`, creating one element that we can add to the HTML document.
### Inserting Elements to the DOM
Before we write more javascript code, we have to have a place in HTML where we can add these elements to. Add the following code to index.html to give us a place to append all of our our sticky-notes:
```markup
```
Lastly, add the following line of code to index.js to append your element to the DOM:
```javascript
document.getElementById("container").appendChild(todo_card);
```
When you run the code, you can see that it works! Woo!\
Add the following code to styles.css to make it all look better:
```css
#container {
margin: 20px;
}
.todo_card {
font-family: 'Permanent Marker', cursive;
font-size: 20px;
width: 200px;
height: 160px;
padding: 10px;
border-top: 40px solid #FFFF88;
background-color: #FFFFA8;
display: inline-block;
margin: 20px 20px 0px 0px;
}
```
The best part of having a To-do list is finishing items and removing them, right? We'll show you how to do that next, and learn about Adding On-Click events along the way.
{% hint style="info" %}
Ask your **ToDo List Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=7c06de9e-7fcc-47ab-b087-63a91cb443cd).
{% endhint %}
## Step 4: Adding the On-Click Event to Remove Elements from the DOM
It would be really annoying if you couldn't remove items from your todo list, right? Let's add a feature to make it such that when a user clicks on a sticky-note, it is removed. To do so, let's head over to javascript and add whats called an event listener.
```javascript
todo_card.addEventListener("click", function(){
// Your code here!
});
```
This piece of code adds an event listener to the `todo_card` element. In english, that piece of code is saying "Hey Javascript, every time the todo\_card element is clicked, call this function."
So, if we said we wanted to remove a sticky-note every time the element is clicked, we have to replace `// Your code here!` with code to remove the todo\_card element. This is trickier than you may think, though.\
The code in that function isn't running now -- it runs when something is clicked, but we don't know when that will be. As such, we need a way to identify the sticky-note whenever that happens.\
As such, we'll have to give the `todo_card` element an id, like so:
```javascript
var todo_card_id = String(Math.random())
todo_card.id = todo_card_id
```
We start by creating a new variable that stores a random number. We're using a random number because we want our IDs to be unique and we can assume that these random numbers won't repeat.
{% hint style="danger" %}
You should NOT always use this method because random numbers DO repeat. We're just using this for this example, but it is generally not great practice.
{% endhint %}
The next line sets the id of the `todo_card` element to the value we just produced.\
\
Now that we have a unique ID in each of our sticky-notes, we can simply replace `// Your code here!` in our javascript file with the following line of code:
```javascript
document.getElementById(todo_card_id).remove()
```
This line asks the document "Can I have the element that has an ID equal to `todo_card_id`?" which is the value we just calculated!
{% hint style="info" %}
Ask your **ToDo List Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=7c06de9e-7fcc-47ab-b087-63a91cb443cd).
{% endhint %}
## That's it!
You did it! You made a todo-list application using DOM manipulation.\
\
You'll notice that if you refresh, nothing is saved. That's because there's no back-end (hint: we'll learn that next).
{% hint style="success" %}
Want to show off your work? [Post your results on Parthean Community](https://platform.parthean.com).
{% endhint %}