From 9b7c22cc767744ccdf6269c24b23c79fb202e5a5 Mon Sep 17 00:00:00 2001 From: Mohammed Islam Date: Fri, 20 Jun 2025 13:22:51 -0400 Subject: [PATCH 01/12] test --- main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/main.js b/main.js index 79a0fd1..5ae069b 100644 --- a/main.js +++ b/main.js @@ -5,3 +5,4 @@ root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); }); +//Test \ No newline at end of file From 909e9a2ab80b3b2b566c2f99df3ef147755e3c1b Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 20 Jun 2025 13:41:28 -0400 Subject: [PATCH 02/12] Resolved #8 --- main.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/main.js b/main.js index 79a0fd1..5a8c804 100644 --- a/main.js +++ b/main.js @@ -4,4 +4,25 @@ const root = document.getElementById("root"); root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); + + if (event.target.id === "fill-grid") { + const colorSelect = document.getElementById("color-select"); + const currentColor = colorSelect.value; + + // Fill all uncolored cells with the currently selected color + + // Fill all cells with the currently selected color + const allCells = document.querySelectorAll("td"); + [...allCells].forEach((e) => {e.style.backgroundColor = currentColor;}); + } + else if (event.target.id === "clear-grid") { + // Clear all cells/restore all cells to their original/initial color + } + else if (event.target.tagName === "TD") { + // Click and hold (mouseover) from a single cell (start) to a different cell (end) + // such that all affected/hovered-over cells from start to end change to the currently + // selected color + + } }); + From 18bdeb637bad0735baf8a701a149d46d3aaba3e3 Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 20 Jun 2025 13:43:49 -0400 Subject: [PATCH 03/12] Resolved #9 --- main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/main.js b/main.js index 5a8c804..40340c8 100644 --- a/main.js +++ b/main.js @@ -17,6 +17,8 @@ root.addEventListener("click", (event) => { } else if (event.target.id === "clear-grid") { // Clear all cells/restore all cells to their original/initial color + const allCells = document.querySelectorAll("td"); + [...allCells].forEach((e) => {e.style.backgroundColor = "";}); } else if (event.target.tagName === "TD") { // Click and hold (mouseover) from a single cell (start) to a different cell (end) From 6e13de592324d69e74e17a87571ab1e6d98b52ab Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 20 Jun 2025 13:49:13 -0400 Subject: [PATCH 04/12] Refactored allCells assignment --- main.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/main.js b/main.js index 40340c8..0d965c2 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,7 @@ // Please feel free to change the JS as you see fit! This is just a starting point. const root = document.getElementById("root"); +const allCells = [...document.querySelectorAll("td")]; root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); @@ -12,13 +13,11 @@ root.addEventListener("click", (event) => { // Fill all uncolored cells with the currently selected color // Fill all cells with the currently selected color - const allCells = document.querySelectorAll("td"); - [...allCells].forEach((e) => {e.style.backgroundColor = currentColor;}); + allCells.forEach((e) => {e.style.backgroundColor = currentColor;}); } else if (event.target.id === "clear-grid") { // Clear all cells/restore all cells to their original/initial color - const allCells = document.querySelectorAll("td"); - [...allCells].forEach((e) => {e.style.backgroundColor = "";}); + allCells.forEach((e) => {e.style.backgroundColor = "";}); } else if (event.target.tagName === "TD") { // Click and hold (mouseover) from a single cell (start) to a different cell (end) @@ -28,3 +27,5 @@ root.addEventListener("click", (event) => { } }); + + From 0791300dc69613e9a4db3d5ab074926992ceae49 Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 20 Jun 2025 13:59:34 -0400 Subject: [PATCH 05/12] Resolved #10 - Added a function for getting the current color --- main.js | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/main.js b/main.js index 0d965c2..7cc0e57 100644 --- a/main.js +++ b/main.js @@ -2,30 +2,39 @@ const root = document.getElementById("root"); const allCells = [...document.querySelectorAll("td")]; +let filling = false; root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); if (event.target.id === "fill-grid") { - const colorSelect = document.getElementById("color-select"); - const currentColor = colorSelect.value; - // Fill all uncolored cells with the currently selected color // Fill all cells with the currently selected color - allCells.forEach((e) => {e.style.backgroundColor = currentColor;}); + allCells.forEach((e) => { e.style.backgroundColor = GetCurrentColor(); }); } else if (event.target.id === "clear-grid") { // Clear all cells/restore all cells to their original/initial color - allCells.forEach((e) => {e.style.backgroundColor = "";}); - } - else if (event.target.tagName === "TD") { - // Click and hold (mouseover) from a single cell (start) to a different cell (end) - // such that all affected/hovered-over cells from start to end change to the currently - // selected color - + allCells.forEach((e) => { e.style.backgroundColor = ""; }); } + + filling = false; }); +// Click and hold (mouseover) from a single cell (start) to a different cell (end) +// such that all affected/hovered-over cells from start to end change to the currently +// selected color +allCells.forEach((e) => { + e.addEventListener("mousedown", (event) => { + filling = true; + e.style.backgroundColor = GetCurrentColor(); + }); + e.addEventListener("mouseover", (event) => { + if (filling) + e.style.backgroundColor = GetCurrentColor(); + }); +}); - +function GetCurrentColor() { + return document.getElementById("color-select").value; +} \ No newline at end of file From 0dcc9697501f109af03b81f8f2e486a7759be29a Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 20 Jun 2025 14:06:46 -0400 Subject: [PATCH 06/12] Added new button Added new button and changed text to distinguish between filling the unfilled cells of the grid and filling the entire grid --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 1a138b6..bff5db6 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,8 @@

