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

@@ -57,3 +57,7 @@
     margin-top:-40px;
     border: 0px;
 }
+
+.farbeeen{
+    margin-left: 19px;
+}

express-server/views/dash.ejs

@@ -4,6 +4,7 @@
     <title></title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel='stylesheet' href='/stylesheets/style.css'>
+    <link rel='stylesheet' href='/stylesheets/colorpicker-style.css'>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.min.css'>
     <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
@@ -64,7 +65,47 @@
     
                     <div class="form-group layout">
                       <label for="exampleInputPassword1">Farbe</label>
-                      <input type="text" class="form-control" id="groupfarbe" placeholder="zB: Red">
+                      <div class="farbeeen">
+                            
+                        <input type="radio" name="color" id="farbe1" value="F44336" />
+                        <label for="farbe1"><span class="farbe1 border"></span></label>
+    
+                        <input type="radio" name="color" id="farbe2" value="e91e63" />
+                        <label for="farbe2"><span class="farbe2"></span></label>
+    
+                        <input type="radio" name="color" id="farbe3" value="9c27b0" />
+                        <label for="farbe3"><span class="farbe3"></span></label>
+    
+                        <input type="radio" name="color" id="farbe4" value="673ab7" />
+                        <label for="farbe4"><span class="farbe4"></span></label>
+    
+                        <input type="radio" name="color" id="farbe5" value="3F51B5" />
+                        <label for="farbe5"><span class="farbe5"></span></label>   
+    
+                        <input type="radio" name="color" id="farbe6" value="2196F3" />
+                        <label for="farbe6"><span class="farbe6"></span></label>
+
+                        <!-- <br> 
+    
+                        <input type="radio" name="color" id="violet" value="violet" />
+                        <label for="violet"><span class="violet"></span></label>
+    
+                        <input type="radio" name="color" id="purple" value="purple" />
+                        <label for="purple"><span class="purple"></span></label>
+    
+                        <input type="radio" name="color" id="pink" value="pink" />
+                        <label for="pink"><span class="pink"></span></label>
+
+                        <input type="radio" name="color" id="blue" value="blue" />
+                        <label for="blue"><span class="blue"></span></label>
+    
+                        <input type="radio" name="color" id="violet" value="violet" />
+                        <label for="violet"><span class="violet"></span></label>
+    
+                        <input type="radio" name="color" id="purple" value="purple" />
+                        <label for="purple"><span class="purple"></span></label> -->
+
+                        </div>
                     </div>
     
                     <center><button type="submit" class="btn btn-outline-dark gruppenadd">Hinzufügen</button></center>