// projekte.js

document.addEventListener("DOMContentLoaded", function() {
  // Das DOM ist vollständig geladen

  // Elemente aus dem DOM abrufen
  var projektForm = document.getElementById("projekt-form");
  var projektNameInput = document.getElementById("projekt-name");
  var projekteListe = document.getElementById("projekte-liste");
  var projektHinzufuegen = document.getElementById("projekt-hinzufuegen");

  // Eventlistener für das Hinzufügen von Projekten hinzufügen
  projektHinzufuegen.addEventListener("click", function(event) {
    event.preventDefault(); // Standardformularverhalten verhindern

    // Den eingegebenen Projektname auslesen
    var projektName = projektNameInput.value;

    // Überprüfen, ob der Projektname nicht leer ist
    if (projektName.trim() !== "") {
      // Ein neues Listenelement erstellen
      var neuesProjekt = document.createElement("li");

      // Ein Link-Element für das Projekt erstellen
      var projektLink = document.createElement("a");
      projektLink.href = "projekt/" + projektName.toLowerCase() + ".html"; // Verweisziel für das Projekt
      projektLink.textContent = projektName;

      // Das Link-Element zur Liste hinzufügen
      neuesProjekt.appendChild(projektLink);

      // Das Minus-Symbol hinzufügen
      var minusSymbol = document.createElement("span");
      minusSymbol.textContent = "-";
      minusSymbol.classList.add("remove-symbol");
      neuesProjekt.appendChild(minusSymbol);

      // Das neue Listenelement zur Projekte-Liste hinzufügen
      projekteListe.appendChild(neuesProjekt);

      // Das Projektname-Eingabefeld leeren
      projektNameInput.value = "";
    }
  });

  // Eventlistener für das Entfernen von Projekten hinzufügen
  projekteListe.addEventListener("click", function(event) {
    var clickedElement = event.target;
    if (clickedElement.classList.contains("remove-symbol")) {
      var projektElement = clickedElement.parentNode;
      projekteListe.removeChild(projektElement);
    }
  });
});