text: "use strict";
  const grid_dimension = 550;
  let randomFlag = 1;
  let defaultFlag = 0;
  let customFlag = 0;
  const container = document.querySelector(".container");
  const customForm = document.getElementById('changecolor');
  const customPicker = document.getElementById('color');
  const blackButton = document.getElementById('blackbutton');
  const randomButton = document.getElementById('randombutton');
  
  function prepareBtns() {
  	blackButton.addEventListener('click', (event) => {
  		randomFlag = 0;
  		defaultFlag = 1;
  		customFlag = 0;
  	})
  	randomButton.addEventListener('click', (event) => {
  		randomFlag = 1;
  		defaultFlag = 0;
  		customFlag = 0;
  	})
  	customPicker.addEventListener('click', (event) => {
  		randomFlag = 0;
  		defaultFlag = 0;
  		customFlag = 1;
  	})
  	
  }
  
  function randomColor() {
  	var color = Math.floor(Math.random() * 16777216).toString(16);
  	return '#000000'.slice(0, -color.length) + color;
  }
  
  function createDivs(rows, cols) {
  	let totalDivs = rows * cols;
  	for (let i = 0; i < totalDivs; i++) {
  		let div = document.createElement("div");
  		div.classList.add('child');
  		div.addEventListener('mouseover', (event) => {
  			if (randomFlag) {
  				console.log("true");
  				event.target.style.backgroundColor = randomColor();
  			}
  			else if (defaultFlag) {
  				event.target.style.backgroundColor = "#000000";
  			}
  			else if (customFlag) {
  				event.target.style.backgroundColor = customForm.color.value;
  			}
  		})
  		container.appendChild(div);
  	}
  }
  
  function createGrid(rows, cols){
  
  	let rowSize = grid_dimension/rows;
  	let colSize = grid_dimension/cols;
  	createDivs(rows, cols);
  	
  	container.style.gridTemplateRows = `repeat(${(rows)}, ${rowSize}px)`;
  	container.style.gridTemplateColumns = `repeat(${(cols)}, ${colSize}px)`;
  }
  
  function main() {
  	createGrid(16, 16);
  	prepareBtns();
  }
  
  main();