Cara Membuat Password Generator dengan JavaScript untuk Pemula

MWI – Hai sobat pembelajar web MuSa, yuk kita lanjutkan materi JavaScript. Selamat datang kembali di seri belajar pemrograman web! Setelah sebelumnya kita membahas dasar-dasar JavaScript dan membuat To-Do List, kali ini kita akan meningkatkan sedikit tantangannya. Kita akan membuat Aplikasi Generator Kata Sandi Acak (Password Generator).

Aplikasi ini sangat berguna di dunia nyata dan akan mengenalkan Anda pada konsep penggabungan string (string concatenation), manipulasi array tingkat lanjut, serta cara menyalin teks secara otomatis ke clipboard.

Mari kita mulai pembahasannya dari nol!

Konsep Tambahan yang kita Pelajari

Sebelum masuk ke kode, ada beberapa hal baru yang akan kita pelajari pada proyek ini:

1. Gabungan Karakter (String Pool): Mengumpulkan huruf besar, huruf kecil, angka, dan simbol ke dalam satu string besar sebagai sumber acak.
2. Perulangan for untuk Karakter: Mengambil karakter secara acak dari sumber tersebut sebanyak panjang password yang diinginkan oleh pengguna.
3. Clipboard API (navigator.clipboard): Fitur modern JavaScript untuk membuat tombol “Salin” (Copy) otomatis.

🛠️ Langkah Praktis Pembuatan Kode

Buatlah dua file seperti biasa di dalam folder komputer Anda: index.html dan script.js.

1. File HTML (index.html)

Simpan kode di bawah ini dengan nama index.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplikasi Password Generator JavaScript</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0px 4px 15px rgba(0,0,0,0.1);
            width: 320px;
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        .display-box {
            display: flex;
            background: #e9ecef;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 15px;
            align-items: center;
            justify-content: space-between;
        }
        #passwordDisplay {
            font-family: monospace;
            font-size: 16px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        button.copy-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .input-group {
            margin-bottom: 15px;
            font-size: 14px;
            color: #555;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        input[type="number"] {
            width: 50px;
            padding: 5px;
            font-size: 14px;
        }
        .generate-btn {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
        }
        .generate-btn:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>

    <div class="card">
        <h2>Password Generator</h2>
        
        <!-- Kotak Tampilan Hasil Password -->
        <div class="display-box">
            <span id="passwordDisplay">Klik Buat Password</span>
            <button class="copy-btn" id="copyBtn" title="Salin Password">📋</button>
        </div>

        <!-- Pengaturan Panjang Password -->
        <div class="input-group">
            <label for="panjangInput">Panjang Karakter:</label>
            <input type="number" id="panjangInput" value="10" min="6" max="20">
        </div>

        <!-- Tombol Eksekusi -->
        <button class="generate-btn" id="generateBtn">Buat Password</button>
    </div>

    <!-- Menghubungkan file JavaScript -->
    <script src="script.js"></script>
</body>
</html>

2. File JavaScript (script.js)

Buat file baru bernama script.js lalu masukkan kode berikut:

// 1. Mengambil elemen dari HTML menggunakan DOM
const passwordDisplay = document.getElementById("passwordDisplay");
const panjangInput = document.getElementById("panjangInput");
const generateBtn = document.getElementById("generateBtn");
const copyBtn = document.getElementById("copyBtn");

// 2. Kumpulan karakter yang akan diacak (Huruf, Angka, dan Simbol)
const karakterChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%&*!";

// 3. Event Listener saat tombol "Buat Password" diklik
generateBtn.addEventListener("click", function() {
    let panjangPassword = parseInt(panjangInput.value);
    let passwordAktif = "";

    // Perulangan untuk mengambil karakter acak sebanyak yang diminta
    for (let i = 0; i < panjangPassword; i++) {
        let indexAcak = Math.floor(Math.random() * karakterChars.length);
        passwordAktif += karakterChars[indexAcak];
    }

    // Tampilkan password ke dalam elemen HTML
    passwordDisplay.textContent = passwordAktif;
    passwordDisplay.style.color = "#28a745";
});

// 4. Fitur Tambahan: Menyalin password otomatis ke Clipboard
copyBtn.addEventListener("click", function() {
    let teksPassword = passwordDisplay.textContent;

    if (teksPassword === "Klik Buat Password" || teksPassword === "") {
        alert("Belum ada password yang dibuat!");
        return;
    }

    // Perintah modern untuk menyalin teks ke memori komputer/HP
    navigator.clipboard.writeText(teksPassword).then(function() {
        alert("Password berhasil disalin ke clipboard: " + teksPassword);
    });
});

Penjelasan Alur Kode

1. Variabel karakterChars: Berisi seluruh gabungan huruf besar, kecil, angka, dan simbol spesial. Variabel ini menjadi “gudang” bahan utama pembuatan password.
2. Math.random() & Math.length: Digunakan untuk memilih nomor urut karakter secara acak dari dalam gudang karakterChars.
3. Perulangan for: Berjalan sesuai angka yang diatur pengguna di kotak input (misal 10 kali), lalu menggabungkan hasilnya satu per satu ke dalam variabel passwordAktif.
4. navigator.clipboard.writeText(...): Baris kode tingkat menengah yang berguna untuk meniru fungsi tombol “Copy” otomatis tanpa harus memblok teks secara manual.

Kesimpulan

Membuat Password Generator dengan JavaScript melatih kita untuk memahami logika pengulangan bersyarat, pengelolaan variabel string, serta memanfaatkan fitur Clipboard API bawaan browser. Proyek aplikasi standar ini sangat cocok kita jadikan portofolio latihan bagi siswa Kelas X program keahlian WebPro. (ms).