todo-notes.md

notizen zu Todo-Anwendung

Task 2: Toggling Todos - by button click

challenges:

• nicht nur Button-Farbe verändern, sondern div-Farbe
• Text vom Button ändern
• Klasse von einem übergeordneten div ändern
• getElementsByClassName gibt immer ein Array zurück
• making all buttons work

---

• select all toggleStatus buttons

• iterate through all these buttons and add click event listeners

• event listener for button nr i:

let allButtons = document.querySelector(".toggleStatus");

// add event listener to the two existing buttons
for (let button of allButtons) {
  addButtonListener(button);
}

function addButtonListener(button) {
  button.addEventListener("click", () => {
    // get parent div of the button
    let div = button.parentNode;
    // change color / class of the div
    // change innerText of the button
  });
}

function onTodoAdded() {
  // create a new div
  // add a span to the div
  // add a button to the div
  button.addEventListener("click", () => {
    // get parent div of the button
    let div = button.parentNode;
    // change color / class of the div
    // change innerText of the button
  });
  // add the div to the document
}

Task 3: Complete all

function completeAll() {
  // get all todos
  // go through todos
  // if class is not done:
  //   change class
  //   change button text
}

Task 4: filtering if user types

filterBox.addEventLister("input", () => {
  // go through todos, show all that match the text, hide all that don't match the text
})