From 0858738b5bac9d7e9ed463730d822161f1f1d121 Mon Sep 17 00:00:00 2001 From: Guarotav <163146825+Guarotav@users.noreply.github.com> Date: Mon, 23 Jun 2025 13:08:32 -0400 Subject: [PATCH 1/5] Update index.html --- public/index.html | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index ec54be0..62dbf42 100644 --- a/public/index.html +++ b/public/index.html @@ -3,10 +3,46 @@ - React Mini + Grid Maker + -
+ +
+

Grid Maker

+ + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+
From b70c828d90ede3f81207f1a1d1c62bd1a23ac687 Mon Sep 17 00:00:00 2001 From: Guarotav Date: Mon, 23 Jun 2025 13:24:46 -0400 Subject: [PATCH 2/5] Initial commit --- public/index.html | 34 +--------------------------------- src/app.jsx | 34 +++++++++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 34 deletions(-) diff --git a/public/index.html b/public/index.html index 62dbf42..9b67f77 100644 --- a/public/index.html +++ b/public/index.html @@ -10,39 +10,7 @@
-

Grid Maker

- - - - - - - - - - - - - - - - - - -
-
- - - - - - - - -
+
diff --git a/src/app.jsx b/src/app.jsx index 1eebc0c..040098f 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -5,7 +5,39 @@ import "./style.css"; const App = () => { return (
-

Hello World

+

Grid Maker

+ + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
); }; From 43430e72efecaa0a7d9c38d8d8f77ce8bb49685e Mon Sep 17 00:00:00 2001 From: Elian Echavarria Date: Mon, 23 Jun 2025 14:54:14 -0400 Subject: [PATCH 3/5] Rows function --- src/app.jsx | 28 ++++++++-------------------- src/components/rows.jsx | 23 +++++++++++++++++++++++ src/style.css | 6 ++++++ 3 files changed, 37 insertions(+), 20 deletions(-) create mode 100644 src/components/rows.jsx diff --git a/src/app.jsx b/src/app.jsx index 040098f..a31d5b1 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,35 +1,23 @@ import React from "react"; import { createRoot } from "react-dom/client"; import "./style.css"; +import rows from "./components/rows"; -const App = () => { + +const App = (props) => { return (
-

Grid Maker

+

Grid Maker

- - - - - - - - - - - - - - - + {props.rows}
- - + + - + - - - - - - -
-
- ); + + + + + return ( +
+

Grid Maker

+ +
+ + + + + + + + +
+ + + + ); }; const root = createRoot(document.getElementById("root")); -root.render(); +root.render(); \ No newline at end of file From aed132bd09d6aee8037b0320a18b3970c456ba3e Mon Sep 17 00:00:00 2001 From: Dagostocsc Date: Mon, 23 Jun 2025 13:13:00 -0700 Subject: [PATCH 5/5] debbie --- src/app.jsx | 70 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 43 insertions(+), 27 deletions(-) diff --git a/src/app.jsx b/src/app.jsx index 7498cac..386ffb4 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -4,37 +4,53 @@ import "./style.css"; import Table from "./Table.jsx"; const App = () => { + const [numRows, setNumRows] = useState(3); + const [numCols, setNumCols] = useState(3); + const [grid, setGrid] = useState( + Array(3).fill(null).map(() => Array(3).fill('white')) + ); + const [selectedColor, setSelectedColor] = useState('red'); +} +const addRow = () => { + setNumRows(prevNumRows => { + const newNumRows = prevNumRows + 1; + const newRow = Array(numCols).fill('white'); + setGrid(prevGrid => [...prevGrid, newRow]); + return newNumRows; + }); + }; + const deleteRow = () => { + setNumRows(prevNumRows => { + if (prevNumRows > 1) { + const newNumRows = prevNumRows - 1; + setGrid(prevGrid => prevGrid.slice(0, newNumRows)); + return newNumRows; + } + return prevNumRows; + }); + }; - return ( -
-

Grid Maker

-
-
- - - - - - - - -
- - - - ); -}; + const addColumn = () => { + setNumCols(prevNumCols => { + const newNumCols = prevNumCols + 1; + setGrid(prevGrid => prevGrid.map(row => [...row, 'white'])); + return newNumCols; + }); + }; + const deleteColumn = () => { + setNumCols(prevNumCols => { + if (prevNumCols > 1) { + const newNumCols = prevNumCols - 1; + setGrid(prevGrid => prevGrid.map(row => row.slice(0, newNumCols))); + return newNumCols; + } + return prevNumCols; + }); + }; + const root = createRoot(document.getElementById("root")); root.render(); \ No newline at end of file