ChatGPTでサービス作成①パスワード生成

ちょっとしたWebサービスをchatGPTに作らせるシリーズです。
第一弾はランダムなパスワードを自動生成してくれるツール。

これくらいのサービスだと、ちょっとお願いするだけで作ってくるのは末恐ろしい・・・
ソースコードはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>パスワード生成サービス</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="password-generator">
        <h2>パスワード生成サービス</h2>
        <label for="password-length">パスワード長:</label>
        <input type="number" id="password-length" min="8" max="100" value="12"><br>

        <label for="include-uppercase">大文字を含む:</label>
        <input type="checkbox" id="include-uppercase" checked><br>

        <label for="include-lowercase">小文字を含む:</label>
        <input type="checkbox" id="include-lowercase" checked><br>

        <label for="include-numbers">数字を含む:</label>
        <input type="checkbox" id="include-numbers" checked><br>

        <label for="include-symbols">記号を含む:</label>
        <input type="checkbox" id="include-symbols" checked><br>

        <label for="exclude-similar">類似した文字を除く:</label>
        <input type="checkbox" id="exclude-similar"><br>

        <label for="exclude-ambiguous">曖昧な文字を除く:</label>
        <input type="checkbox" id="exclude-ambiguous"><br>

        <button onclick="generatePassword()">パスワード生成</button>
        <p>生成されたパスワード: <span id="generated-password"></span></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

// script.js
function generatePassword() {
    const length = document.getElementById('password-length').value;
    const includeUppercase = document.getElementById('include-uppercase').checked;
    const includeLowercase = document.getElementById('include-lowercase').checked;
    const includeNumbers = document.getElementById('include-numbers').checked;
    const includeSymbols = document.getElementById('include-symbols').checked;
    const excludeSimilar = document.getElementById('exclude-similar').checked;
    const excludeAmbiguous = document.getElementById('exclude-ambiguous').checked;

    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
    const numbers = '0123456789';
    const symbols = '!@#$%^&*()_+{}:"<>?|[];\',./`~';
    const similarCharacters = /[ilLI|`oO0]/g;
    const ambiguousCharacters = /[{}[\]()\/\'"`~,;:.<>\\]/g;

    let characters = '';
    if (includeUppercase) characters += uppercase;
    if (includeLowercase) characters += lowercase;
    if (includeNumbers) characters += numbers;
    if (includeSymbols) characters += symbols;
    if (excludeSimilar) characters = characters.replace(similarCharacters, '');
    if (excludeAmbiguous) characters = characters.replace(ambiguousCharacters, '');

    let password = '';
    for (let i = 0; i < length; i++) {
        password += characters.charAt(Math.floor(Math.random() * characters.length));
    }

    document.getElementById('generated-password').textContent = password;
}

しばらくはこんな感じで、単発のちっちゃいサービスをお試しで色々作っていこうと思います。