Étape 1 : Initialisation du Chronomètre

Objectif : Créer un chronomètre précis au 1/100ème de seconde, avec des tours (laps). Thème : Dark Sport (Noir, Gris et Rouge Néon).

1. Création des fichiers

Créez un dossier chronometer et vos trois fichiers :

1. index.html
2. style.css
3. script.js

2. Structure HTML de base

Comme d’habitude, on met en place le squelette. Nous utiliserons une police numérique “monospaced” pour que les chiffres ne sautent pas quand ils changent (très important pour un chrono).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Chrono Sport Pro</title>
        <!-- Police 'Orbitron' pour un look digital futuriste -->
        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="container">
            <!-- L'affichage principal -->
            <div class="timer-display">00:00:00<span class="milliseconds">.00</span></div>

            <!-- Les contrôles -->
            <div class="controls">
                <button id="startStopBtn" class="btn start">Start</button>
                <button id="lapBtn" class="btn lap" disabled>Tour</button>
                <button id="resetBtn" class="btn reset" disabled>Reset</button>
            </div>

            <!-- Liste des tours -->
            <ul id="lapsList" class="laps">
                <!-- Les tours s'afficheront ici -->
            </ul>
        </div>

        <script src="script.js"></script>
    </body>
</html>

Notons l’usage de disabled sur les boutons “Tour” et “Reset” : au départ, on ne peut pas faire de tour ni reset un chrono à zéro.