Membuat Aplikasi Password Generator dengan JavaScript

Sep 14, 2024

—

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

Membuat Aplikasi Password Generator dengan JavaScript

Artikel Terbaru ⭐