Added forms and a test square

.eslintcache

@@ -1 +1 @@
-[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Figure.js":"5"},{"size":500,"mtime":1611856800075,"results":"6","hashOfConfig":"7"},{"size":3171,"mtime":1611950981162,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":2114,"mtime":1611951553195,"results":"10","hashOfConfig":"7"},{"size":307,"mtime":1611951739720,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"ff9ndh",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/src/index.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],"/Users/user/repos/sort-measurer/src/components/Playground.js",[],"/Users/user/repos/sort-measurer/src/components/Figure.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
+[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Figure.js":"5"},{"size":500,"mtime":1611856800075,"results":"6","hashOfConfig":"7"},{"size":4854,"mtime":1612115342422,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":2114,"mtime":1611951553195,"results":"10","hashOfConfig":"7"},{"size":307,"mtime":1611951739720,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"ff9ndh",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"/Users/user/repos/sort-measurer/src/index.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],"/Users/user/repos/sort-measurer/src/components/Playground.js",[],"/Users/user/repos/sort-measurer/src/components/Figure.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]

src/App.js

@@ -1,9 +1,26 @@
+import { useState } from "react";
+
 import "./App.css";
+
 import Playground from "./components/Playground.js";
+
 var randomColor = Math.floor(Math.random() * 16777215).toString(16);
 
 var current = "#" + randomColor;
 function App() {
+  const [sheetWidth, setSheetWidth] = useState("");
+  const [sheetHeight, setSheetHeight] = useState("");
+  const [rectangleWidth, setRectangleWidth] = useState("");
+  const [rectangleHeight, setRectangleHeight] = useState("");
+
+  const handleSheetDimensionsSubmit = (e) => {
+    e.preventDefault();
+    alert(`Sheet dimensons: ${sheetWidth} x ${sheetHeight}`);
+  };
+  const handleRectangleDimensionsSubmit = (e) => {
+    e.preventDefault();
+    alert(`Rectangle dimensons: ${rectangleWidth} x ${rectangleHeight}`);
+  };
   return (
     <>
       <div className="App">
@@ -16,7 +33,47 @@ function App() {
             </g>
           </svg>
         </header>
+
         <h1>Guillotine-cutter App</h1>
+
+        <form onSubmit={handleSheetDimensionsSubmit}>
+          <label>
+            Sheet dimensons:
+            <input
+              type="text"
+              value={sheetWidth}
+              onChange={(e) => setSheetWidth(e.target.value)}
+            />
+            <input
+              type="text"
+              value={sheetHeight}
+              onChange={(e) => setSheetHeight(e.target.value)}
+            />
+          </label>
+          <input type="submit" value="Submit" />
+        </form>
+
+        <form onSubmit={handleRectangleDimensionsSubmit}>
+          <label>
+            Rectangle dimensons:
+            <input
+              type="text"
+              value={rectangleWidth}
+              onChange={(e) => setRectangleWidth(e.target.value)}
+            />{" "}
+            <input
+              type="text"
+              value={rectangleHeight}
+              onChange={(e) => setRectangleHeight(e.target.value)}
+            />
+          </label>
+          <input type="submit" value="+" />
+        </form>
+
+        <div
+          style={{ background: "red", width: "300px", height: "300px" }}
+        ></div>
+
         <Playground title="👨🏻‍💻"></Playground>
       </div>
     </>