JavaScript

Dernière mise à jour : 26/05/2016

Calculateur de salaire

Énoncé

Calculer le salaire d'une personne sur base de son salaire brut en décomptant les frais suivants:

Impôts sur le revenu : 18%
Assurance employé : 7%
Régime de pensions du Canada : 5%

Les personnes peuvent recevoir comme supplément un bonus de 100$ ou une allocation de 150$.

Il est possible de recevoir des réductions sur les impôts sur le revenu sous certaines conditions :

Si le travailleur est une femme, elle reçoit 2% de réduction.
Si le travailleur a 3 personnes à charge, il reçoit 1% de réduction.
Si le travailleur a 4 personnes à charge, il reçoit 2% de réduction.

Solution

Fichier "js/script.js"

Number.prototype.formatMoney = function (c, d, t) {
  var n = this,
          c = isNaN(c = Math.abs(c)) ? 2 : c,
          d = d === undefined ? "." : d,
          t = t === undefined ? "," : t,
          s = n < 0 ? "-" : "",
          i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
          j = (j = i.length) > 3 ? j % 3 : 0;
  return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}; // Source: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript

function ElementReader() {
  this.InputCheckbox = function (idInput) {
    var input = document.getElementById(idInput);
    if (input === null) {
      return undefined;
    }
    return input.checked;
  };
  this.InputInt = function (idInput) {
    var input = document.getElementById(idInput);
    if (input === null) {
      return undefined;
    }
    return parseInt(input.value);
  };
  this.Select = function (idSelect) {
    var select = document.getElementById(idSelect);
    if (select === null) {
      return undefined;
    }
    var idx = select.selectedIndex;
    return select.options[idx].value;
  };
}

function ElementWriter() {
  this.Tag = function (idTag, value) {
    var tag = document.getElementById(idTag);
    if (tag !== null) {
      tag.innerHTML = value;
    }
  };
  this.TagCurrency = function (idTag, value) {
    this.Tag(idTag, value.formatMoney(2, ',', '&nbsp;') + '$');
  };
}

function salaryCalculator() {
  var incomeTaxRate = 0.18;
  var employmentInsuranceRate = 0.07;
  var canadaPensionPlanRate = 0.05;
  var additionBonusValue = 100;
  var additionAllowanceValue = 150;
  this.grossSalary;
  this.additionBonus;
  this.additionAllowance;
  this.gender;
  this.dependents;
  this.getAdditions = function () {
    var additions = 0;
    if (this.additionBonus === true) {
      additions += additionBonusValue;
    }
    if (this.additionAllowance === true) {
      additions += additionAllowanceValue;
    }
    return additions;
  };
  this.getCanadaPensionPlan = function () {
    return this.grossSalary * canadaPensionPlanRate;
  };
  this.getEmploymentInsurance = function () {
    return this.grossSalary * employmentInsuranceRate;
  };
  this.getFinalSalary = function () {
    return this.grossSalary - this.getCanadaPensionPlan() - this.getEmploymentInsurance() - this.getIncomeTax() + this.getAdditions();
  };
  this.getIncomeTax = function () {
    var relevantIncomeTaxRate = incomeTaxRate;
    if (this.gender === 'F') {
      relevantIncomeTaxRate -= 0.02;
    }
    if (this.dependents === 3) {
      relevantIncomeTaxRate -= 0.01;
    } else if (this.dependents > 3) {
      relevantIncomeTaxRate -= 0.02;
    }
    return this.grossSalary * relevantIncomeTaxRate;
  };
}

function computeSalary() {
  var reader = new ElementReader();
  var writer = new ElementWriter();
  var salCalc = new salaryCalculator();
  salCalc.grossSalary = reader.InputInt('grossSalary');
  salCalc.additionBonus = reader.InputCheckbox('additionBonus');
  salCalc.additionAllowance = reader.InputCheckbox('additionAllowance');
  salCalc.gender = reader.Select('gender');
  salCalc.dependents = reader.InputInt('dependents');
  writer.TagCurrency('incomeTaxResult', salCalc.getIncomeTax());
  writer.TagCurrency('employmentInsuranceResult', salCalc.getEmploymentInsurance());
  writer.TagCurrency('canadaPensionPlanResult', salCalc.getCanadaPensionPlan());
  writer.TagCurrency('additionsResult', salCalc.getAdditions());
  writer.TagCurrency('finalSalaryResult', salCalc.getFinalSalary());
}

function resetAll() {
  var writer = new ElementWriter();
  var results = ['incomeTaxResult', 'employmentInsuranceResult', 'canadaPensionPlanResult', 'additionsResult', 'finalSalaryResult'];
  for (var i = 0; i < results.length; i++) {
    writer.Tag(results[i], '');
  }
}

Fichier "index.html"

<!DOCTYPE html>
<html>
  <head>
    <title>Calculateur de salaire</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Calculateur de salaire</h1>
    <form id="myForm" onsubmit="return false;">
      <div>
        <label for="grossSalary">Salaire brut&nbsp;:</label>
        <input id="grossSalary" type="number">$
      </div>
      <div>
        <label for="additionBonus">Bonus&nbsp;:</label>
        <input id="additionBonus" type="checkbox">
      </div>
      <div>
        <label for="additionAllowance">Allocation&nbsp;:</label>
        <input id="additionAllowance" type="checkbox">
      </div>
      <div>
        <label for="gender">Genre&nbsp;:</label>
        <select id="gender">
          <option value="M">Homme</option>
          <option value="F">Femme</option>
        </select>
      </div>
      <div>
        <label for="dependents">Personnes à charge&nbsp;:</label>
        <input id="dependents" type="number">
      </div>
      <div>
        <input type="submit" value="Calculer" onclick="computeSalary()">
        <input type="reset" value="Effacer" onclick="resetAll()">
      </div>
    </form>
    <hr>
    <p>Impôt sur le revenu&nbsp;: <span id="incomeTaxResult"></span></p>
    <p>Assurance employé&nbsp;: <span id="employmentInsuranceResult"></span></p>
    <p>Régime de pensions du Canada&nbsp;: <span id="canadaPensionPlanResult"></span></p>
    <p>Suppléments&nbsp;: <span id="additionsResult"></span></p>
    <p>Salaire net&nbsp;: <span id="finalSalaryResult"></span></p>
    <script src="js/script.js" type="text/javascript"></script>
  </body>
</html>