Étape 4 : JS - Logique d’Affichage (Partie 1)

Nous allons, comme pour la Todo App, utiliser une Classe pour gérer notre calculatrice. L’objectif de cette étape est de faire fonctionner l’affichage des chiffres.

1. La Classe Calculator

Ouvrez script.js.

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear(); // On commence par tout effacer
    }

    // Remettre à zéro (AC)
    clear() {
        this.currentOperand = '';
        this.previousOperand = '';
        this.operation = undefined;
    }

    // Effacer le dernier chiffre (DEL)
    delete() {
        // On convertit en String pour pouvoir couper le dernier caractère
        this.currentOperand = this.currentOperand.toString().slice(0, -1);
    }

    // Ajouter un chiffre à l'écran
    appendNumber(number) {
        // Limitation : on ne peut avoir qu'un seul point décimal
        if (number === '.' && this.currentOperand.includes('.')) return;

        // On concatène (ajoute à la suite) en texte, pas en maths (1 + 1 = 11 ici)
        this.currentOperand = this.currentOperand.toString() + number.toString();
    }

    // Mettre à jour l'écran HTML
    updateDisplay() {
        this.currentOperandTextElement.innerText = this.currentOperand;
        this.previousOperandTextElement.innerText = this.previousOperand;
    }
}

2. Connecter les Boutons (Event Listeners)

Nous devons sélectionner tous nos boutons et les relier à la classe.

// Sélection des éléments HTML
const numberButtons = document.querySelectorAll('[data-num]');
const operationButtons = document.querySelectorAll('[data-op]');
const equalsButton = document.querySelector('[data-action="compute"]');
const deleteButton = document.querySelector('[data-action="delete"]');
const allClearButton = document.querySelector('[data-action="clear"]');
const previousOperandTextElement = document.getElementById('previous-operand');
const currentOperandTextElement = document.getElementById('current-operand');

// Création de l'instance
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);

// Gestion des Chiffres
numberButtons.forEach((button) => {
    button.addEventListener('click', () => {
        // On récupère le chiffre du dataset (data-num)
        calculator.appendNumber(button.dataset.num);
        calculator.updateDisplay();
    });
});

// Gestion des Boutons AC et DEL
allClearButton.addEventListener('click', () => {
    calculator.clear();
    calculator.updateDisplay();
});

deleteButton.addEventListener('click', () => {
    calculator.delete();
    calculator.updateDisplay();
});

Testez ! Vous pouvez maintenant cliquer sur les chiffres et ils s’affichent à l’écran. AC et DEL fonctionnent aussi. Les opérations ne font rien pour l’instant.