<!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;
}

#zeichenfeld{
display: flex;
    flex-direction: column;
    align-items: center;
}
.line{
    display:flex;
}



.box{
  border:1px solid black;
  width:10px;
  height:10px;
}

  
    </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"><label> Farbauswahl</label>
        <input type="text" id="farbuswahl" placeholder="auswahl...">

        <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 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 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!=''){
      var l=l_value.value;
    }else{
      var l=h_achse;
    }
    if(h_value.value!=''){
      var h=h_value.value;
    }else{
      var h=v_achse;
    }
    if(g_value.value!=''){
      var g=g_value.value;
    }else{
      var 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;
      
    })
  })
  
  
  
}



 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.savedColors = this.getSavedColors();
         this.colorjoe.show();
this.setSelectedColor('#009578');
         this.colorjoe.on('change',color => {
              this.setSelectedColor(color.hex(),true);
         });
         this.root.querySelectorAll('.saved-color').forEach((element,index) => {
              this.showSavedColor(element,this.savedColors[index]);
   element.addEventListener('mouseup',event => {
    if(event.button == 1){   
          this.saveColor(this.selectedColor,index);
          this.showSavedColor(element,this.selectedColor);
         }                    this.setSelectedColor(element.dataset.color);
              });
         });
    }
    setSelectedColor(color,skipCjUpdate = false){
         this.selectedColor = color;
         document.querySelector('#farbuswahl').value = color;       
         document.querySelector('#farbuswahl').style.backgroundColor = color;
       let fa=document.getElementById('farbuswahl').value;
//   this.style.backgroundColor = fa;
     
     

     

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

  
  
    getSavedColors(){

    }
    showSavedColor(element,color){

    }
    saveColor(color,index){

    }
}

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