From a6f8210276ce9d2ab1e6222a6ee19dc3498bb39a Mon Sep 17 00:00:00 2001 From: pedrosortega Date: Fri, 20 Jun 2025 13:31:34 -0400 Subject: [PATCH 1/9] added event to add row --- main.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/main.js b/main.js index 79a0fd1..5d6d344 100644 --- a/main.js +++ b/main.js @@ -5,3 +5,15 @@ root.addEventListener("click", (event) => { console.log(event.target.tagName); console.log(event.target); }); + +//add rows to the grid +const addRows = document.getElementById("add-row"); +const getTable = root.querySelector("table"); + +addRows.addEventListener("click", () => { + const newRow = getTable.insertRow(); + console.log("new row added"); + for (let i = 0; i < getTable.rows[0].cells.length; i++) { + const newCells = newRow.insertCell(); + } +}); From cb2d77d65ecac321586f195b2d02438584fb1dad Mon Sep 17 00:00:00 2001 From: pedrosortega Date: Fri, 20 Jun 2025 14:01:17 -0400 Subject: [PATCH 2/9] added event to add columns --- main.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/main.js b/main.js index 5d6d344..fab306d 100644 --- a/main.js +++ b/main.js @@ -17,3 +17,15 @@ addRows.addEventListener("click", () => { const newCells = newRow.insertCell(); } }); + +// add columns to grid + +const addColumns = document.getElementById("add-column"); + +addColumns.addEventListener("click", () => { + for (let i = 0; i < getTable.rows.length; i++) { + const row = getTable.rows[i]; + const newCells = document.createElement("td"); + row.appendChild(newCells); + } +}); From 0de26ebfd96d8acd77b1112616125d88b974168d Mon Sep 17 00:00:00 2001 From: pedrosortega Date: Fri, 20 Jun 2025 14:44:57 -0400 Subject: [PATCH 3/9] delete rows from grid --- index.html | 1 + main.js | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/index.html b/index.html index 1a138b6..64e961d 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@

Grid Maker

+ diff --git a/main.js b/main.js index 98d0301..013f2f5 100644 --- a/main.js +++ b/main.js @@ -39,6 +39,20 @@ deleteRows.addEventListener("click", () => { getTable.deleteRow(getTable.rows.length - 1); } console.log("rows have been deleted from the table with event listener"); +}); + +//remove columns from grid + +const deleteColumns = document.getElementById("delete-columns"); + +deleteColumns.addEventListener("click", () => { + for (let i = 0; i < getTable.rows.length; i++) { + const row = getTable.rows[i]; + if (row.cells.length > 0) { + row.deleteCell(row.cells.length - 1); + } + } +}); // Emmanuel From 6efda46d7e02fe480cdc84fdd4146cef8fb5a662 Mon Sep 17 00:00:00 2001 From: TJordan77 Date: Fri, 20 Jun 2025 16:09:10 -0400 Subject: [PATCH 9/9] added new function with listeners --- index.html | 8 +++++ main.js | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 99 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 0e4ab13..7e63983 100644 --- a/index.html +++ b/index.html @@ -38,10 +38,18 @@

Grid Maker

+ diff --git a/main.js b/main.js index 013f2f5..26fc77c 100644 --- a/main.js +++ b/main.js @@ -16,10 +16,10 @@ addRows.addEventListener("click", () => { for (let i = 0; i < getTable.rows[0].cells.length; i++) { const newCells = newRow.insertCell(); } + cellListeners(); // Mouse dragging won't work unless it accounts for new cells added }); // add columns to grid - const addColumns = document.getElementById("add-column"); addColumns.addEventListener("click", () => { @@ -28,10 +28,11 @@ addColumns.addEventListener("click", () => { const newCells = document.createElement("td"); row.appendChild(newCells); } + cellListeners(); // Mouse dragging won't work unless it accounts for new cells added }); -// remove rows from the grid +// remove rows from the grid const deleteRows = document.getElementById("delete-rows"); deleteRows.addEventListener("click", () => { @@ -41,8 +42,8 @@ deleteRows.addEventListener("click", () => { console.log("rows have been deleted from the table with event listener"); }); -//remove columns from grid +//remove columns from grid const deleteColumns = document.getElementById("delete-columns"); deleteColumns.addEventListener("click", () => { @@ -55,7 +56,6 @@ deleteColumns.addEventListener("click", () => { }); // Emmanuel - // Select a color from a dropdown menu of colors const colorSelect = document.getElementById("color-select"); @@ -63,3 +63,90 @@ colorSelect.addEventListener("change", () => { const selectedColor = colorSelect.value; console.log("Selected color: ", selectedColor); }); + + + +// fill all cells with selected color +function fillAllCells() { + const color = document.getElementById('color-select').value; + const cells = document.querySelectorAll('td'); + + cells.forEach(cell => { + cell.style.backgroundColor = color; + }); +} + +// clear all cells +function clearAllCells() { + const cells = document.querySelectorAll('td'); + + cells.forEach(cell => { + cell.style.backgroundColor = ''; + }); +} + +// color helper test +function colorCell(e) { + const color = document.getElementById("color-select").value; + e.target.style.backgroundColor = color; +} + + +/* 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 +*/ + +let isMouseDown = false; +let mouseButton = 0; + +function cellListeners() { + const cells = document.querySelectorAll("td"); + + cells.forEach(cell => { + // Prevent right-click menu + cell.addEventListener("contextmenu", (e) => { + e.preventDefault(); + }); + + cell.addEventListener("mousedown", (e) => { + isMouseDown = true; + mouseButton = e.button; // 0 = left, 2 = right + applyMouseAction(e); + }); + + cell.addEventListener("mouseover", (e) => { + if (isMouseDown) { + applyMouseAction(e); + } + }); + + cell.addEventListener("mouseup", () => { + isMouseDown = false; + }); + }); +} + + +// 0 for left click, 2 for right click +function applyMouseAction(e) { + if (mouseButton === 0) { + colorCell(e); + } else if (mouseButton === 2) { + e.target.style.backgroundColor = ""; + } +} + +// Making sure mouse stops coloring when button is released +document.body.addEventListener("mouseup", () => { + isMouseDown = false; +}); + +// Fill and clear buttons +document.getElementById("fill-grid").addEventListener("click", fillAllCells); +document.getElementById("clear-grid").addEventListener("click", clearAllCells); + +// A little listener for the grid cells +cellListeners(); + + +