Étape 2 : Structure HTML de la Calculatrice

L’interface d’une calculatrice est une grille. Nous avons besoin d’un écran en haut et de touches en dessous.

1. Le Conteneur

Dans le <body> de index.html, ajoutez un conteneur principal.

<div class="calculator">
    <!-- L'écran d'affichage -->
    <div class="display">
        <div class="previous-operand" id="previous-operand"></div>
        <div class="current-operand" id="current-operand">0</div>
    </div>

    <!-- Les touches -->
    <div class="keys-grid">
        <!-- Rangée 1 -->
        <button class="btn span-two" data-action="clear">AC</button>
        <button class="btn" data-action="delete">DEL</button>
        <button class="btn btn-op" data-op="÷">÷</button>

        <!-- Rangée 2 -->
        <button class="btn" data-num="7">7</button>
        <button class="btn" data-num="8">8</button>
        <button class="btn" data-num="9">9</button>
        <button class="btn btn-op" data-op="*">×</button>

        <!-- Rangée 3 -->
        <button class="btn" data-num="4">4</button>
        <button class="btn" data-num="5">5</button>
        <button class="btn" data-num="6">6</button>
        <button class="btn btn-op" data-op="-">-</button>

        <!-- Rangée 4 -->
        <button class="btn" data-num="1">1</button>
        <button class="btn" data-num="2">2</button>
        <button class="btn" data-num="3">3</button>
        <button class="btn btn-op" data-op="+">+</button>

        <!-- Rangée 5 -->
        <button class="btn" data-num=".">.</button>
        <button class="btn" data-num="0">0</button>
        <button class="btn span-two btn-eq" data-action="compute">=</button>
    </div>
</div>

Explications

• L’écran : On sépare l’opérande précédent (le petit chiffre en haut) de l’actuel (le gros chiffre en bas).
• Data Attributes : Comme pour le projet Todo, on utilise data-num pour les chiffres et data-op pour les opérations. Cela nous évitera de lire le texte du bouton en JS, ce qui est plus robuste.
• Classes : span-two servira à faire prendre 2 places à certains boutons (AC et =).

Pour l’instant, c’est une liste de boutons moches. Le CSS va tout changer !