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