JSFiddle - React, Tailwind, and code Playground

HTML

<form name="karvonen">
 <fieldset>
  <legend>
   Calculatrice
  </legend>
  <input type="number" id="age" name="age" maxlength="3" size="6">
  <label for="agefc">Votre âge</label>
  <br>
  <select name="sexe" id="sexe" class="postform">
   <option value="-1">Sélectionner votre sexe</option>
   <option class="level-0" value="220">Homme</option>
   <option class="level-0" value="226">Femme</option>
  </select>
  <br>
  <input type="number" id="fcrepos" name="fcrep" maxlength="3" size="6">
  <label for="fcrepos">
   pulsations (BPM) : Fréquence cardiaque au repos 
   <i>(<acronym title="Fréquence cardiaque au repos">FC repos</acronym>)</i>
  </label>
  <br>
 </fieldset>
 
 <button id="calculer">Calculer</button>
 <button type="reset" name="Reset" value="Effacer">Effacer</button>
 
 <fieldset>
  <legend>
   Résultats
  </legend>
  <p id="fcmax"></p>
  <label for="fcmax">
   pulsations (BPM) : Fréquence cardiaque max 
   <i>(<acronym title="Fréquence cardiaque max">FC max</acronym>)</i>
  </label>
  <br>
  <p id="fcres"></p>
  <label for="fcres">
    pulsations (BPM) : Fréquence cardiaque de réserve 
   <i>(<acronym title="Fréquence cardiaque de réserve">FC réserve</acronym>)</i>
  </label>
  <p id="Endurance1"></p> pulsations (BPM) 50% de la FC réserve
   <p id="Endurance2"></p> pulsations (BPM) 70% de la FC réserve
   <p id="Resdouce"></p> pulsations (BPM) 85% de la FC réserve
   <p id="Resdure"></p> pulsations (BPM) 95% de la FC réserve
 </fieldset>
</form>

JavaScript

var age = document.getElementById("age");
var sexe = document.getElementById("sexe");
var fcrepos = document.getElementById("fcrepos");
var fcmax = document.getElementById("fcmax");
var fcres = document.getElementById("fcres");
var endurance1 = document.getElementById("Endurance1");
var pourcent1 = "0.5";
var endurance2 = document.getElementById("Endurance2");
var pourcent2 = "0.7";
var resdouce = document.getElementById("Resdouce");
var pourcent3 = "0.85";
var resdure = document.getElementById("Resdure");
var pourcent4 = "0.95";

document.getElementById("calculer").addEventListener("click", function(event) {
		event.preventDefault();
    if(age.value && sexe.value && fcrepos.value) {
    	console.log("Calculating...");
    	fcmax.innerHTML = getFcmax(age.value, sexe.value);
    	fcres.innerHTML = getFcres(age.value, sexe.value, fcrepos.value);
    	Endurance1.innerHTML = getEndurance1(age.value, sexe.value, fcrepos.value, pourcent1);
    	Endurance2.innerHTML = getEndurance2(age.value, sexe.value, fcrepos.value, pourcent2);
    	Resdouce.innerHTML = getResdouce(age.value, sexe.value, fcrepos.value, pourcent3);
    	Resdure.innerHTML = getResdure(age.value, sexe.value, fcrepos.value, pourcent4);
    } else {
    	console.log("There is empty fields");
    }
});


function getFcmax(age, sexe) {
    var result = (sexe - age);
    return result;
}

function getFcres(age, sexe, fcrepos) {
    var result = (sexe - age) - fcrepos;
    return result;
}

function getEndurance1(age, sexe, fcrepos, pourcent1) {
    var result = (((sexe - age) - fcrepos) * pourcent1) + fcrepos;
    return result;
}

function getEndurance2(age, sexe, fcrepos, pourcent2) {
    var result = (((sexe - age) - fcrepos) * pourcent2) + fcrepos;
    return result;
}

function getResdouce(age, sexe, fcrepos, pourcent3) {
    var result = (((sexe - age) - fcrepos) * pourcent3) + fcrepos;
    return result;
}

function getResdure(age, sexe, fcrepos, pourcent4) {
    var result = (((sexe - age) -...