benekastah/buggy-todo.html

## buggy-todo.html
<!doctype html>
<html>
    <head>
        <title>Todo App</title>

        <script type="text/javascript">
            var todos = [];

            function Todo(title, description, done) {
                this.id = null;
                this.title = title;
                this.description = description;
                this.done = done;
            }

            var createTodo = function () {
                return new Todo(prompt('Todo title'), prompt('Todo description'), false);
            };

            var addTodo = function (todo) {
                todo.id = todos.push(todo);
                renderTodo(todo);
            };

            var renderTodo = function (list, todo) {
                todo.id = todos.push(todo);
                var ul = document.getElementById('todos');
                var li = document.createElement('li');
                li.setAttribute('id', 'todo-' + todo.id);
                li.innerHTML = '<h3>' + todo.title + '</h3>' +
                    '<p>' + todo.description + '</p>' +
                    '<input type="checkbox" checked="' + (todo.done ? 'checked' : '') +
                        'onclick="todo.done = !todo.done; renderTodo(todo)" />';
                ul.appendChild(li);
            };

            addTodo(new Todo('Create todos', 'Create more todos for yourself!', false));
        </script>
    </head>

    <body>
        <h1>Todo list</h1>

        <ul id="todos"></ul>
        <button id="add-todo" onclick="addTodo(createTodo())">Add todo</button>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Todo App</title>

	<script type="text/javascript">
	var todos = [];

	function Todo(title, description, done) {
	this.id = null;
	this.title = title;
	this.description = description;
	this.done = done;
	}

	var createTodo = function () {
	return new Todo(prompt('Todo title'), prompt('Todo description'), false);
	};

	var addTodo = function (todo) {
	todo.id = todos.push(todo);
	renderTodo(todo);
	};

	var renderTodo = function (list, todo) {
	todo.id = todos.push(todo);
	var ul = document.getElementById('todos');
	var li = document.createElement('li');
	li.setAttribute('id', 'todo-' + todo.id);
	li.innerHTML = '<h3>' + todo.title + '</h3>' +
	'<p>' + todo.description + '</p>' +
	'<input type="checkbox" checked="' + (todo.done ? 'checked' : '') +
	'onclick="todo.done = !todo.done; renderTodo(todo)" />';
	ul.appendChild(li);
	};

	addTodo(new Todo('Create todos', 'Create more todos for yourself!', false));
	</script>
	</head>

	<body>
	<h1>Todo list</h1>

	<ul id="todos"></ul>
	<button id="add-todo" onclick="addTodo(createTodo())">Add todo</button>
	</body>
	</html>