JavaScript Todo List Lab

Medium
1
32.0% Acceptance

In this lab, you will be building a simple Todo List application using HTML, CSS, and JavaScript. The application will have an input field to add new tasks and will display the tasks in an unordered list (ul). You will also be able to mark tasks as completed (by toggling the task's text-decoration to line-through) and remove tasks from the list.

For this lab, create an HTML file with an input element with an id newTask and a button with an id addTaskButton. You will also create an unordered list with an id tasksList. When the user types in the input field and clicks the button or press Enter on the keyboard, a new list item (li) should be created in the tasksList ul.

You need to write JavaScript code that adds the functionality to:

  1. Add tasks to the list by clicking the 'Add Task' button or pressing Enter on the keyboard.
  2. Mark tasks as completed by clicking on them.
  3. Remove tasks from the list by double-clicking on them.