Can someone pls help me with a little algorithm script

hey there community,

just signed up because i’m trying all day to create a script in HTML/JS with ChatGPT. It works quite a bit already but can’t tune it the way I need it.

here is what I’m trying to create, a text generator which follows these rules:

-the string (Z) persists of a 3 random lowercase letter combination (X) and a domain ending (D) (e.g. “eoo . de”)
-(X) contains a double letter (e. g. “oo”)
-(X) only persists of 3 lowercase letters
-(X) can’t persist of 3 equal letters (e. g. “ooo . de” is not correct)
-(X) has a minimum of 1 letter which (D) persists of (e. g. domain .de: “eoo . de” is correct, “coo . de” is not correct)
-no duplicates in string (Z), only unique combinations
-domains (D) can be: "ac", "ad", "ae", "af", "ag", "ai", "al", "am", "ao", "aq", "ar", "as", "at", "au", "aw", "ax", "az", "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi", "bj", "bl", "bm", "bn", "bo", "bq", "br", "bs", "bt", "bv", "bw", "by", "bz", "ca", "cc", "cd", "cf", "cg", "ch", "ci", "ck", "cl", "cm", "cn", "co", "cr", "cu", "cv", "cw", "cx", "cy", "cz", "de", "dj", "dk", "dm", "do", "dz", "ec", "ee", "eg", "eh", "er", "es", "et", "eu", "fi", "fj", "fk", "fm", "fo", "fr", "ga", "gb", "gd", "ge", "gf", "gg", "gh", "gi", "gl", "gm", "gn", "gp", "gq", "gr", "gs", "gt", "gu", "gw", "gy", "hk", "hm", "hn", "hr", "ht", "hu", "id", "ie", "il", "im", "in", "io", "iq", "ir", "is", "it", "je", "jm", "jo", "jp", "ke", "kg", "kh", "ki", "km", "kn", "kp", "kr", "kw", "ky", "kz", "la", "lb", "lc", "li", "lk", "lr", "ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mf", "mg", "mh", "mk", "ml", "mm", "mn", "mo", "mp", "mq", "mr", "ms", "mt", "mu", "mv", "mw", "mx", "my", "mz", "na", "nc", "ne", "nf", "ng", "ni", "nl", "no", "np", "nr", "nu", "nz", "om", "pa", "pe", "pf", "pg", "ph", "pk", "pl", "pm", "pn", "pr", "ps", "pt", "pw", "py", "qa", "re", "ro", "rs", "ru", "rw", "sa", "sb", "sc", "sd", "se", "sg", "sh", "si", "sj", "sk", "sl", "sm", "sn", "so", "sr", "ss", "st", "sv", "sx", "sy", "sz", "tc", "td", "tf", "tg", "th", "tj", "tk", "tl", "tm", "tn", "to", "tr", "tt", "tv", "tw", "tz", "ua", "ug", "uk", "us", "uy", "uz", "va", "vc", "ve", "vg", "vi", "vn", "vu", "wf", "ws", "ye", "yt", "za", "zm", "zw"

-the generator should show checkboxes for each (D) for the user to choose which (D) are used in generation of (Z), if none are selected, generate for all (D)
-the result of generation should be displayed in a table, 1 column for each chosen (D) (try the code from chatgpt to see),
-the ammount of max. possible commbinations should be displayed in the table for each (D)
-there should be a textbox where the user can choose how many (Z) are generated. default should be 10, when entered “0” it should generate all possible combinations
-add a “magic mode” check box, the generator then will only use the letters of (D) to generate (X)

thank you very much for your help. I know this is a script nobody needs, but I’m looking forward to read the code and understand how others are coding.

