We are going to make a random number generator where the user indicate the range.
This is the code
Create our app with CRA
npx create-react-app random-number-generator We write a simple structure for our app.
App.js
import React from 'react'; export default function App() { return ( <div> <h2>Random Numbers</h2> <input type="text" /> <input type="text" /> <button>Random Number</button> </div> ); } Then add state
import React from 'react'; import './style.css'; import { useState } from 'react'; export default function App() { const [minRange, setMinRange] = useState(0); const [maxRange, setMaxRange] = useState(0); const [randomNumber, setRandomNumber] = useState(0); return ( <div> <h2>Random Numbers</h2> <input type="text" value={minRange} onChange={(event) => setMinRange(+event.target.value)} /> <input type="text" value={maxRange} onChange={(event) => setMaxRange(+event.target.value)} /> <button>Generar número aleatorio</button> </div> ); } And the final code looks like this:
import React from 'react'; import './style.css'; import { useState } from 'react'; export default function App() { const [minRange, setMinRange] = useState(0); const [maxRange, setMaxRange] = useState(0); const [randomNumber, setRandomNumber] = useState(0); function randomGenerator() { //const a = minRange; //const b = maxRange; setRandomNumber(randomNumberInRange(minRange, maxRange)); } function randomNumberInRange(min, max) { // 👇️ get number between min (inclusive) and max (inclusive) return Math.floor(Math.random() * (max - min + 1)) + min; } return ( <div> <h2>Random Numbers</h2> <input type="text" value={minRange} onChange={(event) => setMinRange(+event.target.value)} /> <input type="text" value={maxRange} onChange={(event) => setMaxRange(+event.target.value)} /> <button onClick={randomGenerator}>Generar número aleatorio</button> <p> {randomNumber}</p> </div> ); } Add a form
import React from 'react'; import './style.css'; import { useState } from 'react'; export default function App() { const [minRange, setMinRange] = useState(0); const [maxRange, setMaxRange] = useState(0); const [randomNumber, setRandomNumber] = useState(0); function randomGenerator(event) { event.preventDefault(); //const a = minRange; //const b = maxRange; setRandomNumber(randomNumberInRange(minRange, maxRange)); } function randomNumberInRange(min, max) { // 👇️ get number between min (inclusive) and max (inclusive) return Math.floor(Math.random() * (max - min + 1)) + min; } return ( <div> <h2>Random Numbers</h2> <form onSubmit={randomGenerator}> <input type="text" value={minRange} onChange={(event) => setMinRange(+event.target.value)} /> <input type="text" value={maxRange} onChange={(event) => setMaxRange(+event.target.value)} /> <button type="submit">Generar número aleatorio</button> </form> <p> {randomNumber}</p> </div> ); } 
Top comments (0)