bridgpal/todo.html Secret

## todo.html
<html>
  <head>
		<title>To Do List</title>
		<!-- Insert your css file here -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>

	<body>

		<div class="container">
			<div class='top'>
				Item to add to list: <input type="text" name="list" class="inputValue">
			<button type="submit" class="add">Add</button>
			</div>


			<div class="todo-list">
				<ol class="list-one">
					<h4>ToDo List</h4>

				</ol>
			</div>

			<div class="completed-list">
				<ol class="list-two">
					<h4>Completed List</h4>
				</ol>
			</div>
		</div>

	</body>

	<script src="todojs.js"></script>
</html>

## todojs.js
$(document).ready(function() {
    $('button').on('click', function() {
        event.preventDefault();

        var itemValue = $('.inputValue').val();

        var listItem = $('<li>' + itemValue + '<input type="checkbox"><button class="remove">Remove</button></li>');


        //add list item to list one

        //add checkbox to todo item to move to completed list

        //add remove botton on todo item to remove it


    });


});

## todoList.md

      
    Raw
  

              todoList.md
            
          
    WDI Homework - July 2, 2013

JavaScript TODO List

Create a client-side TODO list application in JavaScript.
Requirements


Uses jQuery
When you enter text into a box and press the "Add" button, it adds an item to your "TODO" list and clears the text box
When you click on a checkbox next to each "TODO" item, it must:

Move that item to a separate "Completed" list
Strikethrough the text
Change the text color to red


When you uncheck the box next to each "Completed" item, it must:

Move the item back to the "TODO" list
Remove the strikethrough
Change the text color back to the default (black)


Add a "Delete" button that will delete the item without marking it as done

Bonus


Support due dates on list items (consider using jQuery UI Datepicker)
Animate an item moving from "TODO" to "Completed" and "Completed" to "TODO" (consider using jQuery UI)
Animate deleting an item
	<html>
	<head>
	<title>To Do List</title>
	<!-- Insert your css file here -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>

	<body>

	<div class="container">
	<div class='top'>
	Item to add to list: <input type="text" name="list" class="inputValue">
	<button type="submit" class="add">Add</button>
	</div>


	<div class="todo-list">
	<ol class="list-one">
	<h4>ToDo List</h4>

	</ol>
	</div>

	<div class="completed-list">
	<ol class="list-two">
	<h4>Completed List</h4>
	</ol>
	</div>
	</div>

	</body>

	<script src="todojs.js"></script>
	</html>
	$(document).ready(function() {
	$('button').on('click', function() {
	event.preventDefault();

	var itemValue = $('.inputValue').val();

	var listItem = $('<li>' + itemValue + '<input type="checkbox"><button class="remove">Remove</button></li>');


	//add list item to list one

	//add checkbox to todo item to move to completed list

	//add remove botton on todo item to remove it


	});


	});