tod
/
odin-etch-a-sketch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Grid create and remove in functions, added changing grid size

This commit is contained in:
NetMan 2024-01-09 20:16:14 +01:00
parent e6435e500e
commit 7c9c46779f
3 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -10,7 +10,8 @@
<body> <body>
<h1>Sketchpad</h1> <h1>Sketchpad</h1>
<div id="container"> <div id="container">
</div> </div>
<button id="gridsize">Change size of grid</button>
</body> </body>
</html> </html>

48
script.js
View File

@ -1,21 +1,37 @@
const container = document.querySelector("#container"); const container = document.querySelector("#container");
for (let i = 0; i < 16; i++) { function createGrid(size) {
let flexbox = document.createElement("div"); for (let i = 0; i < size; i++) {
flexbox.classList.add("flexbox"); let flexbox = document.createElement("div");
for (let j = 0; j < 16; j++) { flexbox.classList.add("flexbox");
let div = document.createElement('div'); for (let j = 0; j < size; j++) {
div.classList.add("griddy"); let div = document.createElement('div');
flexbox.appendChild(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"); createGrid(16);
griddies.forEach(griddy => {
griddy.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"}); function removeGrid() {
griddy.addEventListener("mouseout", (event) => { document.querySelectorAll(".flexbox").forEach(flexbox => flexbox.remove());
setTimeout(() => event.target.style.backgroundColor = "#fff", 1000); 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);
}
});

2
style.css
View File

@ -7,7 +7,7 @@
display: flex; display: flex;
} }
.griddy { .block {
border: 1px solid #000; border: 1px solid #000;
/* padding: 10px; */ /* padding: 10px; */
flex: 1; flex: 1;