JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur de chaîne</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #form {
            margin-bottom: 20px;
        }
        #output {
            font-weight: bold;
        }
        #errorMessage {
            color: red;
            display: none;
        }
        #copiedMessage {
            color: green;
            display: none;
        }
    </style>
</head>
<body>
    <form id="form">
        <label for="length">Longueur de la chaîne:</label>
        <input type="number" id="length" name="length" min="1" required>
        <button type="submit">Générer</button>
    </form>
    <div id="errorMessage">Erreur : Longueur invalide.</div>
    <div id="output"></div>
    <div id="copiedMessage">Copié !</div>
    <script src="script.js"></script>
</body>
</html>

JavaScript

document.getElementById('form').addEventListener('submit', function(event) {
    event.preventDefault();

    const length = parseInt(document.getElementById('length').value);
    const allowedLetters = 'abcdefghijkmnopqrstuvwxz'; // Exclut 'o', 'l', 'g', 'q', 'j'
    const digits = '123456789'; // Chiffres de 1 à 9

    // Vérifie que la longueur est valide
    if (length < 1) {
        document.getElementById('errorMessage').textContent = 'Erreur : Longueur invalide.';
        document.getElementById('errorMessage').style.display = 'block';
        return;
    } else {
        document.getElementById('errorMessage').style.display = 'none';
    }

    const numDigits = Math.floor(length / 3); // Ajuste cette proportion selon les besoins
    const numLetters = length - numDigits;

    // Si le nombre de chiffres est trop élevé pour la longueur donnée, affiche une erreur
    if (numDigits > length - numDigits) {
        document.getElementById('errorMessage').textContent = 'Erreur : Trop de chiffres pour cette longueur.';
        document.getElementById('errorMessage').style.display = 'block';
        return;
    }

    // Crée les listes de lettres et de chiffres
    let letters = Array(numLetters).fill(null).map(() => allowedLetters[Math.floor(Math.random() * allowedLetters.length)]);
    let digitsList = Array(numDigits).fill(null).map(() => digits[Math.floor(Math.random() * digits.length)]);

    let result = [];
    while (letters.length > 0 || digitsList.length > 0) {
        // Choisir un caractère en s'assurant de ne pas avoir deux chiffres consécutifs
        if (result.length === 0 || !digits.includes(result[result.length - 1])) {
            if (digitsList.length > 0 && (letters.length === 0 || Math.random() < 0.5)) {
                result.push(digitsList.shift());
            } else if (letters.length > 0) {
                result.push(letters.shift());
            }
        } else {
            if (letters.length > 0) {
               ...