<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-do list</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="TODO">
<h1>To-do list</h1>
<input type="text" placeholder="Что вы хотите сделать?" class="toDo">
<button class="add">Добавить</button>
<div class="job">
</div>
</div>
<script>
var toDo = document.querySelector(".toDo");
var add = document.querySelector(".add");
var job = document.querySelector(".job");
add.addEventListener("click", function() {
var addJob = document.createElement("div");
addJob.innerHTML = toDo.value;
job.appendChild(addJob);
addJob.style.marginTop = "10px";
var ready = document.createElement("button");
ready.innerHTML = "Сделанно!";
addJob.appendChild(ready);
ready.addEventListener("click", function() {
addJob.style.textDecoration = "line-through";
});
var deleted = document.createElement("button");
deleted.innerHTML = "Удалить";
addJob.appendChild(deleted);
deleted.addEventListener("click", function() {
job.removeChild(addJob);
});
toDo.value = "";
});
</script>
</body>
</html>