75 lines
2.1 KiB
JavaScript
75 lines
2.1 KiB
JavaScript
import { useState } from 'react';
|
||
import './App.css';
|
||
|
||
function App() {
|
||
const [data, setData] = useState(null);
|
||
|
||
async function handleSubmit(e) {
|
||
e.preventDefault();
|
||
const form = new FormData(e.target);
|
||
const body = {
|
||
flour: Number(form.get('flour')),
|
||
hydration: Number(form.get('hydration')),
|
||
sourdough_hydration: Number(form.get('sourdough_hydration')),
|
||
salt_percent: Number(form.get('salt_percent')),
|
||
sourdough_percent: Number(form.get('sourdough_percent'))
|
||
};
|
||
|
||
const res = await fetch('http://localhost:8000/calculate', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(body)
|
||
});
|
||
const json = await res.json();
|
||
setData(json);
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>Calculateur de quantités</h1>
|
||
<p>
|
||
Calcule les quantités de farine, levain, eau et sel sur la base des
|
||
informations renseignées dans le formulaire.
|
||
</p>
|
||
<form onSubmit={handleSubmit}>
|
||
<label>
|
||
Farine (g) :
|
||
<input name="flour" type="number" defaultValue={500} />
|
||
</label>
|
||
<label>
|
||
Hydratation (%) :
|
||
<input name="hydration" type="number" defaultValue={60} />
|
||
</label>
|
||
<label>
|
||
Hydratation du levain (%) :
|
||
<input name="sourdough_hydration" type="number"
|
||
defaultValue={50} />
|
||
</label>
|
||
<label>
|
||
Sel (%) :
|
||
<input name="salt_percent" type="number" defaultValue={1.6} />
|
||
</label>
|
||
<label>
|
||
Levain (%) :
|
||
<input name="sourdough_percent" type="number" defaultValue={20} />
|
||
</label>
|
||
<button type="submit">Calculer</button>
|
||
</form>
|
||
|
||
{data && (
|
||
<section>
|
||
<h2>Quantités pour ton pâton</h2>
|
||
<ul>
|
||
<li>Farine : {data.flour} g</li>
|
||
<li>Eau : {data.water} g</li>
|
||
<li>Levain : {data.sourdough} g</li>
|
||
<li>Sel : {data.salt} g</li>
|
||
</ul>
|
||
</section>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default App;
|