<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel = "stylesheet" href="style.css">
<style>
div, h1{
background-color: #cdf;
text-align: center;
}
#loginblock{
text-align: left;
}
#addtodolist{
color: #555;
}
</style>
<script>
$(document).ready(function () {
$('.taskbutton').click(function () {
var form = $(this).parents('.form');
var taskName = $(form).find('input[name=newTaskName]').val();
$(form).find('.taskList').append('<div>data: '+taskName+'</div>');
/*
дальше пробуй сама ;) если что, спрашивай
*/
});
/* тут тоже доделать ;)
$(document).on('click', '.task', function () {
$(this).hide('slow', function () {
$this.remove();
});
});*/
$(".addlist").click(function(){
$(this).parent().clone(true, true).appendTo("body", false);
});
});
</script>
</head>
<body>
<header>
<h1>Simple todo list</h1>
</header>
<div class="form">
<div class="submitForm">
<form name="TaskForm">
<input type="text" name="newTaskName" class="taskinput" value="" placeholder="Enter your task here" required
/>
</form>
<div class="taskbutton">Add Task</div>
</div>
<div class="tasksWrapper">
<h2 class="toDoHeader" contenteditable="true">Project name</h2>
<ul class="taskList"></ul>
</div>
<input class="addlist" type = "button" value="add todo list">
</div>
</body>
</html>