✔️ project initial code added

grid (rows, cells) creation, hovering effect and clear
sameem420 · Mar 19, 2024 · 04c83e9 · 04c83e9
1 parent 04a9880
commit 04c83e9
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 0 deletions.
diff --git a/JavaScript/project-Etch-a-Sketch/app.js b/JavaScript/project-Etch-a-Sketch/app.js
@@ -0,0 +1,44 @@
+const container = document.querySelector("#container");
+let rows = document.getElementsByClassName("gridRow");
+let cell = document.getElementsByClassName("cell");
+const btnClear = document.querySelector("#btnClear");
+
+function makeRows(rowsSize) {
+  for (let r = 0; r < rowsSize; r++) {
+    const row = document.createElement("div");
+    container.appendChild(row).className = "gridRow";
+  }
+}
+
+function makeColumns(columnsSize) {
+  for (let k = 0; k < rows.length; k++) {
+    for (let c = 0; c < columnsSize; c++) {
+      let newCell = document.createElement("div");
+      rows[c].appendChild(newCell).className = "cell";
+    }
+  }
+}
+
+//Creates a default grid sized 16x16
+function defaultGrid() {
+  makeRows(16);
+  makeColumns(16);
+}
+
+defaultGrid();
+
+Array.from(cell).forEach((item) => {
+  item.addEventListener("mouseover", function () {
+    item.style.backgroundColor = "red";
+  });
+});
+
+function clear() {
+  Array.from(cell).forEach((item) => {
+    item.style.backgroundColor = "white";
+  });
+}
+
+btnClear.addEventListener("click", () => {
+  clear();
+});
diff --git a/JavaScript/project-Etch-a-Sketch/index.html b/JavaScript/project-Etch-a-Sketch/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Etch-a-Sketch</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div id="container"></div>
+    <button id="btnClear">Clear</button>
+  </body>
+  <script src="app.js"></script>
+</html>
diff --git a/JavaScript/project-Etch-a-Sketch/style.css b/JavaScript/project-Etch-a-Sketch/style.css
@@ -0,0 +1,7 @@
+.cell {
+  border: 1px solid gray;
+  min-width: 20px;
+  min-height: 20px;
+  display: inline-block;
+  margin-right: 2px;
+}