Étape 5 : JS - Logique de Calcul (Partie 2)

C’est la partie finale. Nous allons permettre à la calculatrice de… calculer.

1. Choisir une Opération

Ajoutez cette méthode dans la classe Calculator.

    chooseOperation(operation) {
        // Si l'écran est vide, on ne fait rien
        if (this.currentOperand === '') return;

        // Si on avait déjà un calcul en attente, on l'exécute d'abord
        if (this.previousOperand !== '') {
            this.compute();
        }

        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = ''; // On vide l'écran principal pour taper le 2ème nombre
    }

2. Faire le Calcul (Compute)

C’est le cerveau maths.

    compute() {
        let computation;
        const prev = parseFloat(this.previousOperand);
        const current = parseFloat(this.currentOperand);

        // Si ce n'est pas des nombres, on arrête
        if (isNaN(prev) || isNaN(current)) return;

        switch (this.operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current;
                break;
            case '*':
                computation = prev * current;
                break;
            case '÷':
                computation = prev / current;
                break;
            default:
                return;
        }

        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = '';
    }

3. Améliorer l’Affichage (Visualiser l’opérateur)

Modifiez la méthode updateDisplay existante pour afficher l’opérateur en haut.

    updateDisplay() {
        this.currentOperandTextElement.innerText = this.currentOperand;
        if (this.operation != null) {
            // Affiche "12 +" en haut
            this.previousOperandTextElement.innerText =
                `${this.previousOperand} ${this.operation}`;
        } else {
            this.previousOperandTextElement.innerText = '';
        }
    }

4. Connecter le reste des boutons

Ajoutez ces Event Listeners à la fin du fichier script.js :

// Opérations
operationButtons.forEach((button) => {
    button.addEventListener('click', () => {
        calculator.chooseOperation(button.dataset.op);
        calculator.updateDisplay();
    });
});

// Égal
equalsButton.addEventListener('click', () => {
    calculator.compute();
    calculator.updateDisplay();
});

---

Félicitations !

Vous avez terminé votre Calculatrice GreenCalc Pro. Elle gère :

• L’addition, soustraction, multiplication, division.
• L’effacement (AC) et la suppression (DEL).
• La concaténation d’opérations (5 + 5 + 2 =).
• Et elle a un look d’enfer !