GoConqr has a new look! Let us know what you think.

Module 20 of 21 · Media

Create a todo list app

Kostas Diakogiannis

Create a todo list app

DOM-8 Create a todo list application

Create an application by using only HTML, CSS and JS, that has an input text field inside a form and a button for submitting. The user should be able to write any task he wants into the input field and see the task as a list item below.

Any time the form is submitted (by either hitting enter on the field, or by clicking the button) a new list item should be created with the text of the content of the input field.

The more tasks you add, the more list items appear.

Take a look at the full result here.

Bonus: Every list item should have a 'delete' button, when clicked it should delete the list item. The 'delete' button should be created inside every list item.

Hint: You may want to check the submit event first, how to access the target of an event, and it's parent element as well. By default every time a form is submitted the information, and all values of the form are sent to the designated target and the page is reloaded. This is the default behavior of a submit event. To change this behavior maybe you want to prevent the default behavior at the first line of your submit event listener.

Instructions

You must submit an attempt for this quiz to progress. You can submit it after the last question.

Go to the chosen module

Feedback

What is it about?

What do you think of the new look?

How do you like it?