From 797a3c59c12d386a6b15b39fe91ade79bc66eb02 Mon Sep 17 00:00:00 2001
From: Bar Yaakov <baryaakov5050@gmail.com>
Date: Fri, 20 Jun 2025 13:13:16 -0400
Subject: [PATCH 01/10] initial commit

---
 main.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/main.js b/main.js
index 79a0fd1..3e788d0 100644
--- a/main.js
+++ b/main.js
@@ -5,3 +5,17 @@ root.addEventListener("click", (event) => {
   console.log(event.target.tagName);
   console.log(event.target);
 });
+
+const addRow = document.getElementById("add-row");
+{
+  addRow.addEventListener("click", () =>
+  {
+    
+
+
+
+  });
+
+
+
+}
\ No newline at end of file

From 4bc846d5bf726b4a511f9650908045826f99eee3 Mon Sep 17 00:00:00 2001
From: Dagostocsc <Deborahagosto19@gmail.com>
Date: Fri, 20 Jun 2025 11:01:58 -0700
Subject: [PATCH 02/10] Debbie is awesome

---
 main.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/main.js b/main.js
index 79a0fd1..e5e3705 100644
--- a/main.js
+++ b/main.js
@@ -5,3 +5,14 @@ root.addEventListener("click", (event) => {
   console.log(event.target.tagName);
   console.log(event.target);
 });
+
+const button = document.getElementById("add-column");
+
+button.addEventListener("click", () => {
+  const rows = document.querySelectorAll("table tr");
+  rows.forEach(row => {
+    const newCell = document.createElement("td");
+    row.appendChild(newCell);
+  });
+});
+

From 29b3006d098aaf300c0b93932a8ae5da7b7c3c41 Mon Sep 17 00:00:00 2001
From: Dagostocsc <Deborahagosto19@gmail.com>
Date: Fri, 20 Jun 2025 12:39:06 -0700
Subject: [PATCH 03/10] Debbie is still awesome

---
 main.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/main.js b/main.js
index e5e3705..dd1b8fe 100644
--- a/main.js
+++ b/main.js
@@ -16,3 +16,29 @@ button.addEventListener("click", () => {
   });
 });
 
+const cells = document.querySelectorAll("td");
+
+let isMouseDown = false;
+const colorSelect = document.getElementById("color-select");
+
+cells.forEach(cell => {
+  cell.addEventListener("mousedown", () => {
+    isMouseDown = true;
+    cell.style.backgroundColor = colorSelect.value;
+  });
+
+  cell.addEventListener("mouseover", () => {
+    if (isMouseDown) {
+      cell.style.backgroundColor = colorSelect.value;
+    }
+  });
+
+  cell.addEventListener("mouseup", () => {
+    isMouseDown = false;
+  });
+});
+
+document.addEventListener("mouseup", () => {
+  isMouseDown = false;
+});
+

From d1829d2ad7b292f5822eb205b25a3c089ef69388 Mon Sep 17 00:00:00 2001
From: Elian Echavarria <elianstanly431@gmail.com>
Date: Fri, 20 Jun 2025 15:44:39 -0400
Subject: [PATCH 04/10] elian-colors-done

---
 main.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/main.js b/main.js
index 79a0fd1..bc00c00 100644
--- a/main.js
+++ b/main.js
@@ -1,7 +1,29 @@
 // Please feel free to change the JS as you see fit! This is just a starting point.
 
+const colorDropdown = document.getElementById("color-select");
+const fillButton = document.getElementById("fill-grid");
+
+let selectedColor = colorDropdown.value;
+
+colorDropdown.addEventListener("change", () => {
+  selectedColor = colorDropdown.value;
+})
+
+
+
 const root = document.getElementById("root");
 root.addEventListener("click", (event) => {
-  console.log(event.target.tagName);
-  console.log(event.target);
+  // console.log(event.target.tagName);
+  // console.log(event.target);
+  if (event.target.tagName === "TD") {
+    event.target.style.backgroundColor = selectedColor;
+  }
 });
