$7\mathrm{.}16$ LAB: To$-$do list $($JavaScript$)$

LAB

ACTIVITY

$7\mathrm{.}16\mathrm{.}1$: LAB: To$-$do list $($JavaScript$)$

$\frac{0}{10}$

$$

Overview

In this lab, you will implement a $"$to$-$do$"$ list in JavaScript. The user can type a task into the text box and click Add to add the task to the task list. Clicking a task's $$ button removes the task from the list.

To$-$Do List

New task: Complete JavaScript lab Add

Clean bathroom

Study for big exam $x$

Feed fish

Step $1$: Inspect the project

The project contains HTML$,$ CSS$,$ and JavaScript files:

index. html contains the "New task:" label, $$ textbox for entering a new task, an Add button, and an empty ordered list.

styles.css adds styling to the webpage.

todo.js contains four functions that need implementing.

Step $2$: Add new task $(4$ points$)$

To add a new task, make the following modifications:

In domLoaded$(),$ register addBtnClick$()$ as the Add button's click event handler.

In addBtnClick$(),$ extract the text entered in the textbox, then call addTask$()$ with the new task.

In addTaskO:

Call document.createElement$()$ to create a new $x$