<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style id="playcode_style">body {
background-color: #fff;
overflow-x: hidden;
margin: 0;
padding: 0;
position: relative;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode'; }
body #to-do-list {
max-width: 600px;
margin: 0 auto; }
body #to-do-list table {
border-collapse: collapse; }
body #to-do-list table tr th:nth-child(2) {
width: 100%; }
body #to-do-list table tr td {
border: 1px solid black;
padding: 0; }
body #to-do-list table tr td:nth-child(2) {
width: 100%;
padding: 5px; }
body #input-block {
margin-top: 10px; }
body #input-block input {
font-size: 16px;
padding: 5px; }
body #input-block input#input {
width: 75%; }
body #input-block input#submit {
float: right;
font-weight: bold;
cursor: pointer;
width: 20%; }
</style>
</head>
<body>
<div id="to-do-list">
<div id="input-block">
<input type="text" id="input" placeholder="Enter Your Task">
<input type="submit" id="submit" value="Add Task">
</div>
<table id="table">
<tbody><tr>
<th></th>
<th>My Tasks</th>
<th></th>
</tr>
</tbody>
</table>
</div>
<script>
let toDoList = document.getElementById('to-do-list'),
input = document.getElementById('input'),
submit = document.getElementById('submit'),
table = document.getElementById('table');
tbody = document.querySelector('tbody');
submit.addEventListener('click', addTask);
input.addEventListener('keypress', function(enterKey) {
if (enterKey.keyCode == 13) addTask();
});
table.addEventListener('click', checkTask);
function addTask() {
let tr = document.createElement('tr'),
td1 = document.createElement('td'),
label = document.createElement('label'),
tagI = document.createElement('i'),
checkbox = document.createElement('input'),
td2 = document.createElement('td'),
td3 = document.createElement('td'),
tagITrash = document.createElement('i');
checkbox.type = 'checkbox';
checkbox.id = 'toggle';
checkbox.style.cssText = 'opacity:0; position:absolute;';
label.htmlFor = 'toggle';
if (!checkbox.checked) tagI.className = 'fas fa-question';
tagI.style.cssText = 'color: #999; padding: 10px; display: block;';
label.appendChild(tagI);
td1.appendChild(checkbox);
td1.appendChild(label);
tagITrash.className = 'fas fa-trash-alt';
tagITrash.style.cssText = 'color: #999; padding: 10px; display: block;';
td3.appendChild(tagITrash);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
input.value = '';
}
function checkTask(e) {
//let label = event.target.closest('label');
// alert(this.tagName);
alert(e.target.tagName);
// checkCheckbox = event.target.closest('input[type=checkbox]');
// if (checkCheckbox.checked) {
// alert(checkCheckbox.checked);
// }
}</script>
</body>
</html>