+
+
+fillButton.addEventListener('click', () => {
+  const cells = document.getElementsByTagName("td");
+  for (let i = 0; i < cells.length; i++) {
+    cells[i].style.backgroundColor = selectedColor;
+  }
+})

From 5387f981de24470c46ae95a92c87325eb9514f02 Mon Sep 17 00:00:00 2001
From: Bar Yaakov <baryaakov5050@gmail.com>
Date: Fri, 20 Jun 2025 19:30:31 -0400
Subject: [PATCH 05/10] finished all 10

---
 index.html |   3 ++
 main.js    | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 119 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1a138b6..35b743f 100644
--- a/index.html
+++ b/index.html
@@ -33,12 +33,15 @@ <h1>Grid Maker</h1>
       <div>
         <button id="add-row">Add Row</button>
         <button id="add-column">Add Column</button>
+        <button id="remove-row">Remove-Row</button>
+        <button id="remove-column">Remove-Column</button>
         <select id="color-select">
           <option value="red">Red</option>
           <option value="blue">Blue</option>
         </select>
         <button id="fill-grid">Fill Grid</button>
         <button id="clear-grid">Clear Grid</button>
+        <button id="fill-uncolored-cells">Fill Uncolored Cells</button>
       </div>
     </div>
   </body>
diff --git a/main.js b/main.js
index 3e788d0..cb05efa 100644
--- a/main.js
+++ b/main.js
@@ -7,15 +7,127 @@ root.addEventListener("click", (event) => {
 });
 
 const addRow = document.getElementById("add-row");
+
+addRow.addEventListener("click", () =>
+{
+  const nmberOfColumns = document.getElementsByTagName("TR")[0].children.length;
+  
+  const newRow = document.createElement("TR");
+  document.getElementsByTagName("tbody")[0].appendChild(newRow);
+
+  for (let i = 0; i < nmberOfColumns; i++)
+  {
+    const newCell = document.createElement("TD");
+    newRow.appendChild(newCell);
+  }
+});
+
+const addColunm = document.getElementById("add-column");
+
+addColunm.addEventListener("click", () =>
+{
+  const nmberOfRows = document.getElementsByTagName("TR").length;
+
+  for (let i = 0; i < nmberOfRows; i++)
+  {
+    const newCell2 = document.createElement("TD")
+    document.getElementsByTagName("TR")[i].appendChild(newCell2);
+  }
+});
+
+const removeRow = document.getElementById("remove-row");
+
+removeRow.addEventListener("click", () =>
+{
+  const nmberOfRows = document.getElementsByTagName("TR").length;
+  const lastRow = document.getElementsByTagName("TR")[nmberOfRows - 1];
+  lastRow.remove();
+});
+
+const removeColunm = document.getElementById("remove-column");
+
+removeColunm.addEventListener("click", () =>
+{
+  const nmberOfRows = document.getElementsByTagName("TR").length;
+
+    for (let i = 0; i < nmberOfRows; i++)
+    {
+      const removeCell = document.getElementsByTagName("TR")[i];
+      removeCell.lastElementChild.remove();
+    }
+});
+
+const currentColor = document.getElementById("color-select");
+
+const colorCell = document.getElementsByTagName("table")[0];
+
+colorCell.addEventListener("click", (event) =>
 {
-  addRow.addEventListener("click", () =>
+  if (event.target.tagName === "TD")
   {
-    
+  event.target.style.backgroundColor = currentColor.value;
+  }
+});
+
+const fillUncoloredCells = document.getElementById("fill-uncolored-cells");
+
+fillUncoloredCells.addEventListener("click", () =>
+{
+    const cells = document.getElementsByTagName("TD").length;
+
+    for (let i = 0; i < cells; i++)
+    {
+      const currentCell = document.getElementsByTagName("TD")[i];
+      if (!currentCell.style.backgroundColor)
+      {
+        currentCell.style.backgroundColor = currentColor.value
+      }
+    }
+});
 
 
+const fillAllCells = document.getElementById("fill-grid");
 
-  });
+fillAllCells.addEventListener("click", () =>
+{
+  const cells = document.getElementsByTagName("TD").length;
+
+  for (let i = 0; i < cells; i++)
+  {
+    const currentCell = document.getElementsByTagName("TD")[i];
+    currentCell.style.backgroundColor = currentColor.value
+  }
+});
 
