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)