mjseaman/app.html

## app.html
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="application.js"></script>
    <link href="application.css" type="text/css" rel="stylesheet"></link>
  </head>


  <body>
    <div id="todo">
      <div class="toolbox">
        <input type="text" /><button class="add">Add Todo</button>
      </div>

      <div class="todo_list">

      </div>

      <div id="todo_template" style="display: none;">
        <div class="todo" draggable="true">
          <h2>Todo Name</h2>
          <ul>
            <li><a href="#" class="delete">Delete</a></li>
            <li><a href="#" class="complete">Complete</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>

</html>

## application.css
#todo {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.toolbox {
  text-align: center;
}

.todo.complete h2 {
  text-decoration: line-through;
}

h2 {
	margin-top:0.2em;
}

ul {
	list-style-type: none;
	margin:0;
	padding:0;
}

.todo.over {
  border: 2px dashed #000;
}

.todo {
	height: 100px;
  width: 200px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor: move;
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

## application.js

$(document).ready(function() {

  function bindEvents() {
    $('#todo').on('click',function(e) {
      if(e.target && e.target.className == 'add')
      {
      addTodo();
      }
      if(e.target && e.target.className == 'delete')
      {
        deleteTodo(e.target)
      }
      if(e.target && e.target.className == 'complete')
      {
        completeTodo(e.target)
      }
    })
  }

  function addTodo() {
    var new_todo = $('#todo_template div').clone();
    new_todo.find('h2').text($('input').val());
    $('.todo_list').append($(new_todo));
    $('input').val('');
  }

  function deleteTodo(element) {
    console.log($(element).closest('.todo').remove());
  }

  function completeTodo(element) {
    console.log($(element).closest('.todo').toggleClass('complete'));
  }

  bindEvents();

  function handleDragStart(e) {
  this.style.opacity = '0.4';  // this / e.target is the source node.
  }

  var todos = document.querySelectorAll('.todo div');
  [].forEach.call(todos, function(todo) {
    todo.addEventListener('dragstart', handleDragStart, false);
  });

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataFransfer.dropEffect = 'move';
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  function get_todos(){
    document.querySelector('#columns .column');
  }

  if(get_todos() != null)
  {
  [].forEach.call(get_todos(), function(todo) {
    todo.addEventListener('dragstart', handleDragStart, false);
    todo.addEventListener('dragenter', handleDragenter, false);
    todo.addEventListener('dragover', handleDragOver, false);
    todo.addEventListener('dragleave', handleDragLeave, false);
  });
  }

});

## javascript-todo
 sdv

## js_todo.dm
## 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.
3. Using functions to scope variables (i.e. todoTemplate is accessible within buildTodo, but *not* in the global scope. [Why?](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FFunctions_and_function_scope))
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](http://davidwalsh.name/event-delegate).

#### Objectives
Download the [todo
skeleton](http://s3.amazonaws.com/dbc_socrates/challenges/js-events.zip) 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](http://www.html5rocks.com/en/tutorials/dnd/basics/) events to allow manual
sorting of the todo list.
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<script src="application.js"></script>
	<link href="application.css" type="text/css" rel="stylesheet"></link>
	</head>


	<body>
	<div id="todo">
	<div class="toolbox">
	<input type="text" /><button class="add">Add Todo</button>
	</div>

	<div class="todo_list">

	</div>

	<div id="todo_template" style="display: none;">
	<div class="todo" draggable="true">
	<h2>Todo Name</h2>
	<ul>
	<li><a href="#" class="delete">Delete</a></li>
	<li><a href="#" class="complete">Complete</a></li>
	</ul>
	</div>
	</div>
	</div>
	</body>

	</html>
	#todo {
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	}

	.toolbox {
	text-align: center;
	}

	.todo.complete h2 {
	text-decoration: line-through;
	}

	h2 {
	margin-top:0.2em;
	}

	ul {
	list-style-type: none;
	margin:0;
	padding:0;
	}

	.todo.over {
	border: 2px dashed #000;
	}

	.todo {
	height: 100px;
	width: 200px;
	float: left;
	border: 2px solid #666666;
	background-color: #ccc;
	margin: 5px;
	-webkit-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 3px #000;
	-ms-box-shadow: inset 0 0 3px #000;
	box-shadow: inset 0 0 3px #000;
	text-align: center;
	cursor: move;
	}

	[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	}

	$(document).ready(function() {

	function bindEvents() {
	$('#todo').on('click',function(e) {
	if(e.target && e.target.className == 'add')
	{
	addTodo();
	}
	if(e.target && e.target.className == 'delete')
	{
	deleteTodo(e.target)
	}
	if(e.target && e.target.className == 'complete')
	{
	completeTodo(e.target)
	}
	})
	}

	function addTodo() {
	var new_todo = $('#todo_template div').clone();
	new_todo.find('h2').text($('input').val());
	$('.todo_list').append($(new_todo));
	$('input').val('');
	}

	function deleteTodo(element) {
	console.log($(element).closest('.todo').remove());
	}

	function completeTodo(element) {
	console.log($(element).closest('.todo').toggleClass('complete'));
	}

	bindEvents();

	function handleDragStart(e) {
	this.style.opacity = '0.4'; // this / e.target is the source node.
	}

	var todos = document.querySelectorAll('.todo div');
	[].forEach.call(todos, function(todo) {
	todo.addEventListener('dragstart', handleDragStart, false);
	});

	function handleDragOver(e) {
	if (e.preventDefault) {
	e.preventDefault();
	}

	e.dataFransfer.dropEffect = 'move';
	}

	function handleDragEnter(e) {
	this.classList.add('over');
	}

	function handleDragLeave(e) {
	this.classList.remove('over');
	}

	function get_todos(){
	document.querySelector('#columns .column');
	}

	if(get_todos() != null)
	{
	[].forEach.call(get_todos(), function(todo) {
	todo.addEventListener('dragstart', handleDragStart, false);
	todo.addEventListener('dragenter', handleDragenter, false);
	todo.addEventListener('dragover', handleDragOver, false);
	todo.addEventListener('dragleave', handleDragLeave, false);
	});
	}

	});
	## 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.
	3. Using functions to scope variables (i.e. todoTemplate is accessible within buildTodo, but not in the global scope. [Why?](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FFunctions_and_function_scope))
	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](http://davidwalsh.name/event-delegate).

	#### Objectives
	Download the [todo
	skeleton](http://s3.amazonaws.com/dbc_socrates/challenges/js-events.zip) 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](http://www.html5rocks.com/en/tutorials/dnd/basics/) events to allow manual
	sorting of the todo list.