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

@@ -1,38 +1,54 @@
 // 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");
-  
-    // Eventlistener für das Formular hinzufügen
-    projektForm.addEventListener("submit", 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");
-        neuesProjekt.textContent = projektName;
-  
-        // Das neue Listenelement zur Projekte-Liste hinzufügen
-        projekteListe.appendChild(neuesProjekt);
-  
-        // Das Eingabefeld leeren
-        projektNameInput.value = "";
-  
-        // Eventlistener für das Entfernen von Projekten hinzufügen
-        neuesProjekt.addEventListener("click", function() {
-          projekteListe.removeChild(neuesProjekt);
-        });
-      }
-    });
+  // 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);
+    }
+  });
+});

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>