From 2ffd55598ac35c3981981b955974409d5ea5f793 Mon Sep 17 00:00:00 2001
From: thunic <thuenemann.nico@gmail.com>
Date: Fri, 19 May 2023 21:06:04 +0200
Subject: [PATCH] changed the add/remove function

---
 static/css/styles.css   | 26 +++++++++++++
 static/js/projekte.js   | 84 ++++++++++++++++++++++++-----------------
 templates/projekte.html |  4 +-
 3 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index a52303e..0ca8ae9 100644
--- a/static/css/styles.css
+++ b/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;
+}
diff --git a/static/js/projekte.js b/static/js/projekte.js
index e390c6c..863a7a9 100644
--- a/static/js/projekte.js
+++ b/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);
+    }
   });
-  
-  
\ No newline at end of file
+});
diff --git a/templates/projekte.html b/templates/projekte.html
index 1c14f74..bcb266e 100644
--- a/templates/projekte.html
+++ b/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>