const flagCanvas = document.getElementById('flag-canvas');

const stripeAmountInput = document.getElementById('stripe-amount-input');
let ctx = flagCanvas.getContext("2d");

const colorInputContainer = document.getElementById('color-input-container');

let stripeAmount = [];

ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

stripeAmountInput.addEventListener('change', (event) => {
    while (colorInputContainer.firstChild) {
        console.log(1);
        console.log(colorInputContainer);
        console.log(colorInputContainer.firstChild)
        colorInputContainer.removeChild(colorInputContainer.firstChild);
    }

    if(stripeAmountInput.value < 0){
        stripeAmountInput.value = 0;
    }

    for(i = 0; i < stripeAmountInput.value; i++){
        stripeAmount.push(i);
    }

    stripeAmount.forEach(element => {
        let colorPickerInput = document.createElement('input');
        colorPickerInput.setAttribute('type', 'color');
        colorInputContainer.appendChild(colorPickerInput);
    });
});