Étape 2 : HTML - Options et Contrôles

Pour générer un bon mot de passe, l’utilisateur doit pouvoir choisir ce qu’il veut : longueur, majuscules, chiffres, symboles.

Copiez ce code à la suite du .result-container, toujours à l’intérieur de .container.

<!-- Zone des réglages -->
<div class="settings">
    <!-- Longueur du mot de passe -->
    <div class="setting">
        <label>Longueur du mot de passe</label>
        <div class="range-container">
            <input type="range" id="length" min="4" max="24" value="12" />
            <span id="length-val">12</span>
        </div>
    </div>

    <!-- Options (Cases à cocher) -->
    <div class="setting">
        <label>Inclure des majuscules</label>
        <input type="checkbox" id="uppercase" checked />
    </div>

    <div class="setting">
        <label>Inclure des minuscules</label>
        <input type="checkbox" id="lowercase" checked />
    </div>

    <div class="setting">
        <label>Inclure des nombres</label>
        <input type="checkbox" id="numbers" checked />
    </div>

    <div class="setting">
        <label>Inclure des symboles</label>
        <input type="checkbox" id="symbols" checked />
    </div>
</div>

<!-- Gros bouton d'action -->
<button class="btn btn-large" id="generate">Générer le mot de passe</button>

Points clés

• <input type="range"> : Une glissière pour choisir la longueur (de 4 à 24 caractères).
• checked : Par défaut, on coche toutes les cases pour encourager les mots de passe forts.
• Ids : length, uppercase, numbers… Ces IDs sont essentiels pour notre JavaScript.

La structure est prête, mais c’est encore très moche. Le CSS va rendre ça “Hacker Style”.