How to Create a To-Do List with JavaScript

Subscribe Our Channel

Course Topics

Courses

In this example:

If the input box is empty, an alert is shown.
If there’s text in the input box, a new list item (<li>) is created with that text.
The new list item is appended to the listContainer.
The input box is cleared after adding the task.
Each list item has a “×” symbol that allows the task to be removed when clicked.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create a To-Do List with JavaScript</title>
    <link rel="stylesheet" href="css/todolist.css">
</head>

<body>
    <div id="task-container">
        <input type="text" id="input-box" placeholder="New Task...">
        <button onclick="AddTask()">Add</button>
        <ul id="list-container"></ul>
    </div>

    <script src="js/to-do.js"></script>
</body>

</html>

CSS

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

#task-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

#input-box {
  width: calc(100% - 22px);
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

#list-container {
  list-style-type: none;
  padding: 0;
}

#list-container li {
  background: #eee;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close {
  background: #ff5c5c;
  color: white;
  border: none;
  padding: 0 5px;
  border-radius: 50%;
  cursor: pointer;
}

.close:hover {
  background: #ff1a1a;
}

JS

const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");

function AddTask() {
  if (inputBox.value === "") {
    alert("You must write something");
  } else {
    // Create a new list item
    let li = document.createElement("li");
    li.textContent = inputBox.value;
    
    // Add the list item to the container
    listContainer.appendChild(li);

    // Clear the input box
    inputBox.value = "";

    // Optionally add a way to remove the task
    let span = document.createElement("span");
    span.textContent = "\u00D7"; // Unicode for '×' symbol
    span.className = "close";
    li.appendChild(span);

    // Add an event listener to remove the task when '×' is clicked
    span.onclick = function() {
      this.parentElement.style.display = "none";
    };
  }
}