✔️ dynamic squares generation in the grid from user prompt

sameem420 · Mar 20, 2024 · 0614a67 · 0614a67
1 parent 6ebcd30
commit 0614a67
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git 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
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <button style="margin-bottom: 5px" id="btnNew">Create new Grid</button>
     <div id="container"></div>
     <button id="btnClear">Clear</button>
   </body>

diff --git 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;