From aae4c91761b6a5f238607233a58ae3fc8b820212 Mon Sep 17 00:00:00 2001 From: hailia sommerville Date: Fri, 20 Jun 2025 14:19:16 -0400 Subject: [PATCH 01/18] 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/18] 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/18] 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/18] 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 4a7caf3d24528adf6e15b51e7925b853577779ba Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:06:15 -0400 Subject: [PATCH 05/18] Added fillEveryCell function --- script.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 script.js diff --git a/script.js b/script.js new file mode 100644 index 0000000..ce9b9a8 --- /dev/null +++ b/script.js @@ -0,0 +1,9 @@ +function fillEveryCell(){ + console.log("🟡 fillEveryCell triggered"); + const cells = document.querySelectorAll("td"); + const selectedClr = document.getElementById("colorSelector").value; + + cells.forEach(cell =>{ + cell.style.backgroundColor =selectedClr; + }); +} From 5f9ab393963bbc7f8ff4ec9cde71c593277ccb67 Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:08:32 -0400 Subject: [PATCH 06/18] Updated script.js gave it the event listener code --- script.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/script.js b/script.js index ce9b9a8..afa4097 100644 --- a/script.js +++ b/script.js @@ -7,3 +7,5 @@ function fillEveryCell(){ cell.style.backgroundColor =selectedClr; }); } +document.getElementById("fill-uncolored").addEventListener("click", fillEveryCell); + 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 07/18] 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 08/18] 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 09/18] 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 dad3a6436051b50aefa972d85e2792c595828ae5 Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:18:56 -0400 Subject: [PATCH 10/18] deleted script.js so it doesnt conflict with the main.js --- script.js | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 script.js diff --git a/script.js b/script.js deleted file mode 100644 index afa4097..0000000 --- a/script.js +++ /dev/null @@ -1,11 +0,0 @@ -function fillEveryCell(){ - console.log("🟡 fillEveryCell triggered"); - const cells = document.querySelectorAll("td"); - const selectedClr = document.getElementById("colorSelector").value; - - cells.forEach(cell =>{ - cell.style.backgroundColor =selectedClr; - }); -} -document.getElementById("fill-uncolored").addEventListener("click", fillEveryCell); - From 6b548a6aa21074d611d14290110d35d0bf3faa77 Mon Sep 17 00:00:00 2001 From: hailia sommerville Date: Fri, 20 Jun 2025 15:19:49 -0400 Subject: [PATCH 11/18] 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 1dd8cdb675b3d3eaf82a58f56588ffc0b4be3668 Mon Sep 17 00:00:00 2001 From: BTBurton1 <128549369+BTBurton1@users.noreply.github.com> Date: Fri, 20 Jun 2025 15:20:57 -0400 Subject: [PATCH 12/18] Updated main.js to have the fillEveryCell function --- main.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/main.js b/main.js index 8e1af91..dc54a45 100644 --- a/main.js +++ b/main.js @@ -20,4 +20,14 @@ addRowBtn.addEventListener("click", function addRow(){ table.appendChild(newRow) }) +function fillEveryCell(){ + console.log("🟡 fillEveryCell triggered"); + const cells = document.querySelectorAll("td"); + const selectedClr = document.getElementById("colorSelector").value; + + cells.forEach(cell =>{ + cell.style.backgroundColor =selectedClr; + }); +} +document.getElementById("fill-uncolored").addEventListener("click", fillEveryCell); From 461295b066a1dce66d53b2d376c51538ee2e73e0 Mon Sep 17 00:00:00 2001 From: jeramyleon Date: Fri, 20 Jun 2025 15:22:48 -0400 Subject: [PATCH 13/18] 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 633a362a9088031be15860d6000f25e7f6540df7 Mon Sep 17 00:00:00 2001 From: Benjamin Ayala Date: Fri, 20 Jun 2025 15:29:42 -0400 Subject: [PATCH 14/18] 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

+ + diff --git a/main.js b/main.js index 79a0fd1..5ff794c 100644 --- a/main.js +++ b/main.js @@ -5,3 +5,27 @@ root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); }); + +//Task 5 +const colorSelection = document.getElementById('color-select');//Selects element where user will choose colors +const colorChoice = colorSelection.value;//Where user selects which color + +colorSelection.addEventListener('change' , function(){ + colorChoice = colorSelection.value; + console.log("User selected:", selectedColor); + +}) + +//Task6 +const colorSelect = document.getElementById("color-select"); // Dropdown +const cells = document.querySelectorAll("td"); // All table cells + +cells.forEach((cell) => { + cell.addEventListener("click", () => { + const selectedColor = colorSelect.value; // Get selected color + cell.style.backgroundColor = selectedColor; // Apply color + }); +}); + + + From 23e92c782185ca6997b592ad24e5b92539aef93d Mon Sep 17 00:00:00 2001 From: Benjamin Ayala Date: Fri, 20 Jun 2025 15:39:00 -0400 Subject: [PATCH 16/18] select a color from a dropdown menu of colors --- main.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/main.js b/main.js index 5ff794c..3b891fb 100644 --- a/main.js +++ b/main.js @@ -16,16 +16,5 @@ colorSelection.addEventListener('change' , function(){ }) -//Task6 -const colorSelect = document.getElementById("color-select"); // Dropdown -const cells = document.querySelectorAll("td"); // All table cells - -cells.forEach((cell) => { - cell.addEventListener("click", () => { - const selectedColor = colorSelect.value; // Get selected color - cell.style.backgroundColor = selectedColor; // Apply color - }); -}); - From 942ad13e9391d7b74d57a7d2d4615ca5c8f430c7 Mon Sep 17 00:00:00 2001 From: Benjamin Ayala Date: Fri, 20 Jun 2025 15:41:35 -0400 Subject: [PATCH 17/18] click on a single cell, changing its color to the currently selected color --- main.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/main.js b/main.js index 5ff794c..dfc0254 100644 --- a/main.js +++ b/main.js @@ -6,15 +6,6 @@ root.addEventListener("click", (event) => { console.log(event.target); }); -//Task 5 -const colorSelection = document.getElementById('color-select');//Selects element where user will choose colors -const colorChoice = colorSelection.value;//Where user selects which color - -colorSelection.addEventListener('change' , function(){ - colorChoice = colorSelection.value; - console.log("User selected:", selectedColor); - -}) //Task6 const colorSelect = document.getElementById("color-select"); // Dropdown From d8e95b6b8b9ed97809aefb760147278d01451f98 Mon Sep 17 00:00:00 2001 From: BenjaminA-cs-hub Date: Fri, 20 Jun 2025 16:00:18 -0400 Subject: [PATCH 18/18] Update main.js --- main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index d8d41f4..4854b74 100644 --- a/main.js +++ b/main.js @@ -20,7 +20,7 @@ root.addEventListener("click", (event) => { console.log(event.target); }); -// ✅ Task 5 - Color Dropdown Logic +// Task 5 - Color Dropdown Logic const colorSelection = document.getElementById('color-select'); let colorChoice = colorSelection.value; @@ -29,7 +29,7 @@ colorSelection.addEventListener('change', function () { console.log("User selected:", colorChoice); }); -// ✅ Task 6 - Click Cell to Color It +// Task 6 - Click Cell to Color It const cells = document.querySelectorAll("td"); cells.forEach((cell) => {