🧑‍💻 TP JavaScript – Interactions et logique

📝 Exercice 5 : Challenge – Calculatrice simplifiée

On vous donne l'interface d'une calculatrice déjà mise en page (boutons 0–9, +, −, ×, ÷, =, C) et un écran d'affichage une ligne (style CASIO).
Votre mission : compléter le script pour la faire fonctionner avec des réels.

0
💡 Pistes :

Structure du code à compléter :

// ========================================
// CODE DE DÉPART (NE PAS MODIFIER)
// ========================================
const ecran = document.getElementById('ecran');

// Récupération de tous les boutons chiffres
const btn0 = document.getElementById('btn0');
const btn1 = document.getElementById('btn1');
// ... (idem jusqu'à btn9)
const btnDot = document.getElementById('btnDot');
const btnAdd = document.getElementById('btnAdd');
// ... btnSub, btnMul, btnDiv
const btnEgal  = document.getElementById('btnEgal');
const btnC     = document.getElementById('btnC');

// ========================================
// À COMPLÉTER PAR LES ÉLÈVES
// ========================================

// 1) Déclarez vos variables ici
// TODO : let operande = ...
// TODO : let premierNombre = ...
// TODO : let operateur = ...

// 2) Fonction appelée quand on clique sur un chiffre ou le point
function clicChiffre(chiffre) {
    // TODO : ajouter le chiffre à operande
    // TODO : mettre à jour l'écran
}

// 3) Fonction appelée quand on clique sur un opérateur
function clicOperateur(op) {
    // TODO : mémoriser le premier nombre
    // TODO : mémoriser l'opérateur
    // TODO : vider operande
}

// 4) Fonction appelée quand on clique sur =
function clicEgal() {
    // TODO : récupérer le second nombre (parseFloat)
    // TODO : calculer selon operateur
    // TODO : afficher le résultat
}

// 5) Fonction appelée quand on clique sur C
function clicClear() {
    // TODO : tout remettre à zéro
}

// ========================================
// CONNEXION DES BOUTONS (NE PAS MODIFIER)
// ========================================
btn0.addEventListener('click', () => clicChiffre('0'));
btn1.addEventListener('click', () => clicChiffre('1'));
// ... (idem jusqu'à btn9 et btnDot)
btnAdd.addEventListener('click', () => clicOperateur('+'));
// ... btnSub → '-', btnMul → '*', btnDiv → '/'
btnEgal.addEventListener('click', clicEgal);
btnC.addEventListener('click', clicClear);

✅ Correction (à dévoiler après avoir essayé !)

Cliquez pour révéler la correction :

👁 Afficher la correction 
// ========================================
// CORRECTION COMPLÈTE
// ========================================

let operande      = "";
let premierNombre = null;
let operateur     = "";

function clicChiffre(chiffre) {
    // On évite deux points décimaux
    if (chiffre === '.' && operande.includes('.')) return;
    operande += chiffre;
    ecran.textContent = operande;
}

function clicOperateur(op) {
    if (operande === "") return; // rien à faire si pas de nombre saisi
    premierNombre = parseFloat(operande);
    operateur     = op;
    operande      = "";
    ecran.textContent = "0";
}

function clicEgal() {
    if (premierNombre === null || operande === "") return;
    const deuxiemeNombre = parseFloat(operande);
    let resultat;

    if      (operateur === '+') resultat = premierNombre + deuxiemeNombre;
    else if (operateur === '-') resultat = premierNombre - deuxiemeNombre;
    else if (operateur === '*') resultat = premierNombre * deuxiemeNombre;
    else if (operateur === '/') {
        if (deuxiemeNombre === 0) {
            ecran.textContent = "Erreur";
            return;
        }
        resultat = premierNombre / deuxiemeNombre;
    }

    ecran.textContent = resultat;
    // Prépare un éventuel enchaînement de calculs
    operande      = String(resultat);
    premierNombre = null;
    operateur     = "";
}

function clicClear() {
    operande      = "";
    premierNombre = null;
    operateur     = "";
    ecran.textContent = "0";
}