javascript.js

const container = document.getElementById('container');
function getRandomRGB() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

for (let i = 0; i < 256; i++) {
    const square = document.createElement('div');
    square.classList.add('square');
    square.style.opacity = "0.1";
    square.addEventListener('mouseover', () => {
        square.style.backgroundColor = getRandomRGB();
        
        let currentOpacity = parseFloat(square.style.opacity);
        if (currentOpacity < 1) {
            square.style.opacity = (currentOpacity + 0.1).toString();
        }  
    });

    container.appendChild(square);
}

const button = document.getElementById('reset-button');
button.addEventListener('click', () => {
    const squares = document.querySelectorAll('.square');
    squares.forEach(square => {
        square.style.backgroundColor = '';
        square.style.opacity = "0.1";
    });
}); 

const buttonNewGrid = document.getElementById('new-grid-button');
buttonNewGrid.addEventListener('click', () => {
    let userInput = prompt("Enter new grid size (max 100) :");
    let gridSize = parseInt(userInput);
    if (gridSize < 1 || gridSize > 100){
        alert("Invalid input. Please enter a number between 1 and 100.");
        return;
    }
    container.innerHTML = ''; 
    for (let i = 0; i < gridSize * gridSize; i++){
        const square = document.createElement('div');
        square.classList.add('square');
        square.style.opacity = "0.1";
        square.style.flex = `1 0 calc(100% / ${gridSize})`; // Adjust size based on grid
        square.addEventListener('mouseover', () => {
            square.style.backgroundColor = getRandomRGB();
        
            let currentOpacity = parseFloat(square.style.opacity);
            if (currentOpacity < 1) {
                square.style.opacity = (currentOpacity + 0.1).toString();
            }
        });
        container.appendChild(square);
    }
});