color picker 2

            
               <!doctype html>
<html>
  <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/css/colorjoe.css">
<script src="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/dist/colorjoe.min.js"></script>
<style>
.ausblenden{
    display:none;
}
#farbuswahl{
    font-weight:900;
    color:white;
}
main{
display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-end;
    align-items: center;
}
#zeichenfeld{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.line{
    display:flex;
}
.box{
    border:1px solid black;
    width:10px;
    height:10px;
}
#toolbar{
    display:flex;
    width:165px;
}
#toolbar div {
    display: flex;
    flex: 1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid black;
    background: blue;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
    align-items: center;
}
</style>
</head>
<body>
<main>
<div>
   <label>Horizontale lange in kästchen</label>
   <input type="number" min="1" max="100" id="lange">
</div>
<div>
   <label>Vertikale höhe in Kästchen</label>
   <input type="number" min="1" max="100" id="hohe">
</div>
<div>
   <label>Größe eines kästchen in Pixel</label>
   <input type="number" min="1" max="30" id="gross">
</div>
<div id="menue">
  <div id="toolbar">
       <div id="tool-pencil" class="tool tool-pencil active">
              <img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_paint.svg" width="30" height="30">
       </div>
       <div id="tool-eraser" class="tool tool-eraser">
              <img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_eraser.svg" width="30" height="30">
       </div>
   <!--<div id="tool-colorpicker" class="tool tool-colorpicker">
              <img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_pipette.svg" width="30" height="30">
       </div>-->
       <div id="farbuswahl"  title="farbauswahl"></div>
   </div>  
   <div id="colormodal" class="container ausblenden">
        <div class="colorjoe"></div>
   </div>
   <div>  
        <label>Alles zurücksetzen</label>
        <button id="ree">resete der farben</button>
   </div>
</div>
<div id="zeichenfeld"></div>
</main>
<script>
var h_achse=1;
var v_achse=1;
var max_kasten_width=100;
var max_kasten_height=100;
var max_gross=50;
var gro=5;
var z_feld=document.getElementById('zeichenfeld');
var l_value=document.getElementById('lange');
var h_value=document.getElementById('hohe');
var g_value=document.getElementById('gross');
var g,h,l;
var inp_ele=document.querySelectorAll('#lange,#hohe,#gross');
inp_ele.forEach(function(s){
   s.addEventListener('change',function(){
      var a,b,c=0;
      z_feld.innerHTML='';
      if(l_value.value!=''){
           l=l_value.value;
           if(l>max_kasten_width){
             l=max_kasten;
           }
      }else{
           l=h_achse;
      }
      if(h_value.value!=''){
           h=h_value.value;
           if(h>max_kasten_height){
               l=max_kasten;
           }
      }else{
           h=v_achse;
      }
      if(g_value.value!=''){
           g=g_value.value;
           if(g>max_gross){
               g=max_gross;
           }
      }else{
           g=gro;
      }
      for(a=0;a<=h;a++){
         var ele_l=document.createElement('div');
         ele_l.id='line'+a;
         ele_l.setAttribute('class','line');
         z_feld.appendChild(ele_l);
         for(b=0;b<=l;b++){
             var ele_h=document.createElement('div');
             ele_h.id='box'+a+b;
             ele_h.setAttribute('class','box');
             ele_h.style.width=g+'px';
             ele_h.style.height=g+'px'; 
             document.getElementById('line'+a).appendChild(ele_h)
         }
     }
     console.log(l,h,g)
    weiter()  
   })
})
function weiter(){
   var ele_box=document.querySelectorAll('.box');
   ele_box.forEach(function(g){
      g.addEventListener('click',function(){
         g.style.background=document.getElementById('farbuswahl').value;
      })
   })
}

var farbe=false;  
      
      
document.getElementById('tool-pencil').addEventListener('click',function(){    
   farbe=true;
})

document.getElementById('tool-eraser').addEventListener('click',function(){
   farbe=false;
   var ele_box1=document.querySelectorAll('.box');
   ele_box1.forEach(function(g1){
       g1.addEventListener('click',function(){
          if(farbe==false){
             g1.style.background='none';
          }
       })
   })
})

/*
document.getElementById('tool-colorpicker').addEventListener('click',function(){
})
*/
      
document.getElementById('ree').addEventListener('click',function(){
     var ele_box1=document.querySelectorAll('.box');
     ele_box1.forEach(function(g1){
         g1.style.background='none';
     })
 })




class ColorPicker {
    constructor(root){
         this.root = root;
         this.colorjoe = colorjoe.rgb(this.root.querySelector('.colorjoe'));
         this.selectedColor = null;
         this.colorjoe.show();
         this.setSelectedColor('#009578');
         this.colorjoe.on('change',color => {
              this.setSelectedColor(color.hex(),true);
         });
    }
    setSelectedColor(color,skipCjUpdate = false){
         this.selectedColor = color;
         document.querySelector('#farbuswahl').setAttribute('class',color);
document.querySelector('#farbuswahl').value = color;       
document.querySelector('#farbuswahl').style.backgroundColor = color;
let fa=document.getElementById('farbuswahl').value;

         if(!skipCjUpdate){
              this.colorjoe.set(color);
         }
    }
  
  
  
  

  
}

const colorPicker = new ColorPicker(document.querySelector('.container'));
document.querySelector('#farbuswahl').addEventListener('click',function(){

let mod=document.querySelector('#colormodal');
mod.classList.toggle('ausblenden');
});
    </script>
  </body>
</html>
External Javascript and CSS
