Cara Membuat Random Password Otomatis Menggunakan HTML CSS dan JavaScript - hapidzfadli.id
News Update
Loading...

Jumat, 11 September 2020

Cara Membuat Random Password Otomatis Menggunakan HTML CSS dan JavaScript



Password Generator atau pembuat sandi secara acak dapat membantu kalian ketika membuat aplikasi multi user karena dengan bantuan password generator sistem akan menghasilkan atau mengenerate password sendiri sehingga admin tidak susah payah untuk memikirkan password untuk user yang nanti password tersebut di berikan ke email user. 

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.

Share with your friends

Give us your opinion

Notification
This is just an example, you can fill it later with your own note.
Done