diff --git a/public/index.html b/public/index.html index ec54be0..9b67f77 100644 --- a/public/index.html +++ b/public/index.html @@ -3,10 +3,14 @@ - React Mini + Grid Maker + -
+ +
+ +
diff --git a/src/Table.jsx b/src/Table.jsx new file mode 100644 index 0000000..3fa0a62 --- /dev/null +++ b/src/Table.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import TableRow from './TableRow.jsx'; + +const Table = ({ grid, onCellClick }) => { + return ( + + + {grid.map((row, rowIndex) => ( + + ))} + +
+ ); +}; + +export default Table; diff --git a/src/TableCell.jsx b/src/TableCell.jsx new file mode 100644 index 0000000..12e0be2 --- /dev/null +++ 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 ( + onCellClick(rowIndex, colIndex)} + > + ); +}; + +export default TableCell; diff --git a/src/TableRow.jsx b/src/TableRow.jsx new file mode 100644 index 0000000..5b94db4 --- /dev/null +++ b/src/TableRow.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import TableCell from './TableCell.jsx'; + +const TableRow = ({ row, rowIndex, onCellClick }) => { + return ( + + {row.map((cellColor, colIndex) => ( + + ))} + + ); +}; + +export default TableRow; \ No newline at end of file diff --git a/src/app.jsx b/src/app.jsx index 1eebc0c..1dfc5a7 100644 --- 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 (
-

Hello World

+

Grid Maker

+ +
+ + + + + + + + +
+ + ); }; - + const root = createRoot(document.getElementById("root")); -root.render(); +root.render(); \ No newline at end of file diff --git a/src/components/rows.jsx b/src/components/rows.jsx new file mode 100644 index 0000000..9da3585 --- /dev/null +++ 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, ]) + } + const tableRows = rows.map((numberRows) => { + return numberRows; + }) + + + + return ( + <> + {tableRows} + + ) +} + +export default rows diff --git a/src/style.css b/src/style.css index ad79d8d..0d93cb8 100644 --- 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; +} \ No newline at end of file