WDI Fundamentals Unit 11
In this challenge, we'll utilize the
document object and events to create a todo list. Users should be able to enter new todo items in an input and see them displayed on the page.
Before you get started, take a look at the starter code that has been provided in the "HTML" Panel in JS Bin. You'll need to reference the HTML for the steps below.
First create a function called
addItem. For now it should be empty.
click event handler to the button. When the button is clicked, run the
Alright, now within the
addItem function we need to find out what the user entered into the input field. We'll be using a new property - the
value property - to find out what the user entered into the input. The syntax for using this property looks like this:
Get the user's todo item from the
input element and store it in a variable
Hint: Here's how we can select the input field:
Now we want to add the new list item to the
ul with the id
todo-list. Remember, in order to add a new element to the page, there are a few steps we will have to take:
createElement()method to create a list item element and store it in the variable
appendChild()method to append this element to the unordered list.
Test things out! Enter a task, click the button in the "Output" panel, and make sure that your task is getting added to the todo list.
Stuck? Check out the solutions to see what you can do.