From aae4c91761b6a5f238607233a58ae3fc8b820212 Mon Sep 17 00:00:00 2001 From: hailia sommerville Date: Fri, 20 Jun 2025 14:19:16 -0400 Subject: [PATCH 01/11] rows added - resolves 1 --- main.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/main.js b/main.js index 79a0fd1..8e1af91 100644 --- a/main.js +++ b/main.js @@ -5,3 +5,19 @@ root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); }); + +let table = document.querySelector("TABLE") +const addRowBtn = document.getElementById("add-row") +let rows = document.getElementsByTagName("TR") +let tdCount = rows[0].querySelectorAll("TD").length + +addRowBtn.addEventListener("click", function addRow(){ + let newRow = document.createElement("TR") + + for (let i = 0; i < tdCount; i++) + newRow.appendChild(document.createElement("TD")) + + table.appendChild(newRow) + +}) + From 24c7e8da51f3713fb7156b0bced6c37468908766 Mon Sep 17 00:00:00 2001 From: jeramyleon Date: Fri, 20 Jun 2025 14:43:33 -0400 Subject: [PATCH 02/11] rows can now be removed --- index.html | 3 ++- main.js | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 1a138b6..12f11e2 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

Grid Maker

- + @@ -39,6 +39,7 @@

Grid Maker

