Kode ini adalah contoh dari kode untuk menggenerate dan membuat password secara acak karakter yang memenuhi untuk password, penggunaan angka, huruf besar, huruf kecil dan beberapa karakter atau simbol khusus. Pengguna dapat memilih berapa panjang karakter yang diinginkan dari password yang ingin dibuat, serta karakter random apa saja yang ingin digunakan.
Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.kotakceklis {
display: flex;
flex-direction: column; }
#copyButton {
cursor: pointer;
margin-left: 10px;
font-size: 20px;
background: none;
border: none; }
</style>
</head>
<body>
<form name="randomGenerator" method="get">
<h1>Random Password Generator</h1>
<p>Panjang Karakter : <input id="number" type="number" min="3" max="100"></p>
<p>Penggunaan Karakter :</p>
<div class="kotakceklis">
<label><input type="checkbox" name="" id="centang1" value="a" checked> Numeric digits (0-9)</label>
<label><input type="checkbox" name="" id="centang2" value="b"> Uppercase letters (A-Z)</label>
<label><input type="checkbox" name="" id="centang3" value="c" checked> Lowercase letters (a-z)</label>
<label><input type="checkbox" name="" id="centang4" value="d"> Special characters (!@#$%^&*)</label>
</div><br />
<button id="generate" type="button">Generate</button><br><br>
Generated: <input id="hasil" type="text" style="width:70%" readonly><button id="copyButton" title="Copy to clipboard">📋</button>
</form>
<script>
const array_num = Array.from(Array(10).keys());
const array_uppr = Array.from({ length: 26 }, (_, i) =>
String.fromCharCode("A".charCodeAt(0) + i)
);
const array_low = Array.from({ length: 26 }, (_, i) =>
String.fromCharCode("a".charCodeAt(0) + i)
);
const array_symbols = ['!', '@', '#', '$', '%', '^', '*', '(', ')', '_', '-', '=', '+', '{', '}', '[', ']', '|', ':', ';', '"', "'", ',', '.', '?', '/'];
let num1 = 0;
const numberInput = document.getElementById('number');
const centang1 = document.getElementById('centang1');
const centang2 = document.getElementById('centang2');
const centang3 = document.getElementById('centang3');
const centang4 = document.getElementById('centang4');
const generateButton = document.getElementById('generate');
const hasilInput = document.getElementById('hasil');
numberInput.addEventListener('input', function() {
num1 = Number(numberInput.value);
});
generateButton.addEventListener('click', function () {
let hasil = "";
let main_array = [];
if (num1 === 0) {
alert("Masukkan Panjang Karakter!");
return;
}
if (centang1.checked) {
main_array = main_array.concat(array_num);
}
if (centang2.checked) {
main_array = main_array.concat(array_uppr);
}
if (centang3.checked) {
main_array = main_array.concat(array_low);
}
if (centang4.checked) {
main_array = main_array.concat(array_symbols);
}
if (main_array.length === 0) {
alert("Pilih dahulu karakter yand diizinkan");
return;
}
for (let i = 0; i < num1; i++) {
hasil += main_array[Math.floor(Math.random() * main_array.length)];
}
hasilInput.value = hasil;
});
document.getElementById("copyButton").addEventListener("click", function () {
const hasilField = document.getElementById("hasil");
hasilField.select();
hasilField.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("Hasil sudah tersalin di clipboard!");
});
</script>
</body>
</html>
Komentar
Posting Komentar