Créer une calculatrice simple avec Javascript

Création de notre projet

Créez une page HTML

En effet, JavaScript se base sur les éléments HTML pour manipuler les données pour votre calculatrice. Ainsi, vous aurez besoin de champs d’entrée pour les nombres et les opérations.

Créez votre projet, en créant un dossier. Puis, ouvrer votre éditeur de code préféré.

Créez votre fichier HTML en le nommant “index.html”.

Et si vous utilisez Vs-code, grâce aux Emmet, il suffit de taper ! et ⭾ :

Et magie, apparait le code standard d’une page web :

À présent, on va venir y placer le code pour la calculatrice simplifiée :

<p>Calculatrice simplifié en html et js</p>
<div id="calculator">
  <input id="number1" type="text">
  <input id="number2" type="text">
  <button id="add">+</button>
  <button id="subtract">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
</div>
<div class="result">
  <p>Le résultat est: 
<span id="output"></span></p>
</div>
 

Comme vous pouvez le remarquer, vous pouvez voir plusieurs éléments :

• La balise input : est utilisée dans les formulaires HTML pour créer des champs interactifs que les utilisateurs peuvent remplir avec des données. Elle peut prendre différents types tels que « text », « number », « date », etc. Dans notre cas, elles serviront à récupérer, les valeurs de notre calculatrice simplifiée.
• La balise button : Elle est utilisée pour créer un bouton sur lequel l’utilisateur peut cliquer. Dans le cadre de ce tutoriel, elle est utilisée pour déclencher les différentes opérations mathématiques de la calculatrice (addition, soustraction, multiplication, division).
• L’attribut id⁣ : Dans une balise HTML, cela attribue un identifiant unique à la balise le contenant. Il est principalement utilisé pour cibler cet élément avec JavaScript ou CSS. Ici en fonction des balises, cela va récupérer les données des inputs ou déclencher l’opération mathématique.

[article-internal-link]

Création de notre fichier JavaScript

Dans notre projet, on va maintenant venir créer un autre fichier. On le nommera par convention “Script.js” :

Rajoutons le code pour les opérations mathématiques

Pour commencer, il faudra dire à JavaScript, d’écouter les “click”, pour déclencher les calculs.

Commençons par l’addition :

En tout premier lieu, on va lui dire d’écouter le click sur le <button id="add"> avec l’id ou identifiant “add”. En code, cela donnerait ceci :

document.getElementById('add').addEventListener('click', function() {});

Explications :

• document : En JS cela lui indique de venir dans la page affichée.
• .getElementById('add') : On lui dit dans le document, retrouve-moi un id ayant pour nom ‘add’
• addEventListener('click', function() {}) : Et dès que l’on va cliquer dessus, exécute la function()

À présent, il faut venir récupérer les valeurs de nos deux <input>, pour effectuer l’opération. Dans notre cas, on va venir les stocker dans des variables, pour les manipuler facilement. En JS, il faut utiliser un mot clé pour lui faire comprendre qu’on veut y mettre des données. On dit qu’on “initialise une variable” :

var number1 = parseFloat(document.getElementById('number1').value);
var number2 = parseFloat(document.getElementById('number2').value)

Ici, on dit à JS que dans la variable number1 :

• parseFloat de convertir en type nombre
• document.getElementById('number1') depuis l’input qui possède l’identifiant number1 et
• .value de récupérer ces données

Maintenant, il nous reste à calculer l’addition et afficher le résultat :

document.getElementById('output').innerHTML = number1 + number2;

Ainsi, comme vous le savez, le document.getElementById('output') va cibler l’élément #output et avec .innerHTML cela viendra mettre le résultat de l’addition des deux variables number1 et number2.

Pour calculer rien de plus simple, c’est comme avec un papier et un stylo, on rajoute le signe + pour additionner.

Ainsi pour le code pour additionner serait comme ceci :

document.getElementById('add').addEventListener('click', function() {
  var number1 = parseFloat(document.getElementById('number1').value);
  var number2 = parseFloat(document.getElementById('number2').value);
  document.getElementById('output').innerHTML = number1 + number2;
});

Entrainez-vous à rajouter la soustraction, la multiplication et la division :

Voilà ! Vous venez de créer une calculatrice simple en JavaScript.

Bien sûr, on pourrait faire beaucoup mieux, comme la possibilité de faire des opérations complexes ou de conserver l’historique des calculs. Mais c’est un bon point de départ. Quand on commence à coder.

[article-internal-link]