JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<table width="100%" border="1" align="center">
  <tr bgcolor="#CCCCCC"> 
    <td> 
      <p><b><font size="6">Calculatrice<br>
        <font size="3">pour bien calculer le dosage d'un produit<br>
        <hr color="#808080"/></font></font></b></p>
      <p><b><font color="#FF3333"><u>Informations.</u></font></b></p>
      <p><b><br>
        Produit:</b> <font color="#FF3333"><b>*</b></font><br></p>
        <select id="produits" size="1">
          <option value="p1">Produit 1</option>
          <option value="p2">Produit 2</option>
          <option value="p3">Produit 3</option>
          <option value="p4">Produit 4</option>
        </select>
      <p><br>
        <b>Pulverisateur: <font color="#FF3333">*</font></b><br>
        <font size="2">capacité en litres</font> 
      </p>
        <input type="text" id="capacite" />
      <br>
      <b>Superficie du terrain</b> <font color="#FF3333"><b>*</b></font><br>
      <font size="2">en m²<br>
      </font> 
        <input type="text" id="superficie">
      <br>
        <input id="boutonCalculer" type="button" value="Calculer">
      <p><b><font color="#FF3333"><u>Vous devez mettre dans votre pulvérisateur:</u></font></b></p>
      <b>Quantité d'eau:</b> <span id="quantite_eau"></span> L<br>
      
      <br>
      <b>Quantité de produit :</b> <span id="quantite_produit"></span> mL<br>
      
      <br>
      <b>Surface couvrable :</b> <span id="surface_par_pulverisateur"></span> m²<br>
      
      <p><b><font color="#FF3333"><u>Quantité totale pour faire tout votre terrain:</u></font></b><br>
      </p>
      <p> <b>Eau</b> <span id="total_eau"></span> L</p>
      <b>Quantité de produit</b> <span id="total_produit"></span> mL<br>
      <br>
      <b>Nombre de pulvérisateurs</b> <span id="nb_pulverisateurs"></span><br>
      <br>
      <br>
      <b>Descriptif du produit</b><br>
      <div id="descriptif">
      </div>
    </td>
  </tr>
</table>

JavaScript

var produits = {
  p1: {
    dosageEau: '1',
    dosageProduit: '5',
    surfaceCouverte: '10',
    descriptif: 'descriptif produit 1'
  }
}

document.getElementById('boutonCalculer').onclick = function() {
  
  var capacitePulverisateur = parseInt(document.getElementById('capacite').value, 10);
  var superficieTerrain = parseInt(document.getElementById('superficie').value, 10);
  var produit = produits[document.getElementById('produits').value];
  
  document.getElementById('quantite_eau').innerHTML = capacitePulverisateur;
  
  var coef = capacitePulverisateur / produit.dosageEau;
  
  var produitParPulverisateur = produit.dosageProduit * coef;
  
  document.getElementById('quantite_produit').innerHTML = produitParPulverisateur;
  
  var surfaceParPulverisateur = produit.surfaceCouverte * coef;
  
  document.getElementById('surface_par_pulverisateur').innerHTML = surfaceParPulverisateur;
  
  var nbPulverisateurs = superficieTerrain / surfaceParPulverisateur;
  
  document.getElementById('nb_pulverisateurs').innerHTML = nbPulverisateurs;
  
  document.getElementById('total_eau').innerHTML = nbPulverisateurs * capacitePulverisateur;
  
  document.getElementById('total_produit').innerHTML = nbPulverisateurs * produitParPulverisateur;
  
  document.getElementById('descriptif').innerHTML = produit.descriptif;
  
}