+const clearAllCells = document.getElementById("clear-grid");
 
+clearAllCells.addEventListener("click", () =>
+{
+  const cells = document.getElementsByTagName("TD").length;
 
-}
\ No newline at end of file
+  for (let i = 0; i < cells; i++)
+  {
+    const currentCell = document.getElementsByTagName("TD")[i];
+    currentCell.style.backgroundColor = "";
+  }
+});
+
+let isMouseButtonDown = false;
+
+document.addEventListener("mousedown", () =>
+{
+  isMouseButtonDown = true;
+});
+
+document.addEventListener("mouseup", () =>
+{
+  isMouseButtonDown = false;
+});
+
+document.addEventListener("mouseover", (event) =>
+{
+  if (isMouseButtonDown && event.target.tagName === "TD")
+  {
+    event.target.style.backgroundColor = currentColor.value;
+  }
+});
\ No newline at end of file

From d90ff2c084bac22796bdc3ad0457ae7188a0dcc8 Mon Sep 17 00:00:00 2001
From: Dagostocsc <Deborahagosto19@gmail.com>
Date: Fri, 20 Jun 2025 17:06:51 -0700
Subject: [PATCH 06/10] Deborah

---
 main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/main.js b/main.js
index dd1b8fe..75bd491 100644
--- a/main.js
+++ b/main.js
@@ -42,3 +42,5 @@ document.addEventListener("mouseup", () => {
   isMouseDown = false;
 });
 
+
+

From 9b9a128aa1cfa65551b6155039188ac1a0247197 Mon Sep 17 00:00:00 2001
From: Muhammad <khawajat016@gmail.com>
Date: Fri, 20 Jun 2025 20:26:31 -0400
Subject: [PATCH 07/10] final-commit

---
 index.html |  2 ++
 main.js    | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1a138b6..9ec2189 100644
--- a/index.html
+++ b/index.html
@@ -31,8 +31,10 @@ <h1>Grid Maker</h1>
         </tbody>
       </table>
       <div>
+        <button id="remove-row">Remove Row</button>
         <button id="add-row">Add Row</button>
         <button id="add-column">Add Column</button>
+        <button id="remove-column">remove Column</button>
         <select id="color-select">
           <option value="red">Red</option>
           <option value="blue">Blue</option>
diff --git a/main.js b/main.js
index 79a0fd1..64dda91 100644
--- a/main.js
+++ b/main.js
@@ -2,6 +2,35 @@
 
 const root = document.getElementById("root");
 root.addEventListener("click", (event) => {
-  console.log(event.target.tagName);
-  console.log(event.target);
+  // console.log(event.target.tagName);
+  // console.log(event.target);
 });
+
+const removeBtm = document.getElementById("remove-row");
+removeBtm.addEventListener("click", removeButton);
+
+//checks if there is any rows and if there are rows greater then 0 then remove one row
+
+function removeButton() {
+  const amountOfRows = document.getElementsByTagName("TR").length;
+  lastrow = document.getElementsByTagName("TR")[amountOfRows - 1];
+  lastrow.remove();
+
+  //checks if there is any rows and if there are rows greater then 0 then remove one row
+}
+
+const removeCol = document.getElementById("remove-column");
+removeCol.addEventListener("click", removecolums);
+
+function removecolums() {
+  const rows = document.getElementsByTagName("tr"); //acess the file rows frist
+  for (let i = 0; i < rows.length; i++) {
+    // use go for to go through the rows
+    const cells = rows[i].getElementsByTagName("td"); //for the crrent row i find all the cells inside that row
+    if (cells.length > 0) {
+      //if there any cells at all
+      rows[i].removeChild(cells[cells.length - 1]); //that row/parent will go remove a cell because its tr/row and parent has a
+      // method to remove child/cell and we need to use to remove the child/row .removechild
+    }
+  }
+}

