Tabellenzellen füllen mit Colorpicker
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!
Der hier verwendete 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;
}
#ausgabe{
display:none;
width:100%;
min-height:100px;
}
#menue{
display:none;
}
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="/image/tool_paint.svg" width="30" height="30">
</div>
<div id="tool-eraser" class="tool tool-eraser">
<img src="/image/tool_eraser.svg" width="30" height="30">
</div>
<!--<div id="tool-colorpicker" class="tool tool-colorpicker">
<img src="/image/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>
<div><label>Alle Daten in Array Speichern und als json Speichern</label>
<button id="save">Speichern</button></div>
<div><label>Strickmuster als html Datei speichern</label>
<button id="saves">Strickmuster Speichern</button></div>
<textarea id="ausgabe"></textarea>
</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 far_ele=document.querySelector('#farbuswahl')
var g,h,l;
var y,x,z=0;
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;
}
y=1;
}else{
l=h_achse;
}
if(h_value.value!=''){
h=h_value.value;
if(h>max_kasten_height){
l=max_kasten;
}
x=1;
}else{
h=v_achse;
}
if(g_value.value!=''){
g=g_value.value;
if(g>max_gross){
g=max_gross;
}
z=1;
}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.setAttribute('data-color','#ffffff');
ele_h.style.width=g+'px';
ele_h.style.height=g+'px';
document.getElementById('line'+a).appendChild(ele_h)
}
}
//console.log(l,h,g)
if(y==1 && x==1 && z==1){
document.getElementById('menue').style.display='block';
}
weiter()
})
})
function weiter(){
var ele_box=document.querySelectorAll('.box');
ele_box.forEach(function(g){
g.addEventListener('click',function(){
far=far_ele.getAttribute('data-nowcolor');
//console.log(far)
g.setAttribute('data-color',far);
g.style.background=far;
})
})
}
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.setAttribute('data-color','#ffffff');
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';
g1.setAttribute('data-color','#ffffff');
})
})
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;
far_ele.setAttribute('class',color);
far_ele.style.backgroundColor = color;
far_ele.setAttribute('data-nowcolor',color);
if(!skipCjUpdate){
this.colorjoe.set(color);
}
}
}
const colorPicker = new ColorPicker(document.querySelector('.container'));
far_ele.addEventListener('click',function(){
let mod=document.querySelector('#colormodal');
mod.classList.toggle('ausblenden');
});
var info=document.querySelector('#ausgabe');
document.querySelector('#save').addEventListener('click',function(){
var alles=[];
alles.push({'breite':l_value.value});
alles.push({'hohe':h_value.value});
alles.push({'gross':g_value.value});
var c=0;
var ele_box2=document.querySelectorAll('.box');
ele_box2.forEach(function(g2){
c++;
var id=g2.getAttribute('id');
var col=g2.getAttribute('data-color');
alles.push({'box':c,'id':id,'farbe':col});
})
info.style.display='block';
info.innerHTML=JSON.stringify(alles);
//console.log(alles);
})
document.getElementById('saves').addEventListener('click', function() {
var data1 = g_value.value;
var data2 = z_feld.outerHTML;
var data=`
<!doctype html>
<html lang="de">
<head>
<style>
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:${data1}px;
height:${data1}px;
}
</style>
</head>
<body>
<main>
${data2}
</main>
</body>
</html>`;
var a = document.createElement('a');
a.href = 'data:application/csv;charset=utf-8,' + encodeURIComponent(data);
a.download = 'Testhtml.html';
document.getElementsByTagName('body')[0].appendChild(a);
a.click();
})
</script>
</body>
</html><script>
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//javascript-forum.de/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '6']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<script src="/stat/pws.php?mode=js"></script>
<noscript><img src="/stat/pws.php?mode=img" style="border:0; width:1px; height:1px" alt="noscript-img"></noscript>