Membuat Aplikasi Password Generator dengan JavaScript

Membuat Aplikasi Password Generator dengan JavaScript

Selamat pagi sobat webbiz, kali ini kita akan Membuat Aplikasi Password Generator dengan JavaScript yang memudahkan anda membuat password dengan 4 opsi sehingga password anda lebih terjaga dan tidak mudah terlacak.

See the Pen Password Generator by WebbizID (@De-Orchids) on CodePen.

JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
       <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }

        .container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .btn {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Password Generator</h1>
        <div class="form-group">
            <label for="length">Password Length:</label>
            <input type="number" id="length" class="form-control" value="12" min="1" max="20">
        </div>
        <div class="form-group">
            <label for="includeUppercase">Include Uppercase Letters:</label>
            <input type="checkbox" id="includeUppercase" checked>
        </div>
        <div class="form-group">
            <label for="includeNumbers">Include Numbers:</label>
            <input type="checkbox" id="includeNumbers" checked>
        </div>
        <div class="form-group">
            <label for="includeSymbols">Include Symbols:</label>
            <input type="checkbox" id="includeSymbols" checked>
        </div>
        <button class="btn btn-primary" id="generate">Generate Password</button>
        <h2 class="mt-4">Generated Password:</h2>
        <input type="text" id="password" class="form-control" readonly>
    </div>

    <script>
        document.getElementById('generate').addEventListener('click', function() {
            const length = document.getElementById('length').value;
            const includeUppercase = document.getElementById('includeUppercase').checked;
            const includeNumbers = document.getElementById('includeNumbers').checked;
            const includeSymbols = document.getElementById('includeSymbols').checked;

            const lowercase = 'abcdefghijklmnopqrstuvwxyz';
            const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            const numbers = '0123456789';
            const symbols = '!@#$%^&*()_+[]{}|;:,.<>?';

            let characters = lowercase;
            if (includeUppercase) characters += uppercase;
            if (includeNumbers) characters += numbers;
            if (includeSymbols) characters += symbols;

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

            document.getElementById('password').value = password;
        });
    </script>
</body>
</html>
JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *