Étape 2 : HTML - Logique d’affichage

Pour ce projet, le HTML est déjà très complet avec l’étape 1. Analysons pourquoi nous avons structuré l’affichage ainsi :

<div class="timer-display">00:00:00<span class="milliseconds">.00</span></div>

• Heures:Minutes:Secondes (00:00:00) : C’est la partie principale.
• Millisecondes (.00) : Nous l’avons mis dans un <span> séparé. Pourquoi ?
  • Pour pouvoir le styliser différemment (plus petit, moins visible).
  • Pour donner un effet “Pro”.

Les Boutons

Nous avons 3 boutons, mais ils ont des rôles doubles (State Machine) :

1. Start : Deviendra “Stop” quand le chrono tourne.
2. Tour (Lap) : Permet de figer un temps intermédiaire sans arrêter le chrono global.
3. Reset : Remet tout à zéro, mais seulement si le chrono est arrêté (pour éviter les accidents).

C’est une interface classique de chronomètre smartphone que tout le monde connaît.

Pas de modification HTML à cette étape, on passe au design !