diff --git a/.eslintcache b/.eslintcache index 01cac7f..08261c5 100644 --- a/.eslintcache +++ b/.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/Workspace.js":"4","/Users/user/repos/sort-measurer/src/components/Form.js":"5"},{"size":500,"mtime":1612120197176,"results":"6","hashOfConfig":"7"},{"size":287,"mtime":1612381995190,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":532,"mtime":1612381918124,"results":"10","hashOfConfig":"7"},{"size":1524,"mtime":1612384415506,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"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",[],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/components/Workspace.js",[],"/Users/user/repos/sort-measurer/src/components/Form.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/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/Workspace.js":"4","/Users/user/repos/sort-measurer/src/components/Form.js":"5","/Users/user/repos/sort-measurer/src/helpers/RandomColor.js":"6"},{"size":500,"mtime":1612120197176,"results":"7","hashOfConfig":"8"},{"size":287,"mtime":1612381995190,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1611856800076,"results":"10","hashOfConfig":"8"},{"size":532,"mtime":1612381918124,"results":"11","hashOfConfig":"8"},{"size":2239,"mtime":1612472022382,"results":"12","hashOfConfig":"8"},{"size":108,"mtime":1612467064498,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["27","28"],"/Users/user/repos/sort-measurer/src/components/Workspace.js",[],"/Users/user/repos/sort-measurer/src/components/Form.js",["29","30"],"/Users/user/repos/sort-measurer/src/helpers/RandomColor.js",[],{"ruleId":"31","replacedBy":"32"},{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","severity":1,"message":"36","line":19,"column":13,"nodeType":"37","messageId":"38","endLine":19,"endColumn":15},{"ruleId":"35","severity":1,"message":"36","line":20,"column":14,"nodeType":"37","messageId":"38","endLine":20,"endColumn":16},"no-native-reassign",["39"],"no-negated-in-lhs",["40"],"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/src/components/Form.js b/src/components/Form.js index 1281da8..669dda2 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -1,27 +1,50 @@ import { useState } from "react"; +import InfoIcon from "@material-ui/icons/Info"; +import Tooltip from "@material-ui/core/Tooltip"; + import "./Form.css"; import Workspace from "./Workspace"; -import InfoIcon from "@material-ui/icons/Info"; +import RandomColor from "../helpers/RandomColor"; export default function Form(props) { - var randomColor = Math.floor(Math.random() * 16777215).toString(16); - var current = "#" + randomColor; - const [width, setWidth] = useState(""); const [height, setHeight] = useState(""); const [rectanglesItems, setRectanglesItems] = useState([]); + const [dimensionsError, setDimensionsError] = useState(""); + + function Validation() { + if ( + isNaN(width) || + isNaN(height) || + width == 0 || + height == 0 || + width === null || + height === null + ) { + setDimensionsError("Enter correct dimensions"); + return false; + } + if (width > 2000 || height > 2000) { + setDimensionsError("Dimensions too big"); + return false; + } + return true; + } - //if (w || h == 0 || null) dont display; const handleFormSubmit = (e) => { e.preventDefault(); - setRectanglesItems([ - ...rectanglesItems, - { - w: width / 2, - h: height / 2, - c: current, - }, - ]); + setDimensionsError(""); + Validation(); + if (Validation()) { + setRectanglesItems([ + ...rectanglesItems, + { + w: width / 2, + h: height / 2, + c: RandomColor(), + }, + ]); + } }; return ( @@ -29,14 +52,15 @@ export default function Form(props) {
+ {{ dimensionsError } ? ( +

{dimensionsError}

+ ) : null}
+ + +
-

- Some rectangles may appear invisible. That's because the - color of the figures probably matches the background color. -

+

Current space: 2000 x 2000

); diff --git a/src/helpers/RandomColor.js b/src/helpers/RandomColor.js new file mode 100644 index 0000000..275aea0 --- /dev/null +++ b/src/helpers/RandomColor.js @@ -0,0 +1,3 @@ +export default function RandomColor() { + return "#" + Math.floor(Math.random() * 16777215).toString(16); +}