RandomColorTableJS/script.js at main · Rarity64/RandomColorTableJS · 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
let headerText = document.getElementById("header-text");
let introInput = document.getElementById("intro-input");
let randomColorTable = document.getElementById("random-color-table");

headerText.innerHTML = "<h1>Таблица случайных цветов от Суяргулова Эдуарда</h1>";
headerText.setAttribute("align", "center");

introInput.innerHTML = `
	<p>Выберите размер таблицы</p>
	<br>
	<label for='table-height'>Количество строк в таблице </label>
	<input type='text' id='table-height-value' size='1' value='10'>
	<label for='table-width'>Количество ячеек в строке </label>
	<input type='text' id='table-width-value' size='1' value='10'>
	<br>
	<input type="button" value="Сгенерировать" id="generate-button" onclick="generate()">`;
introInput.setAttribute("align", "center");

function generate() {
	let tableWidth = document.getElementById("table-width-value");
	let tableHeight = document.getElementById("table-height-value");

	let tableWidthValue = parseInt(tableWidth.value);
	let tableHeightValue = parseInt(tableHeight.value);

	let redRand = 0, greenRand = 0, blueRand = 0;

	randomColorTable.setAttribute("align", "center");

	if(tableWidthValue > 0 && tableHeightValue > 0 && tableWidthValue <= 10 && tableHeightValue <= 10) {
		let cells = "";
		randomColorTable.innerHTML = "<table id='table-body'></table>";
		let tableBody = document.getElementById("table-body");

		for(let i = 1; i <= tableHeightValue; i++) {
			tableBody.innerHTML += "<tr class='rows' id='row" + i + "'></tr>";
			for(let j = 1; j <= tableWidthValue; j++) {
				redRand = Math.floor(Math.random() * 255);
				greenRand = Math.floor(Math.random() * 255);
				blueRand = Math.floor(Math.random() * 255);
				cells += "<td class='cells' id='cell" + i + j
				+ "' style='background-color: rgb(" + redRand + " " + greenRand + " " + blueRand
				+ ")'>" + "R: " + redRand + "<br>" + "G: " + greenRand + "<br>" + "B: " + blueRand  + "</td>";
			}
			document.getElementById("row" + i).innerHTML = cells;
			cells = "";
		}

	}
	else {
		randomColorTable.innerHTML = "Введите значение больше 0 и меньше 10"
	}
}