Deep Tech Point - learn tech easy way

Creating a simple to-do list is one of the best beginner-friendly JavaScript projects. It helps you practice how to connect HTML structure, CSS styling, and JavaScript functionality.

In this article, I’ll walk you through four different ways to create a to-do list using JavaScript. Each method starts with the same HTML and CSS, but the JavaScript code will vary slightly. This way, you’ll learn different techniques and understand the pros and cons of each.

So, let’s start with the CSS. You can style your To-Do list which will make your to-do list look cleaner:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input {
    padding: 10px;
    width: 70%;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 10px;
    background: blue;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    background: #eee;
    margin: 5px;
    padding: 10px;

    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li.completed {
    text-decoration: line-through;
    color: gray;
}

Now, let’s move to the .HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">
        <h2>To-Do List</h2>
        <input type="text" id="taskInput" placeholder="Enter a task">
        <button onclick="addTask()">Add Task</button>
        <ul id="taskList"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

The <body> contains the actual content of the page. <div class=”container”> is a container that holds everything together.
<h2>To-Do List</h2> is the title. Now, let’s start with the .html part that is connected with .js.
<input type=”text” id=”taskInput” placeholder=”Enter a task”> This part of the code presents a text box where the user can type a new task. Of course this element needs an id (id=”taskInput”), which will help JavaScript find this element, and we have a placeholder=”Enter a task” – the visual part showing gray text inside the input field before the user types something in that field.
<button onclick=”addTask()”>Add Task</button> is a button. When user clicks on the button, javascript runs the addTask() function. We will write more about this about the part where we’ll present JavaScript code.
The last part of the container where we’ll have tasks listed is this: <ul id=”taskList”></ul>. This is an unordered list (<ul>) where tasks will be added. At the very beginning, this is empty at first, but JavaScript will add list items (<li>) dynamically as soon as we insert some text and click on the button. This element as well has an id so JavaScript can identify it.
The last item of the html code is <script src=”script.js”></script> – this line in your HTML file is very important because it connects your JavaScript file to your webpage. Keeping JavaScript in a separate file (script.js) is better because it makes the code cleaner — we can reuse JavaScript in multiple pages and the webpage loads faster for better performance.

The 1st example of JavaScript for to-do list

Now, let’s take a look at a first example of a JavaScript part:

function addTask() {
    let taskInput = document.getElementById("taskInput");
    let taskList = document.getElementById("taskList");

    if (taskInput.value === "") {
        alert("Please enter a task!");
        return;
    }

    let li = document.createElement("li");
    li.textContent = taskInput.value;

    // Add a complete button
    let completeButton = document.createElement("button");
    completeButton.textContent = "✓";
    completeButton.style.marginLeft = "10px";
    completeButton.onclick = function () {
        li.classList.toggle("completed");
    };

    // Add a delete button
    let deleteButton = document.createElement("button");
    deleteButton.textContent = "❌";
    deleteButton.style.marginLeft = "10px";
    deleteButton.onclick = function () {
        taskList.removeChild(li);
    };

    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    taskList.appendChild(li);
    
    taskInput.value = ""; // Clear input after adding
}

So, what does this .js file do? It makes the to-do list interactive. Let’s take a closer look at the code.

function addTask() { creates a function named addTask(). It runs when the user clicks “Add Task” button. Do you remember the button in the html code? This part
<button onclick=”addTask()”> tells us that when the user clicks on the button the addTaks() function will activate.

Next we declare variables let taskInput and let taskList and we with their Ids which we defined earlier in the html get the <input> and <ul> elements. This is why this method is called getElementById.

taskInput = document.getElementById("taskInput");
let taskList = document.getElementById("taskList");

With the following part we make sure if the user tries to add a task without typing anything, it shows an alert “Please enter a task!”.

if (taskInput.value === "") {
    alert("Please enter a task!");
    return;
}

The following code creates a new list item (<li>) element (let li = document.createElement(“li”);)and sets its text (textContent) to whatever the user typed in the input box (taskInput.value). It’s how a new task gets added to the to-do list visually.

let li = document.createElement("li");
li.textContent = taskInput.value;

In short, the code bellow adds a clickable button to each task, and when user clicks it, it visually marks the task as completed or not.

let completeButton = document.createElement("button");
completeButton.textContent = "✓";
completeButton.onclick = function () {
    li.classList.toggle("completed");
};

First, let completeButton = document.createElement(“button”); creates a new <button> element in memory — it doesn’t appear on the page yet. Then, completeButton.textContent = “✓”; sets the text inside the button to a checkmark symbol, which tells the user this button is for marking the task as done.

Next, the completeButton.onclick = function () { … } part defines what should happen when the button is clicked. Inside this function, li.classList.toggle(“completed”); means: if the task already has the class completed (for more info check the part with the .css code where we set text-decoration: line-through and color: gray), remove it; if not, add it – this is what toggle is all about – when clicked, it toggles (adds/removes) the “completed” class – makes the task crossed out.

And now, we’ve come to the part where the code creates a “Delete” button for each task in the to-do list. When clicked, it removes the task from the list.

let deleteButton = document.createElement("button");
deleteButton.textContent = "❌";
deleteButton.onclick = function () {
    taskList.removeChild(li);
};

Let’s take a more detailed look. First, let deleteButton = document.createElement(“button”); creates a new button element in memory. Then, deleteButton.textContent = “❌”; sets the text inside the button to a red cross emoji, which clearly tells the user that this button will remove or delete the task.

The next part, deleteButton.onclick = function () { … }, sets up what should happen when the user clicks the delete button. Inside the function, taskList.removeChild(li); means it will remove the task (li) from the list (ul). So when the button is clicked, the task disappears from the webpage.

And now we’ve come to the last part of the code, which:

Adds the buttons inside the task (li):
```
li.appendChild(completeButton);
```
Adds the task to the list.
```
taskList.appendChild(li);
```
Clears the input box after adding the task.
```
taskInput.value = "";
```

If you want to keep building on this example, the following article adds existing tasks in your list in the local storage using onclick approach for beginners.

The 2nd example of JavaScript for to-do list: just put the JavaScript directly inside your HTML

Not really a different approach as this one is quite obvious – instead of having a separate script.js, you can put the JavaScript directly inside your HTML using the <script> tag at the bottom of the file.
Just place this right before the closing </body> tag in your index.html.

3rd example of JavaScript for to-do list: instead of using onclick in HTML use addEventListener

Instead of using onclick in HTML we can use addEventListener and do everything in JavaScript. This is a cleaner and more modern way to handle events in JavaScript. So, this way we would still have button in HTML:

<button id="addButton">Add Task</button>

And then in the script.js we would need to add addEventListener method at the very top of the document because it has to run after the HTML element it refers to is loaded into the browser:

document.getElementById("addButton").addEventListener("click", addTask);

document.getElementById(“addButton”).addEventListener(“click”, addTask);
tries to find the HTML element with id=”addButton” and attach a click event to it.

If the browser hasn’t loaded the button yet when this line runs, document.getElementById(“addButton”) will return null, and you’ll get an error like:

Cannot read properties of null (reading 'addEventListener')

Those who would like to take things one step further and learn how to save a to-do list to local storage with the addeventlistener, you need to check the article on the link.

4th example of JavaScript for to-do list: Use arrow functions and const instead of let where possible

const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
const addButton = document.getElementById("addButton");

const addTask = () => {
    if (taskInput.value === "") {
        alert("Please enter a task!");
        return;
    }

    const li = document.createElement("li");
    li.textContent = taskInput.value;

    const completeButton = document.createElement("button");
    completeButton.textContent = "✓";
    completeButton.onclick = () => li.classList.toggle("completed");

    const deleteButton = document.createElement("button");
    deleteButton.textContent = "❌";
    deleteButton.onclick = () => taskList.removeChild(li);

    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    taskList.appendChild(li);
    taskInput.value = "";
};

addButton.addEventListener("click", addTask);

Ok, let’s take a look at this code from a little closer. So, this version uses modern JavaScript features such as const which is appropriate for variables that don’t change and aren’t reassigned – for example we’re not changing what taskInput refers to. And in this version we are also going to use arrow functions, which represent a shorter and more modern way to write functions.

First, with the first three lines we grab the elements from the HTML:

the input field from the HTML — where the user types the task:
```
const taskInput = document.getElementById("taskInput");
```
the list (<ul>) from the HTML where we’ll show the tasks.
```
const taskList = document.getElementById("taskList");
```

and the button from the HTML that says “Add Task”:

const addButton = document.getElementById("addButton");

Next step is creating the function that adds a task, but this time as an arrow function syntax which is cleaner and more modern:

const addTask = () => {

The above code is the same as

function addTask() {

in previous versions – what both the old version and the arrow version do is run the addTask function when the Add button is clicked.

And same as before we need to check if the taskInput.value is empty and if it is, show an alert and return stops the function from continuing:

if (taskInput.value === "") {
    alert("Please enter a task!");
    return;
}

However, if the taskInput.value isn’t empty, create the list item (a new <li>) – set its text to whatever the user typed into the input box and add the task:

const li = document.createElement("li");
li.textContent = taskInput.value;

Next, we need to create another element here – the “Complete” button, which when it’s clicked, adds or removes (toggles) a class called completed on the <li>. We handle this class in CSS to cross out the task.

const completeButton = document.createElement("button");
completeButton.textContent = "✓";
completeButton.onclick = () => li.classList.toggle("completed");

We need to create another element and add the Delete button to each task (li) in the list (taskList)- the “Delete” button is represented with the obvious red X, and when clicked, it removes the task (li) from the list (taskList):

const deleteButton = document.createElement("button");
deleteButton.textContent = "❌";
deleteButton.onclick = () => taskList.removeChild(li);

Oki, doki, now we’ve created all elements, we just need to put everything together and add to the page:

this adds the two buttons (completeButton and deleteButton) inside the task (li):

li.appendChild(completeButton);
	li.appendChild(deleteButton);

this adds the completed task (with its buttons) into the <ul> on the page:

taskList.appendChild(li);

Also, the same as in other .js versions we need to clear the input box after the task is added:

taskInput.value = "";

And last but not least, we need to hook up the “Add Task” button, so when the user clicks the Add button, the addTask function is run. This is a modern alternative to writing onclick=”addTask()” inside the HTML:

addButton.addEventListener("click", addTask);

In conclusion

Now that you’ve seen four different ways to write JavaScript for a to-do list, let’s quickly compare them so you can decide which one suits your needs best:

1. Using onclick in HTML is probably the easiest method to understand for complete beginners. You simply attach the addTask() function directly to the button using the onclick attribute inside the HTML. While this works fine for small projects, it’s not considered best practice because it mixes your structure (HTML) with your behavior (JavaScript), which can make your code harder to manage in the long run.

2. Writing JavaScript directly inside the HTML file using the <script> tag is another quick and simple approach. It’s great when you’re just starting out or want to experiment without worrying about managing multiple files. However, as your code grows, having JavaScript inside the HTML can make things messy and harder to debug or reuse elsewhere.

3. Using addEventListener in JavaScript is a more modern and cleaner way to handle interactions. Instead of putting event-handling logic in the HTML, you keep all your logic in the JavaScript file. This keeps the HTML focused only on structure and allows for better separation of concerns. Just keep in mind that this method requires your JavaScript to run after the HTML has been fully loaded; otherwise, it won’t be able to find the elements on the page.

4. The modern approach using const and arrow functions is the cleanest and most up-to-date method. It not only separates HTML and JavaScript but also uses modern JavaScript syntax that is easier to read and more concise. Using const for values that don’t change improves reliability, and arrow functions make your code look neat and consistent. While it may seem a little advanced at first, this is the best approach for real-world projects and will prepare you for working with frameworks like React or Vue later on.

The takeout:

If you’re just beginning your JavaScript journey, starting with the first or second method is totally fine. They’re easy to understand and help build your confidence. As you gain experience, you’ll naturally move toward the third and fourth approaches, which follow better coding practices and make your projects more maintainable and professional.

Do you want to keep building? Let’s try adding new features like saving tasks to local storage, adding an edit button, or even assigning due dates to tasks.

3 Ways to Create To-Do List with JavaScript for Beginners

The 1st example of JavaScript for to-do list

The 2nd example of JavaScript for to-do list: just put the JavaScript directly inside your HTML

3rd example of JavaScript for to-do list: instead of using onclick in HTML use addEventListener

4th example of JavaScript for to-do list: Use arrow functions and const instead of let where possible

In conclusion