Password generator juga sangat bermanfaat bagi user untuk mempersulit hacker ketika melakukan serangan brute force. Karena semakin rumit dan panjang password semakin sulit pula untuk di jebol jadi kalian para user bisa menggunakan password generator untuk membuat password yang kuat.
Lalu bagaimana cara membuat password generator. Oke berikut panduan cara membuat sistem generate password otomatis menggunakan javascript:
Pertama buat dulu folder password untuk menyimpan proyeknya, kemuadn di dalam foldernya buat file index.html dan style.css
Masukan kode html berikut ke dalam file html:
<!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 rel="stylesheet" href="./style.css">
</head>
<body>
<div class="input-box">
<h2>Random Password Generator</h2>
<input type="text" placeholder="Create password" id="password" readonly="">
<div class="btn" onclick="getPassword();">Generate password</div>
</div>
<script>
function getPassword(){
var char = "01234567890ABCNSIFNOQFBWBIFIFIQPqbidqifcifcbiqficqzqeoptpnxkp!#$%^&*()(Y%#@#^()";
var passwordLenght = 16;
var password = "";
for (var i = 0; i < passwordLenght; i++){
var randomNumber = Math.floor(Math.random() * char.length);
password += char.substring(randomNumber, randomNumber + 1);
}
document.getElementById("password").value = password;
}
</script>
</body>
</html>Masukan kode css berikut ke file css:
* {
margin: 0;
padding: 0;
font-family: consolas;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f8f8f8;
}
.input-box {
position: relative;
width: 450px;
}
.input-box h2 {
color: #333;
font-size: 24;
}
.input-box input {
position: relative;
padding: 0 20px;
border: none;
width: 100%;
height: 60px;
margin: 15px 0 20px;
outline: none;
font-size: 24px;
background: transparent;
letter-spacing: 4px;
border-radius: 8px;
box-sizing: border-box;
color: #333;
box-shadow: -4px -4px 10px rgba(255, 255, 255, 1),
inset 4px 4px 10px rgba(0, 0, 0, 0.05),
inset -4px -4px 10px rgba(255, 255, 255, 1),
4px 4px 10px rgba(0, 0, 0, 0.05);
}
.input-box input::placeholder {
letter-spacing: 0;
}
.input-box .btn {
position: relative;
cursor: pointer;
color: #fff;
background: #333;
font-size: 24px;
padding: 10px 15px;
border-radius: 8px;
display: inline-block;
}
.input-box .btn:active{
background: red;
}Nah nanti tampilanya seperti ini:
Untuk mendapatkan password secara acak kalian tinggal klik button dengan tulisan Generate password nanti di bagain inputnya akan menampilkan password secara acak. Bagaimana kode ini bisa berfungsi?
Pada kode html saya menggunakan javascript di dalamnya terdapat function yang dapat mengacak string dengan method Math.random jadi string yang ada di variabel char diacak dan di tampung kedalam variabel randomNumber yang nantinya mengahasilkan 16 string dan dimasukan ke variabel password. Setelah itu kitqa ambil id password yang dalam input untuk memasukan value, nah valuenya berupa string dari variabel password.