From 6b1c013523a46487ebfe38425d6ee28150cafe6c Mon Sep 17 00:00:00 2001
From: Bar Yaakov <baryaakov5050@gmail.com>
Date: Fri, 20 Jun 2025 21:24:02 -0400
Subject: [PATCH 08/10] now the code looks pretty and readable, Deborah fix the
 final function it didn't work

---
 main.js | 103 ++++++++++++++++++++++++++++++++------------------------
 1 file changed, 59 insertions(+), 44 deletions(-)

diff --git a/main.js b/main.js
index ce9839c..b82f4a4 100644
--- a/main.js
+++ b/main.js
@@ -1,25 +1,41 @@
 // Please feel free to change the JS as you see fit! This is just a starting point.
 
-const colorDropdown = document.getElementById("color-select");
-const fillButton = document.getElementById("fill-grid");
 
-let selectedColor = colorDropdown.value;
 
-colorDropdown.addEventListener("change", () => {
-  selectedColor = colorDropdown.value;
-})
+//add row
+const addRow = document.getElementById("add-row");
+
+addRow.addEventListener("click", () =>
+{
+  const nmberOfColumns = document.getElementsByTagName("TR")[0].children.length;
+  
+  const newRow = document.createElement("TR");
+  document.getElementsByTagName("tbody")[0].appendChild(newRow);
+
+  for (let i = 0; i < nmberOfColumns; i++)
+  {
+    const newCell = document.createElement("TD");
+    newRow.appendChild(newCell);
+  }
+});
 
+//add column
+const addColumn = document.getElementById("add-column");
 
