Заранее спасибо
Вот код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exam</title>
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<style>
.ToDo {
display: inline-block;
margin-right: 30px;
}
.field {
width: 240px;
border: 2px solid black;
}
.btn {
border: 2px solid black;
outline: none;
cursor: pointer;
background: #FFffff;
box-shadow: 3px 3px 1px -1px rgba(0, 0, 0, 0.75);
}
.btn:active {
background: wheat;
}
.main-column {
display: flex;
}
.column-item {
margin-right: 30px;
width: 250px;
text-align: center;
}
.title {
border: 2px solid black;
padding: 1px 50px;
margin-bottom: 5px;
}
.column {
border:2px solid black;
height: auto;
padding: 12px 0;
}
#card {
border: 2px solid black;
background: gray;
width: 130px;
padding: 0 0 7px 15px;
margin: 0 auto 5px;
}
.card-txt {
display: inline-block;
padding-right: 21px;
}
.card-delete {
margin: 0 10px 30px 0;
display: inline-block;
outline: none;
cursor: pointer;
background: transparent;
border: none;
}
#card-btn {
border: 2px solid black;
outline: none;
cursor: pointer;
background: #FFffff;
box-shadow: 3px 3px 1px -1px rgba(0, 0, 0, 0.75);
}
#card-btn:active {
background: wheat;
}
</style>
<p class="ToDo">Create new To Do: <input type="text" class="field"></p>
<button class="btn">Add</button>
<div class="main-column">
<div class="column-item">
<p class="title">To Do</p>
<div class="first-column column">
</div>
</div>
<div class="column-item">
<p class="title">In Progress</p>
<div class="second-column column">
</div>
</div>
<div class="column-item">
<p class="title">Done</p>
<div class="third-column column">
</div>
</div>
</div>
<script>
$('.btn').on('click', function () {
var column = $('.first-column');
var field = $('.field').val();
var div = $('<div id = "card">');
var txt = $('<p class="card-txt"></p>');
txt.html(field);
var buttonD = $('<button class="card-delete"><b>X</b></button>');
var inProgress = $('<button id="card-btn">In Progress ></button>');
div.append(txt, buttonD, inProgress);
column.append(div);
buttonD.on('click', function () {
div.remove()
});
inProgress.on('click', function () {
var secondColumn = $('.second-column');
secondColumn.append(div)
inProgress.html('Done >');
inProgress.on('click', function () {
var thirdColumn = $('.third-column');
thirdColumn.append(div);
inProgress.html('Delete')
})
})
});
</script>
</body>
</html>
