mayfer · February 10, 2015 19:09
diff --git a/index.html b/index.html
 <html>
    <head>
        <style>
            body { background: #358; color: #fff; padding: 50px; font-family: sans-serif; }
            a { color: #fff; font-size: 40px; }

            section {
                width: 800px;
                margin: 0px auto;
            }

            .task {
                width: 400px;
            }

            .strikeout {
                text-decoration: line-through;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>        
    </head>
    <body>

        <section>
            <h1>To do app</h1>

            <form>
                <input type="text" id="task" />
            </form>

            <div id="tasks">
            </div>

            <div id="done">
                <h3>Finished tasks</h3>

            </div>
        </section>

        <script>


            $('form').on('submit', function(e) {
                e.preventDefault();

                var newtask = $('#task').val();
                var task_elem = $('<div>')
                    .append('<input type="checkbox">')
                    .addClass('task')
                    .append(newtask);
                $('#tasks').append(task_elem);

                $.ajax({
                    url: '/',
                    method: 'post',
                    dataType: 'json',
                    data: {
                        task: newtask,
                    },
                    success: function(response) {
                        console.log(response);
                        console.log(JSON.stringify(response));
                    },
                });

            });
        
            $('body').on('click', 'input[type="checkbox"]', function() {
                var task = $(this).parents('.task');

                if(task.hasClass('strikeout')) {
                    task.removeClass('strikeout');
                    task.appendTo($('#tasks'));
                } else {
                    task.addClass('strikeout');
                    task.appendTo($('#done'));
                }
            });


        </script>
    </body>
 </html>
	<html>
	<head>
	<style>
	body { background: #358; color: #fff; padding: 50px; font-family: sans-serif; }
	a { color: #fff; font-size: 40px; }

	section {
	width: 800px;
	margin: 0px auto;
	}

	.task {
	width: 400px;
	}

	.strikeout {
	text-decoration: line-through;
	}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	</head>
	<body>

	<section>
	<h1>To do app</h1>

	<form>
	<input type="text" id="task" />
	</form>

	<div id="tasks">
	</div>

	<div id="done">
	<h3>Finished tasks</h3>

	</div>
	</section>

	<script>


	$('form').on('submit', function(e) {
	e.preventDefault();

	var newtask = $('#task').val();
	var task_elem = $('<div>')
	.append('<input type="checkbox">')
	.addClass('task')
	.append(newtask);
	$('#tasks').append(task_elem);

	$.ajax({
	url: '/',
	method: 'post',
	dataType: 'json',
	data: {
	task: newtask,
	},
	success: function(response) {
	console.log(response);
	console.log(JSON.stringify(response));
	},
	});

	});

	$('body').on('click', 'input[type="checkbox"]', function() {
	var task = $(this).parents('.task');

	if(task.hasClass('strikeout')) {
	task.removeClass('strikeout');
	task.appendTo($('#tasks'));
	} else {
	task.addClass('strikeout');
	task.appendTo($('#done'));
	}
	});


	</script>
	</body>
	</html>