+addColumn.addEventListener("click", () =>
+{
+  const nmberOfRows = document.getElementsByTagName("TR").length;
 
-const root = document.getElementById("root");
-root.addEventListener("click", (event) => { 
-  if (event.target.tagName === "TD") {
-    event.target.style.backgroundColor = selectedColor;
+  for (let i = 0; i < nmberOfRows; i++)
+  {
+    const newCell2 = document.createElement("TD")
+    document.getElementsByTagName("TR")[i].appendChild(newCell2);
   }
 });
 
-const removeBtm = document.getElementById("remove-row");
-removeBtm.addEventListener("click", removeButton);
+//remove row
+const removeRow = document.getElementById("remove-row");
+removeRow.addEventListener("click", removeButton);
 
 //checks if there is any rows and if there are rows greater then 0 then remove one row
 
@@ -31,6 +47,7 @@ function removeButton() {
   //checks if there is any rows and if there are rows greater then 0 then remove one row
 }
 
+//remove column
 const removeCol = document.getElementById("remove-column");
 removeCol.addEventListener("click", removecolums);
 
@@ -47,30 +64,26 @@ function removecolums() {
   }
 }
 
-fillButton.addEventListener('click', () => {
-  const cells = document.getElementsByTagName("td");
-  for (let i = 0; i < cells.length; i++) {
-    cells[i].style.backgroundColor = selectedColor;
-  }
-})
-
-
-const addRow = document.getElementById("add-row");
+//select a color from a drop down menu of colors(again so mine works too lmao)
+const currentColor = document.getElementById("color-select");
 
-addRow.addEventListener("click", () =>
-{
-  const nmberOfColumns = document.getElementsByTagName("TR")[0].children.length;
-  
-  const newRow = document.createElement("TR");
-  document.getElementsByTagName("tbody")[0].appendChild(newRow);
+//select a color from a drop down menu of colors
+const colorDropdown = document.getElementById("color-select");
+const selectColor = document.getElementById("root");
+let selectedColor = colorDropdown.value;
 
-  for (let i = 0; i < nmberOfColumns; i++)
-  {
-    const newCell = document.createElement("TD");
-    newRow.appendChild(newCell);
+//click on a single cell to color it
+selectColor.addEventListener("click", (event) => { 
+  if (event.target.tagName === "TD") {
+    event.target.style.backgroundColor = selectedColor;
   }
 });
 
+colorDropdown.addEventListener("change", () => {
+  selectedColor = colorDropdown.value;
+});
+
+//fill all uncolored cells
 const fillUncoloredCells = document.getElementById("fill-uncolored-cells");
 
 fillUncoloredCells.addEventListener("click", () =>
@@ -87,6 +100,17 @@ fillUncoloredCells.addEventListener("click", () =>
     }
 });
 
+//fill all cells
+const fillButton = document.getElementById("fill-grid");
+
+fillButton.addEventListener('click', () => {
+  const cells = document.getElementsByTagName("td");
+  for (let i = 0; i < cells.length; i++) {
+    cells[i].style.backgroundColor = selectedColor;
+  }
+})
+
+//clear all cells
 const clearAllCells = document.getElementById("clear-grid");
 
 clearAllCells.addEventListener("click", () =>
@@ -100,17 +124,9 @@ clearAllCells.addEventListener("click", () =>
   }
 });
 
-const button = document.getElementById("add-column");
-
-button.addEventListener("click", () => {
-  const rows = document.querySelectorAll("table tr");
-  rows.forEach(row => {
-    const newCell = document.createElement("td");
-    row.appendChild(newCell);
-  });
-});
-
-const cells = document.querySelectorAll("td");
+/*
+//drawing
+const cellMouseOver = document.querySelectorAll("td");
 
 let isMouseDown = false;
 const colorSelect = document.getElementById("color-select");
@@ -136,5 +152,4 @@ document.addEventListener("mouseup", () => {
   isMouseDown = false;
 });
 
-
-
+*/
\ No newline at end of file

From 9daa9f79364dfbb80577b00d8eb17b38e0cce3b6 Mon Sep 17 00:00:00 2001
From: Dagostocsc <Deborahagosto19@gmail.com>
Date: Sun, 22 Jun 2025 17:42:19 -0700
Subject: [PATCH 09/10] Debbie's in the house

---
 main.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/main.js b/main.js
index 75bd491..3463d13 100644
--- a/main.js
+++ b/main.js
@@ -16,6 +16,15 @@ button.addEventListener("click", () => {
   });
 });
 
+const clearGridButton = document.getElementById("clear-grid");
+
+clearGridButton.addEventListener("click", () => {
+  const allCells = document.querySelectorAll("td");
+  allCells.forEach(cell => {
+    cell.style.backgroundColor = ""; 
+  });
+});
+
 const cells = document.querySelectorAll("td");
 
 let isMouseDown = false;

From 3e876fd7da6c2e1bcf6e2393c1c9456ea669798a Mon Sep 17 00:00:00 2001
From: Dagostocsc <Deborahagosto19@gmail.com>
Date: Sun, 22 Jun 2025 18:03:31 -0700
Subject: [PATCH 10/10] Fixed it

---
 main.js | 31 +++++++++++--------------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/main.js b/main.js
index b82f4a4..bf72cd6 100644
--- a/main.js
+++ b/main.js
@@ -124,32 +124,23 @@ clearAllCells.addEventListener("click", () =>
   }
 });
 
-/*
-//drawing
-const cellMouseOver = document.querySelectorAll("td");
-
 let isMouseDown = false;
 const colorSelect = document.getElementById("color-select");
+const table = document.querySelector("table");
 
-cells.forEach(cell => {
-  cell.addEventListener("mousedown", () => {
+table.addEventListener("mousedown", (e) => {
+  if (e.target.tagName === "TD") {
     isMouseDown = true;
-    cell.style.backgroundColor = colorSelect.value;
-  });
-
-  cell.addEventListener("mouseover", () => {
-    if (isMouseDown) {
-      cell.style.backgroundColor = colorSelect.value;
-    }
-  });
+    e.target.style.backgroundColor = colorSelect.value;
+  }
+});
 
-  cell.addEventListener("mouseup", () => {
-    isMouseDown = false;
-  });
+table.addEventListener("mouseover", (e) => {
+  if (isMouseDown && e.target.tagName === "TD") {
+    e.target.style.backgroundColor = colorSelect.value;
+  }
 });
 
 document.addEventListener("mouseup", () => {
   isMouseDown = false;
-});
-
-*/
\ No newline at end of file
+});
\ No newline at end of file