Membuat Aplikasi Generator Password Aman dengan JavaScript
Membuat Aplikasi Generator Password Aman dengan JavaScript
Dipublikasikan: Juli 2026
Keamanan digital dimulai dari password yang kuat. Tutorial ini akan memandu Anda membuat password generator yang bisa menghasilkan password acak dengan berbagai kriteria — panjang, huruf besar, huruf kecil, angka, dan simbol.
Fitur
- Atur panjang password (4-32 karakter)
- Opsi huruf besar/kecil, angka, simbol
- Tombol copy ke clipboard
- Indikator kekuatan password
Kode Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family:'Segoe UI',Arial,sans-serif;
background:linear-gradient(135deg,#0c0c1d,#111133);
min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px;
}
.container {
background:#1a1a2e; border-radius:20px; padding:35px;
box-shadow:0 20px 60px rgba(0,0,0,0.5); width:100%; max-width:460px;
}
h1 { text-align:center; color:#e0e0ff; margin-bottom:5px; font-size:26px; }
.subtitle { text-align:center; color:#8888aa; margin-bottom:25px; font-size:14px; }
.password-display {
background:#0f0f23; padding:18px; border-radius:12px;
display:flex; align-items:center; justify-content:space-between; margin-bottom:25px;
border:2px solid #2a2a4a;
}
.password-display span { color:#fff; font-size:20px; font-family:monospace; word-break:break-all; }
.password-display button {
background:#4a4ae0; color:#fff; border:none; padding:10px 16px;
border-radius:8px; cursor:pointer; font-size:14px; white-space:nowrap; margin-left:10px;
}
.password-display button:hover { background:#5a5af0; }
.settings { margin-bottom:25px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.setting-row label { color:#ccccee; font-size:15px; }
.setting-row input[type="number"] {
width:70px; padding:8px; background:#0f0f23; border:2px solid #2a2a4a;
border-radius:8px; color:#fff; font-size:16px; text-align:center;
}
.setting-row input[type="checkbox"] {
width:20px; height:20px; accent-color:#4a4ae0;
}
.generate-btn {
width:100%; padding:16px; background:#4a4ae0; color:#fff;
border:none; border-radius:12px; cursor:pointer; font-size:17px; font-weight:600;
}
.generate-btn:hover { background:#5a5af0; }
.strength { margin-top:20px; padding:12px; border-radius:10px; text-align:center; font-weight:600; display:none; }
.strength.weak { display:block; background:#2d1b1b; color:#ff6b6b; }
.strength.medium { display:block; background:#2d2b1b; color:#fdcb6e; }
.strength.strong { display:block; background:#1b2d1b; color:#00b894; }
.toast {
display:none; position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
background:#00b894; color:#fff; padding:14px 28px; border-radius:12px; font-size:15px;
}
</style>
</head>
<body>
<div class="container">
<h1>🔠Password Generator</h1>
<div class="subtitle">Buat password aman dalam satu klik</div>
<div class="password-display">
<span id="passwordDisplay">Klik Generate</span>
<button onclick="copyPassword()">Copy</button>
</div>
<div class="settings">
<div class="setting-row">
<label>Panjang Password</label>
<input type="number" id="length" value="12" min="4" max="32" />
</div>
<div class="setting-row">
<label>Huruf Besar (A-Z)</label>
<input type="checkbox" id="uppercase" checked />
</div>
<div class="setting-row">
<label>Huruf Kecil (a-z)</label>
<input type="checkbox" id="lowercase" checked />
</div>
<div class="setting-row">
<label>Angka (0-9)</label>
<input type="checkbox" id="numbers" checked />
</div>
<div class="setting-row">
<label>Simbol (!@#$%&*)</label>
<input type="checkbox" id="symbols" checked />
</div>
</div>
<button class="generate-btn" onclick="generate()">Generate Password</button>
<div class="strength" id="strength"></div>
</div>
<div class="toast" id="toast">Password berhasil disalin! 📋</div>
<script>
function generate() {
const len = parseInt(document.getElementById('length').value);
const hasUpper = document.getElementById('uppercase').checked;
const hasLower = document.getElementById('lowercase').checked;
const hasNum = document.getElementById('numbers').checked;
const hasSym = document.getElementById('symbols').checked;
if (!hasUpper && !hasLower && !hasNum && !hasSym) return alert('Pilih minimal satu jenis karakter');
const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lower = 'abcdefghijklmnopqrstuvwxyz';
const nums = '0123456789';
const syms = '!@#$%^&*()_+-=[]{}|;:,.<>?';
let chars = '';
if (hasUpper) chars += upper;
if (hasLower) chars += lower;
if (hasNum) chars += nums;
if (hasSym) chars += syms;
let password = '';
// Ensure at least one of each selected type
if (hasUpper) password += upper[Math.floor(Math.random()*upper.length)];
if (hasLower) password += lower[Math.floor(Math.random()*lower.length)];
if (hasNum) password += nums[Math.floor(Math.random()*nums.length)];
if (hasSym) password += syms[Math.floor(Math.random()*syms.length)];
for (let i = password.length; i < len; i++) password += chars[Math.floor(Math.random()*chars.length)];
password = password.split('').sort(() => Math.random()-0.5).join('');
document.getElementById('passwordDisplay').textContent = password;
// Strength indicator
const strength = document.getElementById('strength');
let score = 0;
if (len >= 8) score++; if (len >= 12) score++; if (len >= 16) score++;
if (hasUpper) score++; if (hasLower) score++; if (hasNum) score++; if (hasSym) score++;
if (score <= 3) { strength.className = 'strength weak'; strength.textContent = '🔴 Lemah'; }
else if (score <= 5) { strength.className = 'strength medium'; strength.textContent = '🟡 Sedang'; }
else { strength.className = 'strength strong'; strength.textContent = '🟢 Kuat ✅'; }
}
function copyPassword() {
const pw = document.getElementById('passwordDisplay').textContent;
if (pw === 'Klik Generate') return;
navigator.clipboard.writeText(pw);
const toast = document.getElementById('toast');
toast.style.display = 'block';
setTimeout(() => toast.style.display = 'none', 2000);
}
generate();
</script>
</body>
</html>Cara Jalankan
- Simpan sebagai password.html
- Buka di browser
- Atur preferensi dan klik Generate
"Password kuat adalah benteng pertama keamanan digital Anda."
Label: Tutorial, Web App, Password Generator, Keamanan, JavaScript, HTML, CSS
Posting Komentar untuk "Membuat Aplikasi Generator Password Aman dengan JavaScript"
Terimaksih telah menyempatkan hadir di blog saya
Posting Komentar