Untitled

<body>

<input id="taskInput" placeholder="Place your task here"><br>
<button id="addTaskButton">Add task</button>


<ul id="taskList">

</ul>

<button id="removeFinishedTasksButton">Remove finished tasks</button>

</body>
<script src="js/app.js"></script>
</html>


var btnAdd = document.querySelector("#addTaskButton")
var btnRemove = document.querySelector("#removeFinishedTasksButton");


btnAdd.addEventListener("click", function () {

    var input = document.querySelector("#taskInput").value;
    var li = document.createElement("li");
    var t = document.createTextNode(input);
    li.appendChild(t)

    if (input.length >= 6 && input.length <= 100) {
        document.querySelector("#taskList").appendChild(li);
    }
    else {
        alert("Length of task has to be between 6 and 100 letters");
    }

    var liText = document.querySelectorAll("li");
    for (var i = 0; i < liText.length; i++) {
        var span = document.createElement("span");
        liText[i].appendChild(span);
    }

    ***var removeBtn = document.createElement("button");
    span.appendChild(removeBtn);
    removeBtn.innerHTML = "Delete";
    removeBtn.classList.add("delete");
    for (var i = 0; i < liText.length; i++) {
        removeBtn.addEventListener("click", function () {
            var li = this.firstElementChild;
            this.removeChild(li)
        })
    }***


    var body = document.querySelector("body");
    var btnComplete = document.createElement("button");
    btnComplete.innerText = "Complete";
    body.appendChild(btnComplete);

    btnComplete.addEventListener("click", function () {
        if (li.color = "black") {
            li.style.color = "red";
        }
    })


})

var removeBtn = document.createElement("button");
span.appendChild(removeBtn);
removeBtn.innerHTML = "Delete";
removeBtn.classList.add("delete");
var that = this;
for (var i = 0; i < liText.length; i++) {
    removeBtn.addEventListener("click", function () {
        var li = that.firstElementChild;
        that.removeChild(li);
    })
}