From 0614a6767fd2d561514cd43b5efb8cac9d53e62d Mon Sep 17 00:00:00 2001 From: Muhammad Sameem Date: Wed, 20 Mar 2024 20:47:30 +0400 Subject: [PATCH] :heavy_check_mark: dynamic squares generation in the grid from user prompt --- JavaScript/project-Etch-a-Sketch/app.js | 14 ++++++++++++++ JavaScript/project-Etch-a-Sketch/index.html | 1 + JavaScript/project-Etch-a-Sketch/style.css | 9 +++++++++ 3 files changed, 24 insertions(+) diff --git a/JavaScript/project-Etch-a-Sketch/app.js b/JavaScript/project-Etch-a-Sketch/app.js index ddda41f..2dd0df8 100644 --- a/JavaScript/project-Etch-a-Sketch/app.js +++ b/JavaScript/project-Etch-a-Sketch/app.js @@ -2,6 +2,20 @@ const container = document.querySelector("#container"); let rows = document.getElementsByClassName("gridRow"); let cell = document.getElementsByClassName("cell"); const btnClear = document.querySelector("#btnClear"); +const btnNew = document.querySelector("#btnNew"); + +let size = 0; + +btnNew.addEventListener("click", function () { + size = +prompt("number of squares per side for the new grid (Max : 100)"); + + Array.from(rows).forEach((item) => { + container.removeChild(item); + }); + + makeRows(size); + makeColumns(size); +}); function makeRows(rowsSize) { for (let r = 0; r < rowsSize; r++) { diff --git a/JavaScript/project-Etch-a-Sketch/index.html b/JavaScript/project-Etch-a-Sketch/index.html index 16f5988..a2396f7 100644 --- a/JavaScript/project-Etch-a-Sketch/index.html +++ b/JavaScript/project-Etch-a-Sketch/index.html @@ -7,6 +7,7 @@ +
diff --git a/JavaScript/project-Etch-a-Sketch/style.css b/JavaScript/project-Etch-a-Sketch/style.css index 725f861..4e5ae03 100644 --- a/JavaScript/project-Etch-a-Sketch/style.css +++ b/JavaScript/project-Etch-a-Sketch/style.css @@ -1,3 +1,12 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +#container { + min-width: 960px; +} .cell { border: 1px solid gray; min-width: 20px;