Créer une Calculatrice Simple avec JavaScript

« Elle fait des calculs, pas du drama. » 🧮😄

Quand on apprend JavaScript, il existe certains mini-projets qui :

Paraissent petits
Commencent simplement
Mais cachent énormément de notions fondamentales

Le projet Calculatrice est exactement de ce genre.

C’est l’une des façons les plus modestes — mais aussi les plus efficaces — de dire :
« Oui… je connais JavaScript. » 😎

1️⃣ Avant le Code : Construisons la Logique 🧠

(Parce que du code sans plan = une vie chaotique)

Que fait une calculatrice ?

L’utilisateur saisit des nombres
Choisit une opération
JavaScript calcule
Le résultat s’affiche à l’écran

Donc, de quoi avons-nous besoin ?

🟦 Input → pour récupérer les nombres
🟦 Boutons → pour choisir les opérations
🟦 Fonctions → pour effectuer les calculs
🟦 DOM → pour afficher le résultat

📌 Règle d’or :
Avant d’écrire du code, réponds toujours à la question :
« Que fait exactement cette application ? »

2️⃣ HTML : Le Squelette de la Calculatrice 🏗️

(Pas de muscles, pas de cerveau… mais elle tient debout)

&lt;input type="number" id="num1" placeholder="1er nombre">
&lt;input type="number" id="num2" placeholder="2e nombre">

&lt;button onclick="calculate('+')">+&lt;/button>
&lt;button onclick="calculate('-')">-&lt;/button>
&lt;button onclick="calculate('*')">*&lt;/button>
&lt;button onclick="calculate('/')">/&lt;/button>

&lt;p id="result">Résultat : &lt;/p>

Que se passe-t-il dans le HTML ?

🔹 <input type="number">

Permet de saisir des nombres
Réduit la saisie de lettres
Mais une validation JavaScript reste indispensable ⚠️

🔹 Utilisation de id

id="num1"

C’est la façon dont JavaScript dit :
« Hé toi, viens ici. » 👋

🔹 onclick

&lt;button onclick="calculate('+')">

🧠 Signification :
« Quand ce bouton est cliqué, appelle la fonction calculate
et indique-lui quelle opération utiliser. »

3️⃣ JavaScript : Le Cerveau de la Calculatrice 🧠⚡

C’est ici que la vraie magie commence.

function calculate(operation) {
  let num1 = Number(document.getElementById("num1").value);
  let num2 = Number(document.getElementById("num2").value);
  let result;

🔹 function calculate(operation)

Une seule fonction
Reçoit le type d’opération
Réduit la répétition de code (mouvement PRO 😎)

🔹 Récupérer les valeurs des inputs

let num1 = Number(document.getElementById("num1").value);

📌 Détail très important :

Les valeurs des inputs sont des chaînes de caractères
"2" + "3" → "23" ❌
Number("2") + Number("3") → 5 ✅

Number() = prévention des catastrophes 😅

4️⃣ Choisir l’Opération : Logique if / else ⚙️

if (operation === "+") {
  result = num1 + num2;
} else if (operation === "-") {
  result = num1 - num2;
} else if (operation === "*") {
  result = num1 * num2;
} else if (operation === "/") {
  result = num1 / num2;
}

Que fait-on ici ?

On vérifie quel bouton a été cliqué
On effectue le calcul correspondant
JavaScript dit :
« C’est bon, je m’en occupe. » 😎

5️⃣ Afficher le Résultat 🖥️✨

document.getElementById("result").textContent =
  "Résultat : " + result;

📌 Manipulation du DOM =
Le moment où JavaScript dit :
« HTML, maintenant c’est moi qui parle. » 😄

6️⃣ Piège Critique : La Division par Zéro ⚠️

(Même les maths détestent ça)

if (operation === "/" &amp;&amp; num2 === 0) {
  result = "Impossible de diviser par zéro !";
}

🧠 Réflexe professionnel :
Ne fais jamais totalement confiance à l’utilisateur 😅
Il essaiera forcément quelque chose de bizarre.

7️⃣ Version Plus Propre et Plus Pro : switch–case ✨

switch (operation) {
  case "+":
    result = num1 + num2;
    break;
  case "-":
    result = num1 - num2;
    break;
  case "*":
    result = num1 * num2;
    break;
  case "/":
    result = num2 === 0
      ? "Impossible de diviser par zéro"
      : num1 / num2;
    break;
}

📌 Avantages :

Lisibilité ↑
Clarté du code ↑
Impression « écrit par quelqu’un qui sait ce qu’il fait » ↑

8️⃣ Mini Guide de Debug 🐞🛠️

Si quelque chose ne fonctionne pas :

❓ console.log(num1, num2)
❓ console.log(operation)
❓ Les champs sont-ils vides ?
❓ As-tu utilisé Number() ?

🧠 Le débogage = le super-pouvoir du développeur 🦸‍♂️

9️⃣ Qu’est-ce que ce Mini-Projet t’a Appris ? 🎓

✔️ Récupérer des données depuis le DOM
✔️ La logique des événements
✔️ Écrire des fonctions
✔️ Les structures conditionnelles (if, switch)
✔️ Gérer les erreurs utilisateur

Petit projet → grande confiance 💪

🔟 Idées d’Amélioration (Pour Monter de Niveau) 🚀

➕ Ajouter % (modulo)
🧹 Ajouter un bouton Clear (C)
⌨️ Activer l’utilisation du clavier
🎨 Créer un vrai design de calculatrice avec CSS
📱 Rendre l’interface responsive
🧠 Construire une logique de « vraie » calculatrice à un seul input

Erreurs les Plus Fréquentes ❌

❌ Ne pas utiliser Number()
❌ Calculer avec des inputs vides
❌ Tout écrire sur une seule ligne
❌ Ignorer la lisibilité du code

✔️ Code propre = esprit tranquille 😌

Résumé Court mais Impactant 🧠✨

La calculatrice est l’un des projets en or pour apprendre JavaScript
Simple, mais extrêmement formateur
DOM + Fonctions + Conditions = pack complet
Les mini-projets font de toi un vrai développeur 😎