Grid Maker

- + + From f2062f7cc597c19ca6c2632f9b3a8a7096fced16 Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 20 Jun 2025 14:09:24 -0400 Subject: [PATCH 07/12] Split fill events between entire and unfilled --- main.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 7cc0e57..80ee700 100644 --- a/main.js +++ b/main.js @@ -7,9 +7,14 @@ root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); - if (event.target.id === "fill-grid") { + if (event.target.id === "fill-unfilled") { // Fill all uncolored cells with the currently selected color - + allCells.forEach((e) => { + if (e.style.backgroundColor === "") + e.style.backgroundColor = GetCurrentColor(); + }); + } + else if (event.target.id === "fill-entire") { // Fill all cells with the currently selected color allCells.forEach((e) => { e.style.backgroundColor = GetCurrentColor(); }); } From 3cb08a2b81fd4dc60a25ab4b2fb72b9bb8800512 Mon Sep 17 00:00:00 2001 From: EmmanuelR21 Date: Fri, 20 Jun 2025 14:34:41 -0400 Subject: [PATCH 08/12] Added Joseph's work from his branch --- main.js | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/main.js b/main.js index 80ee700..7f66b0b 100644 --- a/main.js +++ b/main.js @@ -3,6 +3,7 @@ const root = document.getElementById("root"); const allCells = [...document.querySelectorAll("td")]; let filling = false; + root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); @@ -10,36 +11,37 @@ root.addEventListener("click", (event) => { if (event.target.id === "fill-unfilled") { // Fill all uncolored cells with the currently selected color allCells.forEach((e) => { - if (e.style.backgroundColor === "") - e.style.backgroundColor = GetCurrentColor(); + if (e.style.backgroundColor === "") + e.style.backgroundColor = GetCurrentColor(); }); - } - else if (event.target.id === "fill-entire") { + } else if (event.target.id === "fill-entire") { // Fill all cells with the currently selected color - allCells.forEach((e) => { e.style.backgroundColor = GetCurrentColor(); }); - } - else if (event.target.id === "clear-grid") { + allCells.forEach((e) => { + e.style.backgroundColor = GetCurrentColor(); + }); + } else if (event.target.id === "clear-grid") { // Clear all cells/restore all cells to their original/initial color - allCells.forEach((e) => { e.style.backgroundColor = ""; }); + allCells.forEach((e) => { + e.style.backgroundColor = ""; + }); } - + filling = false; }); // Click and hold (mouseover) from a single cell (start) to a different cell (end) // such that all affected/hovered-over cells from start to end change to the currently // selected color -allCells.forEach((e) => { - e.addEventListener("mousedown", (event) => { - filling = true; - e.style.backgroundColor = GetCurrentColor(); - }); - e.addEventListener("mouseover", (event) => { - if (filling) - e.style.backgroundColor = GetCurrentColor(); - }); +allCells.forEach((e) => { + e.addEventListener("mousedown", (event) => { + filling = true; + e.style.backgroundColor = GetCurrentColor(); + }); + e.addEventListener("mouseover", (event) => { + if (filling) e.style.backgroundColor = GetCurrentColor(); + }); }); function GetCurrentColor() { - return document.getElementById("color-select").value; -} \ No newline at end of file + return document.getElementById("color-select").value; +} From bd4eec282e9b4ec9ed02f5028d1f30e10dfee986 Mon Sep 17 00:00:00 2001 From: EmmanuelR21 Date: Fri, 20 Jun 2025 14:44:01 -0400 Subject: [PATCH 09/12] Add green and orange color options to dropdown --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index bff5db6..02d30f3 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,9 @@

Grid Maker

From a95fd687df5fe82b2cce244664e5a365f1792389 Mon Sep 17 00:00:00 2001 From: EmmanuelR21 Date: Fri, 20 Jun 2025 14:59:41 -0400 Subject: [PATCH 10/12] Improve code formatting and add click listener --- main.js | 44 ++++++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/main.js b/main.js index 80ee700..34100f4 100644 --- a/main.js +++ b/main.js @@ -10,36 +10,40 @@ root.addEventListener("click", (event) => { if (event.target.id === "fill-unfilled") { // Fill all uncolored cells with the currently selected color allCells.forEach((e) => { - if (e.style.backgroundColor === "") - e.style.backgroundColor = GetCurrentColor(); + if (e.style.backgroundColor === "") + e.style.backgroundColor = GetCurrentColor(); }); - } - else if (event.target.id === "fill-entire") { + } else if (event.target.id === "fill-entire") { // Fill all cells with the currently selected color - allCells.forEach((e) => { e.style.backgroundColor = GetCurrentColor(); }); - } - else if (event.target.id === "clear-grid") { + allCells.forEach((e) => { + e.style.backgroundColor = GetCurrentColor(); + }); + } else if (event.target.id === "clear-grid") { // Clear all cells/restore all cells to their original/initial color - allCells.forEach((e) => { e.style.backgroundColor = ""; }); + allCells.forEach((e) => { + e.style.backgroundColor = ""; + }); } - + filling = false; }); // Click and hold (mouseover) from a single cell (start) to a different cell (end) // such that all affected/hovered-over cells from start to end change to the currently // selected color -allCells.forEach((e) => { - e.addEventListener("mousedown", (event) => { - filling = true; - e.style.backgroundColor = GetCurrentColor(); - }); - e.addEventListener("mouseover", (event) => { - if (filling) - e.style.backgroundColor = GetCurrentColor(); - }); +allCells.forEach((e) => { + e.addEventListener("click", () => { + e.style.backgroundColor = GetCurrentColor(); + }); + e.addEventListener("mousedown", (event) => { + filling = true; + e.style.backgroundColor = GetCurrentColor(); + }); + e.addEventListener("mouseover", (event) => { + if (filling) e.style.backgroundColor = GetCurrentColor(); + }); }); function GetCurrentColor() { - return document.getElementById("color-select").value; -} \ No newline at end of file + return document.getElementById("color-select").value; +} From aaf2e7587f004e833b5d5eb6f4d2d2ce92012980 Mon Sep 17 00:00:00 2001 From: EmmanuelR21 Date: Fri, 20 Jun 2025 15:37:58 -0400 Subject: [PATCH 11/12] Add column removal button and functionality --- index.html | 1 + main.js | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/index.html b/index.html index 02d30f3..e14165a 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@

Grid Maker

+ diff --git a/main.js b/main.js index 4611bf1..5abd906 100644 --- a/main.js +++ b/main.js @@ -56,3 +56,38 @@ allCells.forEach((e) => { function GetCurrentColor() { return document.getElementById("color-select").value; } +// Add Column +const addColumnButton = document.getElementById("add-column"); +const rowsToAddColumn = document.getElementsByTagName("tr"); + +addColumnButton.addEventListener("click", () => { + for (let i = 0; i < rowsToAddColumn.length; i++) { + rowsToAddColumn[i].appendChild(document.createElement("td")); + } +}); + +// Add Row +const addRowButton = document.getElementById("add-row"); +const rowsToAddRow = document.getElementsByTagName("tr"); + +addRowButton.addEventListener("click", () => { + const table = rowsToAddRow[0].parentNode; + const newRow = document.createElement("tr"); + const colCount = rowsToAddRow[0].children.length; + + for (let i = 0; i < colCount; i++) { + newRow.appendChild(document.createElement("td")); + } + + table.appendChild(newRow); +}); + +//Remove Row +const removeRowButton = document.getElementById("remove-row"); +const rowsToRemove = document.getElementsByTagName("tr"); + +removeRowButton.addEventListener("click", () => { + if (rowsToRemove.length > 0) { + rowsToRemove[0].remove(); + } +});