From 7c9c46779f16bd8a411aec3ced396a1e4ab60601 Mon Sep 17 00:00:00 2001 From: NetMan <13informatyka14@gmail.com> Date: Tue, 9 Jan 2024 20:16:14 +0100 Subject: [PATCH] Grid create and remove in functions, added changing grid size --- index.html | 3 ++- script.js | 48 ++++++++++++++++++++++++++++++++---------------- style.css | 2 +- 3 files changed, 35 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index e02de6c..9a64174 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,8 @@

Sketchpad

- +
+ \ No newline at end of file diff --git a/script.js b/script.js index 7c52496..2cf9ed6 100644 --- a/script.js +++ b/script.js @@ -1,21 +1,37 @@ const container = document.querySelector("#container"); -for (let i = 0; i < 16; i++) { - let flexbox = document.createElement("div"); - flexbox.classList.add("flexbox"); - for (let j = 0; j < 16; j++) { - let div = document.createElement('div'); - div.classList.add("griddy"); - flexbox.appendChild(div); +function createGrid(size) { + for (let i = 0; i < size; i++) { + let flexbox = document.createElement("div"); + flexbox.classList.add("flexbox"); + for (let j = 0; j < size; j++) { + let div = document.createElement('div'); + div.classList.add("block"); + flexbox.appendChild(div); + } + container.appendChild(flexbox); } - container.appendChild(flexbox); + + let blocks = document.querySelectorAll(".block"); + blocks.forEach(block => { + block.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"}); + block.addEventListener("mouseout", (event) => { + setTimeout(() => event.target.style.backgroundColor = "#fff", 1 * 1000); + }); + }) } -let griddies = document.querySelectorAll(".griddy"); -griddies.forEach(griddy => { - griddy.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"}); - griddy.addEventListener("mouseout", (event) => { - setTimeout(() => event.target.style.backgroundColor = "#fff", 1000); - - }); -}) +createGrid(16); + +function removeGrid() { + document.querySelectorAll(".flexbox").forEach(flexbox => flexbox.remove()); + document.querySelectorAll(".block").forEach(block => block.remove()); +} + +document.querySelector("button#gridsize").addEventListener('click', () => { + let newGridSize = prompt("Provide new size of grid, provide one number, it will be processed as (VALUExVALUE - square grid):"); + if (!isNaN(newGridSize)) { + removeGrid(); + createGrid(newGridSize); + } +}); \ No newline at end of file diff --git a/style.css b/style.css index a9e066c..8370513 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ display: flex; } -.griddy { +.block { border: 1px solid #000; /* padding: 10px; */ flex: 1;