How to Create To-Do List with JavaScript

In this tutorial, we will be creating a simple to-do list with JavaScript that allows the user to add items to the list, mark them as complete, and remove them from the list. This project was a part of our 15 Days – 15 Projects Series.

A to-do list can be a great tool to help you stay organized and on top of things. And with JavaScript, you can take your to-do list to the next level by adding interactive features like the ability to mark items as complete and remove them from the list. In this tutorial, we will be building a simple to-do list that allows the user to add items, mark them as complete, and remove them from the list. By the end of this tutorial, you will have a working to-do list with JavaScript that you can use to manage your tasks and responsibilities.

Preview (To-Do list with JavaScript)

HTML

<div class="container">
  <h2>To-Do List with JavaScript</h2>
  <form>
    <input type="text" id="listitem" autocomplete="off" placeholder="List item" />
    <button id="add">Add</button>
  </form>
  <ul id="list"></ul>
</div>

First, let’s take a look at the HTML code. We have a container div that contains a form with an input field and a button, and an unordered list to hold our to-do list items.

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    background: rgb(255, 68, 68);
}
.container {
    padding: 20px;
    border-radius: 4px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
    max-width: 100%;
    width: 350px;
    background: #fff;
}
h2 {
    text-align: center;
}
form {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 8px;
    margin-top: 20px;
}
#listitem {
    border: 0;
    border-bottom: 2px solid #000;
    outline: none;
    transition: 0.15s;
}
#listitem:focus {
    border-bottom: 2px solid rgb(255, 68, 68);
}
#add {
    border: 0;
    background: rgb(255, 68, 68);
    color: #fff;
    padding: 8px 16px;
    cursor: pointer;
}
#list{
    list-style-type: none;
    margin-top: 20px;
}
li {
    position: relative;
    padding: 8px;
    font-size: 16px;
    transition: 0.1s;
}
li:nth-child(odd) {
    background: rgb(255, 226, 226);
}
li:hover {
    background: rgb(255, 168, 168);
}
.close {
    position: absolute;
    right: 0px;
    top: 0px;
    display: inline-block;
    padding: 10.75px;
    border: 0;
    background: transparent;
}
.close:hover{
    background: rgb(255, 68, 68);
}
/* To-Do list with JavaScript */

JavaScript

let add = document.querySelector("#add");
let list = document.querySelector("#list");
add.onclick = (e) => {
    e.preventDefault();
    let listitem = document.querySelector("#listitem");
    if (listitem.value !== '') {
        let el = document.createElement("li");
        el.innerHTML = listitem.value;
        let removebtn = document.createElement("button");
        removebtn.className = "close";
        removebtn.innerHTML = "\u00D7";
        el.appendChild(removebtn);
        list.appendChild(el);
        listitem.value = "";
        el.addEventListener("click", (e) => {
            e.target.style.textDecoration = "line-through";
        })
        removebtn.addEventListener("click", (e) => {
            e.target.parentElement.style.display = "none";
        });
    } else {
        alert("No input\nWrite something!!");
    }
}

Next, let’s examine the JavaScript code. We start by selecting the add button and the list element using the querySelector method. Then, we add an event listener to the add button that listens for a click event.

Inside the event listener, we first prevent the default action of the button (which is to submit the form) by calling the preventDefault method on the event object. Then, we select the input field using querySelector and store its value in a variable called listitem.

Next, we check if the listitem variable is not an empty string. If it is not empty, we create a new li element and set its inner HTML to the value of listitem. Then, we create a new button element and set its class to close. We also set the inner HTML of this button to a times symbol (\u00D7).

We then append the button element to the li element and append the li element to the list. Finally, we clear the value of the input field and add two more event listeners to the li and button elements.

The first event listener, added to the li element, listens for a click event and strikes through the text of the li element when it is clicked. The second event listener, added to the button element, listens for a click event and hides the parent li element when it is clicked.

And that’s it! With just a few lines of code, we were able to create a functional to-do list with JavaScript. I hope this tutorial was helpful and that you were able to learn something new.

Check out other projects that are from the 15 Days – 15 Projects Series.

• How to create a Calculator with JavaScript
• Build your own digital clock with JavaScript and DOM manipulation

Find other Code Projects on our site. See the project live preview.

Happy coding! 💖