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