fterdal · ElianEchavarria · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025
diff --git a/public/index.html b/public/index.html
@@ -3,10 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Mini</title>
+    <title>Grid Maker</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="main.js"></script>
   </head>
   <body>
-    <div id="root"></div>
+    <!-- Please feel free to change the HTML as you see fit! This is just a starting point. -->
+    <div id="root">
+
+    </div>
   </body>
 </html>
diff --git a/src/Table.jsx b/src/Table.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import TableRow from './TableRow.jsx';
+
+const Table = ({ grid, onCellClick }) => {
+  return (
+    <table>
+      <tbody>
+        {grid.map((row, rowIndex) => (
+          <TableRow
+            key={rowIndex}
+            row={row}
+            rowIndex={rowIndex}
+            onCellClick={onCellClick}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;
diff --git a/src/TableCell.jsx b/src/TableCell.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const TableCell = ({ color, rowIndex, colIndex, onCellClick }) => {
+  const cellStyle = {
+    backgroundColor: color,
+    width: '30px',
+    height: '30px',
+    border: '1px solid #ccc',
+    boxSizing: 'border-box',
+    cursor: 'pointer'
+  };
+
+  return (
+    <td
+      style={cellStyle}
+      onClick={() => onCellClick(rowIndex, colIndex)}
+    ></td>
+  );
+};
+
+export default TableCell;
diff --git a/src/TableRow.jsx b/src/TableRow.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import TableCell from './TableCell.jsx';
+
+const TableRow = ({ row, rowIndex, onCellClick }) => {
+  return (
+    <tr>
+      {row.map((cellColor, colIndex) => (
+        <TableCell
+          key={`${rowIndex}-${colIndex}`}
+          color={cellColor}
+          rowIndex={rowIndex}
+          colIndex={colIndex}
+          onCellClick={onCellClick}
+        />
+      ))}
+    </tr>
+  );
+};
+
+export default TableRow;
diff --git a/src/app.jsx b/src/app.jsx
@@ -1,14 +1,110 @@
-import React from "react";
+import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
 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;
+        });
+    };
+
+
+
+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 fillGrid = () => {
+    setGrid(prevGrid => {
+      const newGrid = prevGrid.map(row =>
+        row.map(() => selectedColor)
+      );
+      return newGrid;
+    });
+  };
+
+  const clearGrid = () => {
+    setGrid(prevGrid => {
+      const newGrid = prevGrid.map(row =>
+        row.map(() => 'white')
+      );
+      return newGrid;
+    });
+  };
+
+
   return (
     <div className="app">
-      <h1 className="title">Hello World</h1>
+      <h1>Grid Maker</h1>
+      <Table grid={grid} />
+      <div className="controls">
+        <button id="add-row" onClick={addRow}>Add Row</button>
+        <button id="delete-row" onClick={deleteRow}>Delete Row</button>
+        <button id="add-column"  onClick={addColumn} >Add Column</button>
+        <button id="delete-column" onClick={deleteColumn}>Delete Column</button>
+        <select id="color-select" value={selectedColor}>
+          <option value="white">White</option>
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+          <option value="green">Green</option>
+          <option value="yellow">Yellow</option>
+          <option value="purple">Purple</option>
+          <option value="orange">Orange</option>
+        </select>
+        <button id="fill-uncolored" >Fill Uncolored</button>
+        <button id="fill-grid" onClick={fillGrid}>Fill Grid</button>
+        <button id="clear-grid" onClick={clearGrid}>Clear Grid</button>
+      </div>
+
+
     </div>
   );
 };
-
+    
 const root = createRoot(document.getElementById("root"));
-root.render(<App />);
+root.render(<App />);
diff --git a/src/components/rows.jsx b/src/components/rows.jsx
@@ -0,0 +1,23 @@
+import React, { use, useState, useEffect } from 'react'
+import App from '../app'
+
+const rows = () => {
+    const [rows, setRow] = useState([]);
+
+    function addRow() {
+        setRow([...rows, <tr key={rows.length}><td></td><td></td><td></td></tr>])
+    }
+    const tableRows = rows.map((numberRows) => {
+        return numberRows;
+    })
+
+
+
+    return (
+        <>
+            {tableRows}
+        </>
+    )
+}
+
+export default rows
diff --git a/src/style.css b/src/style.css
@@ -24,3 +24,9 @@ body {
   justify-content: center;
   min-height: 100vh;
 }
+
+td {
+  width: 20px;
+  height: 20px;
+  background-color: #ffffff;
+}