+ diff --git a/main.js b/main.js index 79a0fd1..da320f5 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,15 @@ // Please feel free to change the JS as you see fit! This is just a starting point. +function removeRow() { + const tableBody = document.getElementById('tableBody'); + + try { + tableBody.deleteRow(0); + } catch (error) { + console.error("No more rows to delete", error.message); + } +} + +const removeRowButton = document.getElementById("remove-row"); +removeRowButton.addEventListener("click", removeRow); + -const root = document.getElementById("root"); -root.addEventListener("click", (event) => { - console.log(event.target.tagName); - console.log(event.target); -}); From 2880693277e55eed03430eb420065e448e4b6308 Mon Sep 17 00:00:00 2001 From: hailia sommerville Date: Fri, 20 Jun 2025 14:55:54 -0400 Subject: [PATCH 03/11] column btn added - resolves 2 --- main.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/main.js b/main.js index 8e1af91..2a7ef70 100644 --- a/main.js +++ b/main.js @@ -8,6 +8,7 @@ root.addEventListener("click", (event) => { let table = document.querySelector("TABLE") const addRowBtn = document.getElementById("add-row") +const addColBtn = document.getElementById("add-column") let rows = document.getElementsByTagName("TR") let tdCount = rows[0].querySelectorAll("TD").length @@ -21,3 +22,14 @@ addRowBtn.addEventListener("click", function addRow(){ }) + +addColBtn.addEventListener("click", function addCol(){ + + Array.from(rows).forEach(element => { + let newCol = document.createElement("TD") + element.appendChild(newCol) + }) + + tdCount += 1 + +}) From 1a692e5f3eab6bb978334a5cdf939c278e917cb7 Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:03:23 -0400 Subject: [PATCH 04/11] Added script.js with the fillUnclrdCells function --- script.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 script.js diff --git a/script.js b/script.js new file mode 100644 index 0000000..fbcbf9b --- /dev/null +++ b/script.js @@ -0,0 +1,11 @@ +function fillUnclrdCells(){ + console.log("🟡 fillUnclrdCells triggered"); + const cells = document.querySelectorAll("td"); + const selectedClr = document.getElementById("colorSelector").value; + + cells.forEach(cell=>{ + if(!cell.style.backgroundColor||cell.style.backgroundColor === "white" ){ + cell.style.backgroundColor = selectedClr; + } + }); +} From c0aac7c5130a08ff64f063480361f3db129a42ee Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:09:59 -0400 Subject: [PATCH 05/11] Update script.js added its event listener code --- script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/script.js b/script.js index fbcbf9b..eea3521 100644 --- a/script.js +++ b/script.js @@ -9,3 +9,4 @@ function fillUnclrdCells(){ } }); } +document.getElementById("fill-grid").addEventListener("click", fillUnclrdCells); From 8ce81f78f95b18e826443a078ff6fb048b57ddf3 Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:16:51 -0400 Subject: [PATCH 06/11] Deleted script.js so it doesnt conflict with main.js --- script.js | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 script.js diff --git a/script.js b/script.js deleted file mode 100644 index eea3521..0000000 --- a/script.js +++ /dev/null @@ -1,12 +0,0 @@ -function fillUnclrdCells(){ - console.log("🟡 fillUnclrdCells triggered"); - const cells = document.querySelectorAll("td"); - const selectedClr = document.getElementById("colorSelector").value; - - cells.forEach(cell=>{ - if(!cell.style.backgroundColor||cell.style.backgroundColor === "white" ){ - cell.style.backgroundColor = selectedClr; - } - }); -} -document.getElementById("fill-grid").addEventListener("click", fillUnclrdCells); From 7cca2815c713b19195d90ee74d78b9de1656c471 Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:17:52 -0400 Subject: [PATCH 07/11] Updated main.js to have the fillunclrdcells function --- main.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/main.js b/main.js index 8e1af91..ae9772c 100644 --- a/main.js +++ b/main.js @@ -20,4 +20,16 @@ addRowBtn.addEventListener("click", function addRow(){ table.appendChild(newRow) }) +function fillUnclrdCells(){ + console.log("🟡 fillUnclrdCells triggered"); + const cells = document.querySelectorAll("td"); + const selectedClr = document.getElementById("colorSelector").value; + + cells.forEach(cell=>{ + if(!cell.style.backgroundColor||cell.style.backgroundColor === "white" ){ + cell.style.backgroundColor = selectedClr; + } + }); +} +document.getElementById("fill-grid").addEventListener("click", fillUnclrdCells); From 6b548a6aa21074d611d14290110d35d0bf3faa77 Mon Sep 17 00:00:00 2001 From: hailia sommerville Date: Fri, 20 Jun 2025 15:19:49 -0400 Subject: [PATCH 08/11] clear grid - resolves 9 --- main.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 2a7ef70..ea3e709 100644 --- a/main.js +++ b/main.js @@ -9,10 +9,11 @@ root.addEventListener("click", (event) => { let table = document.querySelector("TABLE") const addRowBtn = document.getElementById("add-row") const addColBtn = document.getElementById("add-column") +const clrBtn = document.getElementById("clear-grid") let rows = document.getElementsByTagName("TR") let tdCount = rows[0].querySelectorAll("TD").length -addRowBtn.addEventListener("click", function addRow(){ +addRowBtn.addEventListener("click", () => { let newRow = document.createElement("TR") for (let i = 0; i < tdCount; i++) @@ -22,8 +23,7 @@ addRowBtn.addEventListener("click", function addRow(){ }) - -addColBtn.addEventListener("click", function addCol(){ +addColBtn.addEventListener("click", () => { Array.from(rows).forEach(element => { let newCol = document.createElement("TD") @@ -33,3 +33,8 @@ addColBtn.addEventListener("click", function addCol(){ tdCount += 1 }) + +clrBtn.addEventListener("click", () => { + cells = document.getElementsByTagName("TD") + Array.from(cells).forEach((cell) => cell.style.backgroundColor = "white") +}) \ No newline at end of file From 461295b066a1dce66d53b2d376c51538ee2e73e0 Mon Sep 17 00:00:00 2001 From: jeramyleon Date: Fri, 20 Jun 2025 15:22:48 -0400 Subject: [PATCH 09/11] added feature to remove columns --- index.html | 3 ++- main.js | 22 ++++++++++++++++------ 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 1a138b6..877cef6 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

Grid Maker

- + @@ -39,6 +39,7 @@

Grid Maker

+ diff --git a/main.js b/main.js index 79a0fd1..75dcfc3 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,17 @@ -// Please feel free to change the JS as you see fit! This is just a starting point. +function removeColumn() { + const tableBody = document.getElementById('tableBody'); + + try { + const rows = tableBody.rows; -const root = document.getElementById("root"); -root.addEventListener("click", (event) => { - console.log(event.target.tagName); - console.log(event.target); -}); + for (let i = 0; i < rows.length; i++) { + const row = rows[i]; + row.deleteCell(0); + } + } catch (error) { + console.error("No more columns to delete", error.message); + } +} + +const removeColumnButton = document.getElementById("remove-column"); +removeColumnButton.addEventListener("click", removeColumn); From b8635f7d0c6f5e7ccd7e6802596520b1b54f2be8 Mon Sep 17 00:00:00 2001 From: Benjamin Ayala Date: Fri, 20 Jun 2025 15:29:42 -0400 Subject: [PATCH 10/11] Complete task 6: color cell on click --- index.html | 2 ++ main.js | 24 ++++++++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/index.html b/index.html index 1a138b6..99bcc16 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,8 @@

Grid Maker

+ +