code from chatgpt:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zeichenfolgen-Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        button {
            margin: 10px 0;
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
        }
        .results {
            margin-top: 20px;
        }
        .checkbox-group {
            margin-bottom: 10px;
            display: table;               /* Verwenden von table */
            width: 100%;
        }
        .checkbox-group label {
            display: inline-block;
            margin: 1px 2px;              /* Sehr enger Abstand zwischen den Checkboxen */
            text-align: left;
            width: auto;                  /* Keine feste Breite, um die Labelgröße zu minimieren */
        }
        .checkbox-group .checkbox-row {
            display: table-row;           /* Jede Zeile ist ein "table-row" */
        }
        .checkbox-group .checkbox-cell {
            display: table-cell;          /* Jede Checkbox wird in einer "table-cell" platziert */
            padding: 0px;                 /* Kein Padding, um den Platz zu minimieren */
        }
        #selectAll {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Zeichenfolgen-Generator</h1>
    <p>
        Wählen Sie die Domain-Endungen aus und klicken Sie auf "Generiere Zeichenfolgen", um 50 zufällige Zeichenfolgen zu erstellen.
    </p>

    <!-- Checkboxen für Domain-Endungen -->
    <div class="checkbox-group">
        <div class="checkbox-row">
            <label><input type="checkbox" id="selectAll" onclick="toggleSelectAll()"> Alle auswählen</label>
        </div>
        <div id="domainCheckBoxes"></div>
    </div>

    <button onclick="generateStrings()">Generiere Zeichenfolgen</button>

    <div class="results" id="results"></div>

    <script>
        // Liste der Domain-Endungen (D)
        const domainEndings = [
            "ac", "ad", "ae", "af", "ag", "ai", "al", "am", "ao", "aq", "ar", "as", "at", "au", "aw", "ax", "az",
            "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi", "bj", "bl", "bm", "bn", "bo", "bq", "br", "bs", "bt", "bv",
            "bw", "by", "bz", "ca", "cc", "cd", "cf", "cg", "ch", "ci", "ck", "cl", "cm", "cn", "co", "cr", "cu", "cv",
            "cw", "cx", "cy", "cz", "de", "dj", "dk", "dm", "do", "dz", "ec", "ee", "eg", "eh", "er", "es", "et", "eu",
            "fi", "fj", "fk", "fm", "fo", "fr", "ga", "gb", "gd", "ge", "gf", "gg", "gh", "gi", "gl", "gm", "gn", "gp",
            "gq", "gr", "gs", "gt", "gu", "gw", "gy", "hk", "hm", "hn", "hr", "ht", "hu", "id", "ie", "il", "im", "in", 
            "io", "iq", "ir", "is", "it", "je", "jm", "jo", "jp", "ke", "kg", "kh", "ki", "km", "kn", "kp", "kr", "kw", 
            "ky", "kz", "la", "lb", "lc", "li", "lk", "lr", "ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mf", 
            "mg", "mh", "mk", "ml", "mm", "mn", "mo", "mp", "mq", "mr", "ms", "mt", "mu", "mv", "mw", "mx", "my", "mz", 
            "na", "nc", "ne", "nf", "ng", "ni", "nl", "no", "np", "nr", "nu", "nz", "om", "pa", "pe", "pf", "pg", "ph", 
            "pk", "pl", "pm", "pn", "pr", "ps", "pt", "pw", "py", "qa", "re", "ro", "rs", "ru", "rw", "sa", "sb", "sc", 
            "sd", "se", "sg", "sh", "si", "sj", "sk", "sl", "sm", "sn", "so", "sr", "ss", "st", "sv", "sx", "sy", "sz", 
            "tc", "td", "tf", "tg", "th", "tj", "tk", "tl", "tm", "tn", "to", "tr", "tt", "tv", "tw", "tz", "ua", "ug", 
            "uk", "us", "uy", "uz", "va", "vc", "ve", "vg", "vi", "vn", "vu", "wf", "ws", "ye", "yt", "za", "zm", "zw"
        ];

        // Funktion, um die Checkboxen für die Domain-Endungen zu generieren
        function generateDomainCheckboxes() {
            const checkboxesDiv = document.getElementById("domainCheckBoxes");
            let rowDiv = document.createElement('div');
            rowDiv.classList.add('checkbox-row');
            let counter = 0;

            domainEndings.forEach(domain => {
                // Neue Zeile beginnen, wenn zu viele Checkboxen in der aktuellen Zeile sind
                if (counter === 20) { // Anzahl auf 12 erhöhen
                    checkboxesDiv.appendChild(rowDiv);  // Aktuelle Zeile zu div hinzufügen
                    rowDiv = document.createElement('div'); // Neue Zeile
                    rowDiv.classList.add('checkbox-row');
                    counter = 0;  // Zähler zurücksetzen
                }

                const checkboxLabel = document.createElement("label");
                checkboxLabel.innerHTML = `<input type="checkbox" class="domain-checkbox" value="${domain}"> .${domain}</label>`;
                const checkboxCell = document.createElement('div');
                checkboxCell.classList.add('checkbox-cell');
                checkboxCell.appendChild(checkboxLabel);
                rowDiv.appendChild(checkboxCell);
                counter++;
            });

            // Falls noch Checkboxen übrig sind, letzte Zeile hinzufügen
            if (rowDiv.innerHTML) {
                checkboxesDiv.appendChild(rowDiv);
            }
        }

        // Funktion, um eine zufällige Buchstabenkombination zu generieren
        function generateCombination(domain) {
            const letters = "abcdefghijklmnopqrstuvwxyz";
            const doubleLetter = domain[Math.floor(Math.random() * domain.length)];
            const remainingLetter = letters.replace(doubleLetter, '').charAt(Math.floor(Math.random() * 25));

            // Generiere Kombination mit Doppelbuchstaben
            const position = Math.floor(Math.random() * 2);
            let combination = doubleLetter + doubleLetter;
            if (position === 0) {
                combination = remainingLetter + combination;
            } else {
                combination = combination + remainingLetter;
            }

            return combination;
        }

        // Funktion, um 50 Zeichenfolgen zu generieren
        function generateStrings() {
            const selectedDomains = getSelectedDomains();
            const results = [];
            const usedCombinations = new Set();

            // Generiere maximal 50 eindeutige Zeichenfolgen
            while (results.length < 50 && usedCombinations.size < 50) {
                const domain = selectedDomains[Math.floor(Math.random() * selectedDomains.length)];
                let combination = generateCombination(domain);
                const generatedString = combination + "." + domain;

                if (!usedCombinations.has(generatedString)) {
                    usedCombinations.add(generatedString);
                    results.push(generatedString);
                }
            }

            // Ergebnisse anzeigen
            const resultsDiv = document.getElementById("results");
            if (results.length === 0) {
                resultsDiv.innerHTML = "<p>Es konnten keine Zeichenfolgen generiert werden. Versuchen Sie es später erneut.</p>";
            } else {
                resultsDiv.innerHTML = results.map((res) => `<p>${res}</p>`).join("");
            }
        }

        // Funktion, um alle selektierten Domain-Endungen zu erhalten
        function getSelectedDomains() {
            const checkboxes = document.querySelectorAll('.domain-checkbox');
            const selectedDomains = [];
            checkboxes.forEach((checkbox) => {
                if (checkbox.checked) {
                    selectedDomains.push(checkbox.value);
                }
            });

            // Wenn keine Domain ausgewählt ist, alle verwenden
            if (selectedDomains.length === 0) {
                return domainEndings;
            }

            return selectedDomains;
        }

        // Funktion, um alle Domain-Endungen auszuwählen oder abzuwählen
        function toggleSelectAll() {
            const isChecked = document.getElementById("selectAll").checked;
            const checkboxes = document.querySelectorAll('.domain-checkbox');
            checkboxes.forEach((checkbox) => {
                checkbox.checked = isChecked;
            });
        }

        // Initialisieren
        generateDomainCheckboxes();
    </script>
</body>
</html>

My only opinion on this is it might make more sense to link html, css, and js instead of an SPA. What are you using to run the code?

thanks for your answer. I put the code in an empty .html file and run it with firefox