I wrote this code for an adjustable grid screen, it works perfectly fine but the only problem I have is that, I want the min and mix of it be 16 x 100. so when a button is clicked, a prompt window pops up and asks for the Grid size, you can put only between 16-100, but when I put 120, it still works, however I don't want it to be like this, how can I change it so it works as stated?
const sketchpad = (props) => {
const sketchSize = Math.min(props.portSize.width, props.portSize.height - 50);
const cellSize = Math.round(sketchSize / props.size);
const divSize = Math.max(sketchSize, cellSize * props.size);
const grid = props.pixelData.map((pixel, idx) => (
<Cell
cellSize={cellSize}
sketchSize={sketchSize}
bgColour={pixel}
keys={idx}
key={idx}
onMouseDown={props.mouseDown}
setColor={props.setColor}
/>
));
return (
<div className={`d-flex justify-content-center ${classes.SketchContainer}`}>
<div
className={`my-3 ${classes.Sketchpad}`}
style={{ height: `${divSize}px`, width: `${divSize}px` }}
onMouseUp={props.mouseUp}
>
{grid}
</div>
</div>
);
};
and my propmt
const gridSize = prompt("Please enter grid size");
if (gridSize < 100 && gridSize > 16) {
setGridSize(gridSize);
newPixelData = initPixelData(gridSize, INIT_BG_COLOUR);
} else {
alert("choose between 16-100")
const gridSize = prompt("Please enter your number");
setGridSize(gridSize);
newPixelData = initPixelData(gridSize, INIT_BG_COLOUR);
}
Here is an example using while which will run the loop until a value that meets all conditions is entered. (I added a an isNaN check as you'll also want to confirm that the returned value is even a number.)
let gridSize = prompt('Please enter grid size');
// if gridSize isn't a number OR is greater than 100 OR is less than 16, run the loop again
while (isNaN(gridSize) || gridSize > 100 || gridSize < 16) {
alert('choose between 16-100');
gridSize = prompt('Please enter your number');
}
console.log(gridSize);
// setGridSize(gridSize);
// newPixelData = initPixelData(gridSize, INIT_BG_COLOUR);