How can I add a task to my HTML/CSS/JavaScript to-do list app after pressing the Enter key?

Question

I am currently working on a to-do list application using HTML, CSS, and JavaScript. I have a text input field where users can enter their tasks, and a "Add Task" button to add the task to the list. However, I would like to improve the user experience by allowing them to add tasks simply by pressing the Enter key on their keyboard.

How can I implement this functionality in my application? Are there any specific event listeners or key codes that I should use to detect the Enter key press and trigger the task addition function? Additionally, how can I ensure that the input field is cleared after adding a task?

I would greatly appreciate any guidance, code snippets, or recommended approaches to accomplish this feature. Thank you in advance for your help!

I can only add them by clicking on the button

Answer 1

To allow users to add tasks by pressing the Enter key, you can add an event listener to the input field that listens for the "keydown" event. When the Enter key is pressed, you can call the function that adds the task to the list.

This below code will give you an idea on how to achieve your task

<input type="text" id="taskInput">
<button id="addTaskBtn">Add Task</button>

<script>
  const taskInput = document.getElementById("taskInput");
  const addTaskBtn = document.getElementById("addTaskBtn");

  taskInput.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      addTask();
    }
  });

  addTaskBtn.addEventListener("click", function() {
    addTask();
  });

  function addTask() {
    const task = taskInput.value;
    if (task.trim() !== "") {
      // Add task to the list
      console.log("Task added:", task);
      taskInput.value = "";
    }
  }
</script>

const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");

taskInput.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    addTask();
  }
});

addTaskBtn.addEventListener("click", function() {
  addTask();
});

function addTask() {
  const task = taskInput.value;
  if (task.trim() !== "") {
    // Add task to the list
    console.log("Task added:", task);
    taskInput.value = "";
  }
}

<input type="text" id="taskInput">
<button id="addTaskBtn">Add Task</button>