absolouie / js-dynamic-events

Overview

Understanding how to bind and handle events is a core part of being a web developer. This challenge tasks you to take a reasonably well factored Javascript application and extend it to include event bindings. Some of the good practices you'll see in the provided code are:

1. Using templates from the HTML to add elements.
2. Using functions to scope variables (i.e. todoTemplate is accessible within buildTodo, but not in the global scope. Why?)
3. Using functions to do only one thing (i.e. building the Todo DOM Element vs building the element and adding it to the list)

This should provide you with a solid foundation to complete the remaining features.

Core

This challenge requires you to manipulate objects that have been added dynamically. You may want to brush up on Event Delegation.

Objectives

Download the todo skeleton and modify it so:

1. A todo may be added to the page.
2. A todo may be marked as complete.
3. A todo may be removed from the page.

(Hint: Create named functions and bind them to the appropriate buttons)

Stretch

When creating lists, you often want to reorder them. Use HTML5 Drag and Drop events to allow manual sorting of the todo list.