A to-do list is used in arranging your daily activities or events in the order of how the want to do them. In this article, we’re going to create our own to do list which you can add activities and remove already added activities.

Our to do list will come with three default activities which you can remove or add to them. It’ll also include an input to help you name a new item you want to add. Let’s begin this tutorial.

Also see How to create a search function with JavaScript.

We’ll first create our default list with HTML.

<div class="container">
<input type="text"
  id="myinput"
placeholder="add event">
<button onclick="add()">
Add
</button>

<ul>
<li> help Vivian </li>

<li> start project </li>

<li> attend tutorial </li>

</ul>
</div>

Now we are going to move on to the main script, which is the main scope of this article. We’re not including the CSS code here for simplicity.

<script>

//Select the ul tag.
ul=
document.
getElementsByTagName
("ul")[0];

//Select all the current event.

var list=
document.
getElementsByTagName
("li");

for(i=0; i<list.length; i++){

//Create a remove button.

var remove=
createElement("SPAN");

//give the element a class name.

remove.className="close";

//Create a text .

var txt=
createTextNode("x");

remove.appendChild(txt);


// Add the remove button to our defaut list


list[i].appendChild
("remove");
}





//the add function

function add(){

//Let's create a new list item.

var li =
createElement("LI");

//create new delete button.
var remove=
createElement("SPAN");

//give the element a class name.

remove.className="close";

//Create a text .

var txt=
createTextNode("x");

remove.appendChild(txt);


//Turn the input value to a text node.

var input=
createTextNode(str);

//Add the input to our new list item.

li.appendChild(input);

//Add our new close button.

li.appendChild(remove);

//Add our new list item to the HTML main list.

ul.appendChild(li);
}

Let’s briefly explain the above code. We first selected all the lists with the tag name selector, then we created a button element with the text “x” written inside of it. We now added that button inside all the lists in the HTML so each of those items will have a remove button.

Later on, we defined our add function which creates a new list event with the event name given in the input bar, then it also creates a new remove button for each event it creates.

Now we’re going to work on the remove button which actually removes an item from the list.

var remove=
document.
getElementsByClassName
("close");

for(i=0; i<close.length; i++){

close[i].onclick=
function(){

this.parentElement.
style.display="none";

}

}

</script>

This above code selects the parent element of the clicked “span” tag, which is the “li” and sets it’s display to none.

There you have it. A complete to do list. Feel free to use bootstrap or your own custom CSS to design it. Also remember to leave a feedback if you felt this article useful.

You can also follow us on social media to stay updated on any new post.

Categories: JavaScript

vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *