html/lab5/task4/script.js - main - Coderdev/web-static-labs

html/lab5/task4/script.js
145 строк2 KB
Coderdev
26 мар 2026, 23:33
26 мар 2026, 23:336331fa1
"use strict";

const grid = document.getElementById("grid");
const table = document.getElementById("table");
const btn = document.getElementById("paint");

const palette = [
"#780000",
"#c1121f",
"#fdf0d5",
"#003049",
"#669bbc"
];

const allColors = [
"#780000",
"#c1121f",
"#fdf0d5",
"#003049",
"#669bbc",
"white",
"black"
];



// создаём 100 клеток

for(let i=0;i<100;i++){

let d = document.createElement("div");

d.className = "cell";


// ЛКМ → белый

d.addEventListener("click",()=>{

d.style.background = "white";

updateTable();

});


// ПКМ → чёрный

d.addEventListener("contextmenu",(e)=>{

e.preventDefault();

d.style.background = "black";

updateTable();

});

grid.appendChild(d);

}

const cells = grid.children;



// кнопка раскрасить

btn.addEventListener("click",()=>{

for(let c of cells){

let color = palette[
Math.floor(Math.random()*palette.length)
];

c.style.background = color;

}

updateTable();

});




// обновление таблицы

function updateTable(){

table.innerHTML =
"<tr><th>Цвет</th><th>Количество</th></tr>";

for(let color of allColors){

let count = 0;

for(let c of cells){

let bg = getComputedStyle(c).backgroundColor;

if(bg == toRGB(color)) count++;

}

let tr = document.createElement("tr");

let td1 = document.createElement("td");
let td2 = document.createElement("td");

let box = document.createElement("div");

box.className = "color";
box.style.background = color;

td1.appendChild(box);

td2.textContent = count;

tr.appendChild(td1);
tr.appendChild(td2);

table.appendChild(tr);

}

}



// hex → rgb

function toRGB(hex){

if(hex=="white") return "rgb(255, 255, 255)";
if(hex=="black") return "rgb(0, 0, 0)";

let r = parseInt(hex.substr(1,2),16);
let g = parseInt(hex.substr(3,2),16);
let b = parseInt(hex.substr(5,2),16);

return 'rgb(${r}, ${g}, ${b})';

}