claustra/src/App.jsx

import { useEffect, useState } from 'react';

function App() {
  const [formValues, setValues] = useState({
    totalCrossbarLength: 0,
    pilarWidth: 0,
    pilarQuantity: 0,
  });
  const [differencesBetweenPilars, setDifferencesBetweenPilars] = useState(0);
  const [woodsWidth, setWoodsWidth] = useState([]);

  const handleChange = (e) => {
    const {
      name,
      value,
    } = e.target;

    setValues({
      ...formValues,
      [name]: value,
    });
  };

  useEffect(() => {
    const {
      totalCrossbarLength,
      pilarWidth,
      pilarQuantity
    } = formValues;

    setDifferencesBetweenPilars((totalCrossbarLength-(pilarWidth*pilarQuantity))/(pilarQuantity-1))

  }, [setDifferencesBetweenPilars, formValues]);

  useEffect(() => {
    const {
      pilarWidth,
    } = formValues;

    const res = [];

    for ( let i = 0 ; i < 38 ; i += 1 ) {
      let value = 0;
      switch(i) {
        case 0:
          value = 0;
          break;
        case 1:
          value = Number(pilarWidth) + Number(differencesBetweenPilars);
          break;
        default:
          value = res[res.length - 1] + Number(pilarWidth) + Number(differencesBetweenPilars);
      }
      res.push(value);
    }

    console.log('res:', res);

    setWoodsWidth(res);

  }, [setWoodsWidth, formValues, differencesBetweenPilars]);

  return (
    <>
      <h1 className="font-bold text-2xl">Utilitaire claustra</h1>
      <form className="mt-5 mb-10 grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label htmlFor="totalCrossbarLength" className="block text-sm font-medium leading-6 text-gray-900">Longueur totale traverse</label>
            <div className="mt-2">
              <input
                type="number"
                name="totalCrossbarLength"
                id="totalCrossbarLength"
                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                value={formValues.totalCrossbarLength}
                onChange={handleChange} />
            </div>
          </div>
          <div>
            <label htmlFor="pilarWidth" className="block text-sm font-medium leading-6 text-gray-900">Largueur des montants</label>
            <div className="mt-2">
              <input
                type="number"
                name="pilarWidth"
                id="pilarWidth"
                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                value={formValues.pilarWidth}
                onChange={handleChange} />
            </div>
          </div>
          <div>
            <label htmlFor="pilarQuantity" className="block text-sm font-medium leading-6 text-gray-900">Nombre de montants</label>
            <div className="mt-2">
              <input
                type="number"
                name="pilarQuantity"
                id="pilarQuantity"
                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                value={formValues.pilarQuantity}
                onChange={handleChange} />
            </div>
          </div>
          <div>
            <label htmlFor="differencesBetweenPilars" className="block text-sm font-medium leading-6 text-gray-900">Ecarts entre montant</label>
            <div className="mt-2">
              <input
                type="number"
                name="differencesBetweenPilars"
                id="differencesBetweenPilars"
                disabled
                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                value={parseFloat(differencesBetweenPilars).toFixed(2)} />
            </div>
          </div>
      </form>
      <h2 className="font-bold text-xl">Epaisseur du bois à droite (mm)</h2>
      <div className="mt-5 mb-10 grid grid-cols-2 gap-y-4">
        {woodsWidth.map((value, index) => (
          <>
            <div className='border-solid border-b-2 text-right'>
              {index+1}
            </div>
            <div className='border-solid border-b-2 text-right'>
              {parseFloat(value).toFixed(2)}
            </div>
          </>
        ))}
      </div>
    </>
  )
}

export default App