I'm working my way through the Foundations course on The Odin Project and just finished the Etch-a-Sketch assignment.
The program receives a number from 1 - 100 from the user through a prompt and then creates a grid from the square of the number. Then, on mouse over, a square of the grid will be assigned a random number and increase opacity by 0.10. When the user wishes to create a new grid, they click a button that eliminates the current grid and then reruns in the same way as before.
I am so new at programming and I really hope to learn "best practices" and how to code without the need for too many comments. I also had a hard time selecting and applying style changes on the children nodes of the container node on mouse over. To me, any feed back is invaluable.
Thank you for any considerations.
function removeAllChildNodes(parent){
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
function getInput() {
let promptInput = prompt('Enter a whole number between 1 and 100', '');
return promptInput;
}
function createArray(promptInput){
const square = [];
for(i = 0; i < promptInput; i++) {
square[i] += `${i}`;
}
return square;
}
let uniqueClass = 0;
function createUniqueClass(){
uniqueClass += 1;
return uniqueClass;
}
function addOpacity(element) {
let numElement = +(element.style.opacity);
if (numElement === 1){
return numElement;
}
numElement += 0.10;
return numElement;
}
function addColor(div){
div.addEventListener('mouseover', (event) => {
const element = document.getElementsByClassName(event.target.classList);
console.log(event.target);
element[0].style.background = `#${(Math.floor(Math.random()*16777215).toString(16))}`
element[0].style.opacity = `${addOpacity(element[0])}`;
});
}
const container = document.querySelector('#container');
container.setAttribute('style', 'display: flex; flex: 1 1 0; height: 960px; width: 960px; margin: auto; border: solid black 1px; flex-wrap: wrap;');
function createGrid(grid){
grid.forEach(() => {
const div = document.createElement('div');
div.setAttribute('style', 'box-sizing: border-box; border: 1px solid black;');
/*div.style.boxSizing = 'border-box'; // div.setAttribute would not accept boxSizing property
div.style.border = '1px solid black';*/
div.classList.add(`box${createUniqueClass()}`); // Create a unique class name for each div child of container
container.appendChild(div);
div.style.height = `${960 / promptInput + 0.01}px`; // Add 0.01px for column doesn't fill in container completely
div.style.width = `${960 / promptInput}px`;
addColor(div);
});
}
let promptInput = '';
let array = [''];
const button = document.querySelector('button');
button.addEventListener('click', () => {
removeAllChildNodes(container);
promptInput = getInput();
grid = createArray(promptInput * promptInput);
createGrid(grid);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="java-script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Generate New Grid</button>
<div id="container"></div>
</body>
</html>
