changed the add/remove function

static/css/styles.css

@@ -70,3 +70,29 @@ footer {
   padding: 10px;
   text-align: center;
 }
+/* style.css */
+
+.add-symbol {
+  display: inline-block;
+  font-size: 24px;
+  cursor: pointer;
+  margin-left: 5px;
+  color: black;
+}
+
+.add-symbol:hover {
+  color: darkred;
+}
+
+.remove-symbol {
+  display: inline-block;
+  font-size: 24px;
+  cursor: pointer;
+  margin-left: 5px;
+  vertical-align: middle;
+  color: gray;
+}
+
+.remove-symbol:hover {
+  color: darkgray;
+}

static/js/projekte.js

@@ -7,9 +7,10 @@ document.addEventListener("DOMContentLoaded", function() {
   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 Formular hinzufügen
-    projektForm.addEventListener("submit", function(event) {
+  // Eventlistener für das Hinzufügen von Projekten hinzufügen
+  projektHinzufuegen.addEventListener("click", function(event) {
     event.preventDefault(); // Standardformularverhalten verhindern
 
     // Den eingegebenen Projektname auslesen
@@ -19,20 +20,35 @@ document.addEventListener("DOMContentLoaded", function() {
     if (projektName.trim() !== "") {
       // Ein neues Listenelement erstellen
       var neuesProjekt = document.createElement("li");
-        neuesProjekt.textContent = projektName;
+
+      // 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 Eingabefeld leeren
+      // Das Projektname-Eingabefeld leeren
       projektNameInput.value = "";
+    }
+  });
 
   // Eventlistener für das Entfernen von Projekten hinzufügen
-        neuesProjekt.addEventListener("click", function() {
-          projekteListe.removeChild(neuesProjekt);
-        });
+  projekteListe.addEventListener("click", function(event) {
+    var clickedElement = event.target;
+    if (clickedElement.classList.contains("remove-symbol")) {
+      var projektElement = clickedElement.parentNode;
+      projekteListe.removeChild(projektElement);
     }
   });
 });
-  
-  

templates/projekte.html

@@ -21,10 +21,10 @@
     <ul id="projekte-liste">
       <!-- Hier werden die Projekte dynamisch hinzugefügt -->
     </ul>
-
+<!-- Projektform wird hier hinzugefügt-->
     <form id="projekt-form">
       <input type="text" id="projekt-name" placeholder="Projektname" required>
-      <button type="submit">Hinzufügen</button>
+      <span id="projekt-hinzufuegen" class="add-symbol">+</span>
     </form>
   </section>