From 04c83e98484a716ff948d21588c786a511a26dc1 Mon Sep 17 00:00:00 2001 From: Muhammad Sameem Date: Tue, 19 Mar 2024 11:25:31 +0400 Subject: [PATCH] :heavy_check_mark: project initial code added grid (rows, cells) creation, hovering effect and clear --- JavaScript/project-Etch-a-Sketch/app.js | 44 +++++++++++++++++++++ JavaScript/project-Etch-a-Sketch/index.html | 14 +++++++ JavaScript/project-Etch-a-Sketch/style.css | 7 ++++ 3 files changed, 65 insertions(+) create mode 100644 JavaScript/project-Etch-a-Sketch/app.js create mode 100644 JavaScript/project-Etch-a-Sketch/index.html create mode 100644 JavaScript/project-Etch-a-Sketch/style.css diff --git a/JavaScript/project-Etch-a-Sketch/app.js b/JavaScript/project-Etch-a-Sketch/app.js new file mode 100644 index 0000000..ddda41f --- /dev/null +++ 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 new file mode 100644 index 0000000..16f5988 --- /dev/null +++ b/JavaScript/project-Etch-a-Sketch/index.html @@ -0,0 +1,14 @@ + + + + + + Etch-a-Sketch + + + +
+ + + + diff --git a/JavaScript/project-Etch-a-Sketch/style.css b/JavaScript/project-Etch-a-Sketch/style.css new file mode 100644 index 0000000..725f861 --- /dev/null +++ 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; +}