Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perfect

Sasha Drmic
Sasha Drmic
12,316 Points

A little bit different solution to this project

Hey there.

This project was a real struggle for me. I decided to code this app in a little bit different way, which I find more comprehensive for me, and I think that my code would might be more comprehensive for you as well. If not, then sorry for wasting your time. I just wanted to help.

It's organized a little bit differently. It requiers less jumping back and forth. I've also solved the bonus tasks.

var inputText = document.getElementById("new-task");
var addButton = document.getElementById("add-button");
var incompleteTasks = document.getElementById("incomplete-tasks");
var completedTasks = document.getElementById("completed-tasks");

var crossTask = function () {
    var listItem = this.parentNode;
    completedTasks.appendChild(listItem);
    this.onchange = uncrossTask;
}

var uncrossTask = function () {
     var listItem = this.parentNode;
     incompleteTasks.appendChild(listItem);
     this.onchange = crossTask;
}

var editTask = function () {
     var listItem = this.parentNode;
     var label = listItem.querySelector("label");
     var editInput = listItem.querySelector("input[type=text]");

     if (listItem.classList.contains("editMode")) {
        var value = editInput.value;
        label.innerText = value;
     } 

     else
        editInput.value = label.innerText;
     listItem.classList.toggle("editMode");
}

var deleteTask = function () {
    var listItem = this.parentNode;
    var ul = listItem.parentNode;
    ul.removeChild(listItem);
}


var bindEvents = function (listItem, checkboxFunction) {
     var checkBox = listItem.querySelector("input[type=checkbox]");
     var editButton = listItem.querySelector("button.edit");
     var deleteButton = listItem.querySelector("button.delete");

     checkBox.onchange = checkboxFunction;
     editButton.onclick = editTask;
     deleteButton.onclick = deleteTask;
}

for (var i = 0; i < incompleteTasks.children.length; i++) {
    bindEvents(incompleteTasks.children[i], crossTask);
}

for (var i = 0; i < completedTasks.children.length; i++) {
    bindEvents(completedTasks.children[i], uncrossTask);
}


addButton.addEventListener("click", function () {
     if (inputText.value!="") {
        var newListItem = document.createElement("li");

         var checkBox = document.createElement("input");
         checkBox.type = "checkbox";

         var label = document.createElement("label");
         label.textContent = inputText.value;

         var inputField = document.createElement("input");
         inputField.type = "text";
         inputField.value = inputText.value;

         var editButton = document.createElement("button");
         editButton.textContent = "Edit";
         editButton.classList.add("edit");

         var deleteButton = document.createElement("button");
         deleteButton.textContent = "Delete";
         deleteButton.classList.add("delete");

         newListItem.appendChild(checkBox);
         newListItem.appendChild(label);
         newListItem.appendChild(inputField);
         newListItem.appendChild(editButton);
         newListItem.appendChild(deleteButton);

         incompleteTasks.appendChild(newListItem);
         inputText.value = "";
         bindEvents(newListItem, crossTask);
        }
});

1 Answer

Denis Udovcic
Denis Udovcic
13,649 Points

Hej, jel mi mozes molim te objasnit neke sitnice u vezi toga kursa ? Vec 3 dana pokusavam razumit ali ne ide.