todo app in javascript

To create a simple ToDo app in JavaScript, we can use an array to store the list of tasks. Here's a basic example:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
</head>
<body>
  <h1>To-Do List</h1>
  <input type="text" id="new-task">
  <button id="add-task">Add Task</button>
  <ul id="task-list"></ul>

  <script>
    const taskList = document.getElementById('task-list');
    const newTaskInput = document.getElementById('new-task');
    const addTaskButton = document.getElementById('add-task');
    const tasks = [];

    function renderTaskList() {
      taskList.innerHTML = '';
      tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.innerText = `${task} `;
        const removeButton = document.createElement('button');
        removeButton.innerText = 'x';
        removeButton.addEventListener('click', () => {
          tasks.splice(index, 1);
          renderTaskList();
        });
        li.appendChild(removeButton);
        taskList.appendChild(li);
      });
    }

    addTaskButton.addEventListener('click', () => {
      const newTask = newTaskInput.value;
      tasks.push(newTask);
      newTaskInput.value = '';
      renderTaskList();
    });
  </script>
</body>
</html>
1161 chars
44 lines

In this example, we create an input field and a button to add new tasks. We also create an unordered list where the tasks will be displayed. The tasks array will store the tasks as strings.

The renderTaskList function is called whenever we add or remove a task from the tasks array. This function loops through the tasks array and creates a new li element for each task. It also adds a remove button to each li element, which will remove the task from the tasks array when clicked.

When the add task button is clicked, we get the value of the new task input field and add it to the tasks array. We then call the renderTaskList function to update the display.

This is a simple example of a ToDo app in JavaScript. You can customize it to fit your needs by adding more features and functionality.

similar javascript code snippets

sortable list of todo items in javascript

how to create fibonacci in javascript

how to use useeffect in javascript

how to create a proxy variable in javascript

how to parse a json string in javascript

loop in javascript

how to use usestate in javascript

create a loop in javascript

loop from 1 to 10 in javascript

create a react context in javascript

related categories