color-picker funkt aber noch nicht alle farben und nicht angepasst

express-server/public/javascripts/ajax.js

@@ -75,7 +75,7 @@ $(document).ready(function() {
             data: {
                 sl_id: globaleAddZwischenID,
                 name: $("#groupname").val(),
-                color: $("#groupfarbe").val()
+                color: $( "input:checked" ).val()
             },
             success(res){
                 console.log("groupadd funktioniert");
@@ -269,7 +269,7 @@ function Detail(){
                                     `);
                                     for (let i = 0; i < res.groups.length; i++) {
                                         const el = res.groups[i];
-                                        $(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:${el.color};">
+                                        $(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:#${el.color};">
                                         <div class="card-header"><h5 class="card-title">${el.name}</h5><button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
                                         <div class="${el.name}">
                                         </div>

express-server/public/stylesheets/colorpicker-style.css

@@ -0,0 +1,95 @@
+/* @import url(https://fonts.googleapis.com/css?family=Lato:400,300);
+* {
+  box-sizing: border-box;
+}
+body {
+  position: absolute;
+  top: 35%;
+  left: 35%;
+  transform: translate(-35%, -35%);
+  font-family: 'lato';
+  color: #333;
+} */
+input[type="radio"] {
+    display: none;
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label span {
+    transform: scale(1.25);
+  }
+  input[type="radio"]:checked + label .farbe1 {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .farbe2 {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .farbe3 {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .farbe4 {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .farbe5 {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .farbe6 {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .farbe7 {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .violet {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .purple {
+    border: 1px solid black;
+  }
+  input[type="radio"]:checked + label .pink {
+    border: 1px solid black;
+  }
+  label {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  label:hover span {
+    transform: scale(1.25);
+  }
+  label span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.2s ease-in-out;
+  }
+  label span.farbe1 {
+    background: #F44336;
+  }
+  label span.farbe2 {
+    background: #e91e63;
+  }
+  label span.farbe3 {
+    background: #9c27b0;
+  }
+  label span.farbe4 {
+    background: #673ab7;
+  }
+  label span.farbe5 {
+    background: #3F51B5;
+  }
+  label span.farbe6 {
+    background: #2196F3;
+  }
+  label span.blue {
+    background: #03A9F4;
+  }
+  label span.violet {
+    background: #00BCD4;
+  }
+  label span.purple {
+    background: #009688;
+  }
+  label span.pink {
+    background: #4CAF50;
+  }

express-server/public/stylesheets/style.css

@@ -56,4 +56,8 @@
     right:5px;
     margin-top:-40px;
     border: 0px;
+}
+
+.farbeeen{
+    margin-left: 19px;
 }