Étape 4 : JS - La Logique de Génération

C’est ici que la magie opère.

1. Les Dictionnaires de Caractères

Pour générer un mot de passe, il nous faut des “ingrédients”. Ouvrez script.js.

// Nos "ingrédients"
const randomFunc = {
    lower: getRandomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol,
};

// Fonctions génératrices basées sur le code ASCII
// (Voir table ASCII : http://www.asciitable.com/)

function getRandomLower() {
    // 97 est le code de 'a'. Il y a 26 lettres.
    return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
    // 65 est le code de 'A'.
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
    // 48 est le code de '0'.
    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
    const symbols = '!@#$%^&*(){}[]=<>/,.';
    return symbols[Math.floor(Math.random() * symbols.length)];
}

2. Sélection des Éléments DOM

const resultEl = document.getElementById('result');
const lengthEl = document.getElementById('length');
const lengthValEl = document.getElementById('length-val'); // Le span qui affiche "12"
const uppercaseEl = document.getElementById('uppercase');
const lowercaseEl = document.getElementById('lowercase');
const numbersEl = document.getElementById('numbers');
const symbolsEl = document.getElementById('symbols');
const generateEl = document.getElementById('generate');
const clipboardEl = document.getElementById('clipboard');

// Petit bonus : mettre à jour le chiffre quand on bouge le slider
lengthEl.addEventListener('input', (e) => {
    lengthValEl.innerText = e.target.value;
});

3. La Fonction Principale : generatePassword

C’est le cœur de l’algorithme.

generateEl.addEventListener('click', () => {
    // On convertit la valeur textuelle "12" en nombre 12
    const length = +lengthEl.value;

    // On vérifie ce qui est coché
    const hasLower = lowercaseEl.checked;
    const hasUpper = uppercaseEl.checked;
    const hasNumber = numbersEl.checked;
    const hasSymbol = symbolsEl.checked;

    // On appelle la fonction de génération
    resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});

function generatePassword(lower, upper, number, symbol, length) {
    let generatedPassword = '';

    // On compte combien de types sont cochés
    const typesCount = lower + upper + number + symbol;

    // Tableau des types cochés
    // Astuce : filter(Boolean) élimine les 'false'
    const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter((item) => Object.values(item)[0]);

    // Sécurité : si rien n'est coché
    if (typesCount === 0) {
        return 'Cochez une case !';
    }

    // Boucle de génération
    for (let i = 0; i < length; i += typesCount) {
        typesArr.forEach((type) => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }

    // On coupe à la bonne longueur (car la boucle peut dépasser un peu)
    // Et on mélange un peu (optionnel mais recommandé)
    return generatedPassword.slice(0, length);
}

4. Copier dans le presse-papier

Dernière fonctionnalité indispensable !

clipboardEl.addEventListener('click', () => {
    const password = resultEl.innerText;

    if (!password || password === 'Cochez une case !') return;

    // API moderne pour copier
    navigator.clipboard.writeText(password).then(() => {
        alert('Mot de passe copié !');
    });
});

---

Terminé !

Vous avez un générateur fonctionnel. Essayez de bouger le slider, décochez des cases, et cliquez sur FONCTIONNER. Le texte vert sur fond noir donne vraiment l’impression d’être dans un film de hackers.