// Hier den Code ergaenzen 
// (Event-Handling fuer Hinzufuegen-Button, DOM-Manipulation fuer Tabelle)
var button = document.getElementsByTagName("button")[0];
button.onclick = function(){
  createCheckbox();
}
var tbody = document.getElementsByTagName("tbody")[0];
var i = 0;
function createCheckbox(tr) {
  // Hier den Code fuer die Erzeugung der Checkbox ergaenzen
  // Empfohlene Strategie:
  // 1. Erstelle eine Checkbox per DOM-API
  // 2. Fuege einen Event-Handler fuer Klick auf die Checkbox hinzu
  // 3. Falls Checkbox angehakt (checked): Text in Zeile (tr) durchstreichen
  // 4. Sonst: Text in Zeile (tr) normal darstellen
  var inputs = document.getElementsByTagName("input");
  var content =inputs[inputs.length - 1].value;
  var tr = document.createElement("tr");

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

  checkbox.setAttribute("onclick", "toggleBox(" + i++ + ")");
  doneTd.append(checkbox);
  tr.append(doneTd);

  var todoTd = document.createElement("td");
  todoTd.append(document.createTextNode(content));
  todoTd.style.textDecoration = "none";
  tr.append(todoTd);
  tbody.append(tr);
}
function toggleBox(num){
  var text = document.getElementsByTagName("td")[num * 2 + 1];
  if(text.style.textDecoration == "none"){
    text.style.textDecoration = "line-through";
  }else{
    text.style.textDecoration = "none";
  }

}
