etch-a-sketch/main.js at master · reevox2/etch-a-sketch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
let xDivs = 1;
let yDivs = 1;
let howManyDivs = xDivs * yDivs
let newDiv = document.createElement('div');
let container = document.querySelector('.container');
container.style.gridTemplateColumns = `repeat(${xDivs}, 1fr)`;
container.style.gridTemplateRows = `repeat(${yDivs}, 1fr)`;

custom = document.querySelector('.custom');
function getGridSize(){
	xDivs = prompt('How many divs on the x axis?');
	yDivs = prompt('How many divs on the y axis?');
}
function calculateDivs(xdivs, ydivs){
	return result = xdivs * ydivs
}
function customizeGrid(){
	getGridSize();
	howManyDivs = calculateDivs(xDivs, yDivs);
	container.style.gridTemplateColumns = `repeat(${xDivs}, 1fr)`;
	container.style.gridTemplateRows = `repeat(${yDivs}, 1fr)`;
	resetGrid();
	addDivs();
}
function getGrids(){
	totalDivs = Array.from(document.querySelectorAll('.container div'));
}

function getDivColors() {
	let allDivs = document.querySelectorAll('.container div');
	allDivs.forEach((div) => {
		console.log(!(div.style.backgroundColor));
		if(div.style.backgroundColor){
			console.log(div.style.backgroundColor);
		}
	});
}
function resetGrid(){
	getGrids();
	for(let i = 0, length1 = totalDivs.length; i < length1; i++){
		container.removeChild(totalDivs[i]);
	}
}

custom.addEventListener('click', customizeGrid);

function changeBackgroundColor(e) {
	let divsColor = e.target.style.backgroundColor
	//if the div doesnt have a color yet, set it
	if(!(divsColor)){
		e.target.style.backgroundColor = e.target.dataset.randomColor;
	} else {
		e.target.style.backgroundColor = getDarkerColor(divsColor, e.target.dataset.decreaseValues);
	}
}

function addDivs() {
	for(let i = howManyDivs; i > 0; i--){
	newDiv = document.createElement('div');
	container.appendChild(newDiv);
	newDiv.dataset.randomColor = getRandomColor();
	newDiv.dataset.decreaseValues = getColorDecreaseValues(newDiv.dataset.randomColor);
	newDiv.addEventListener('mouseover', changeBackgroundColor)
	}
}
function getColorDecreaseValues(divsColor) {
	let string = divsColor;
	let R, G, B
	string = string.replace('rgb(', '');
	string = string.replace(')', '');
	string = string.replace(' ', '');
	stringValues = string.split(',');
	R = stringValues[0];
	decreaseR = R / 10;
	G = stringValues[1];
	decreaseG = G / 10;
	B = stringValues[2];
	decreaseB = B / 10;
	return `${decreaseR},${decreaseG},${decreaseB}`
}
function getDarkerColor(divsColor, decreaseValues) {
	let string = divsColor;
	let R, G, B;
	let decreaseValuesArray;
	string = string.replace('rgb(', '');
	string = string.replace(')', '');
	string = string.replace(' ', '');
	stringValues = string.split(',');
	R = stringValues[0];
	G = stringValues[1];
	B = stringValues[2];
	decreaseValuesArray = decreaseValues.split(',')
	R = R - decreaseValuesArray[0]
	G = G - decreaseValuesArray[1]
	B = B - decreaseValuesArray[2]
	return `rgb(${R}, ${G}, ${B})`;

}
function getRandomColor() {
	let R = getRandomInt(255);
	let G = getRandomInt(255);
	let B = getRandomInt(255);
	let RGB = `rgb(${R}, ${G}, ${B})`;
	return RGB;
}

//random number function
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}