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); }
Advertisement
Answer
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);