Archiv-Modus von Basti1012 Lösungspage

Hallo zusammen! Ich hab vor Kurzem angefangen Javascript zu lernen und möchte ein kleines Programm schreiben, mit dem man Strickmuster planen kann. Dazu frage ich in zwei Formularen ab, wie viele Maschen der oder die NutzerIn in Breite und Höhe haben möchte. Den Colorpicker habe ich aus einem Tutorial. Mir geht es vor allem um den letzten Absatz, wo ich einfach nicht weiter weiß (this.style.backgroundcolor= XXX?) Über Hinweise und Tipps wäre ich Sau dankbar! Vielen Dank schonmal!

Code

                                    
                                <!doctype html>
<html>
  <head>
<link rel="stylesheet"  href="/css_webseite/colorjoe.css">
     <script src="/js_webseite/colorjoe.min.js"></script>
<style>
.ausblenden{
    display:none;
  }
  #farbuswahl{
    font-weight:900;
    color:white;
  }
    </style>
  </head>
  <body>
        <form>
        <label for="h-stitches">Vertical Stitches:</label>
        <input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>
        <label for="v-stitches">Horizontal Stitches:</label>
        <input type="number" min="0" id="h-stitches" name="h-stitches"><br><br><label> Farbauswahl</label>
          <input type="text" id="farbuswahl" placeholder="auswahl...">
        </form>
<div id="colormodal" class="container ausblenden">
          <div class="colorjoe"></div>
     </div>
    <script>
     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;
          if(!skipCjUpdate){
               this.colorjoe.set(color);
          }
     }
     getSavedColors(){
          const saved = JSON.parse(localStorage.getItem('colorpicker-saved') || '[]');
          return new Array(5).fill('#ffffff').map((defaultColor,index) => {
               return saved[index] || defaultColor;
          });
     }
     showSavedColor(element,color){
          element.style.backgroundColor = color;
          element.dataset.color = color;
     }
     saveColor(color,index){
          this.savedColors[index] = color;
          localStorage.setItem('colorpicker-saved',JSON.stringify(this.savedColors));
     }
}
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>

basti1012.bplaced.net

Tabellenzellen füllen mit Colorpicker - kann jemand helfen?

Code