Membuat Tools Password Generate di Blog

Password generate adalah salah satu alat yang berguna dalam membuat akun sosial media atau game. Dengan menggunakan alat ini akan para pengguna akan lebih mudah dalam menentukan kata sandi yang kuat.

Cara kerja alat ini yaitu akan menampilkan daftar karakter secara acak atau random menggunakan JavaScript. Alat ini juga bisa dikustomisasi dengan menentukan panjang karakter, penggunaan huruf besar (kapital) dan kecil, angka, serta simbol.

Untuk lebih lengkapnya, silahkan klik button demo berikut untuk melihat tampilanya.

Meskipun tool ini sudah tersedia banyak di internet, tidak ada salahnyaa jika kamu membuat alat password generate sendiri untuk menambah fitur navigasi blog agar para pengunjung semakin tertarik.

Cara Membuat Tool Password Generate

Buka dashboard blogger > halaman > buat halaman baru lalu salin semua kode dibawah ini dan pastekan dalam tampilan html.

<!--HTML-->
<div class="passGenerator">
  <div class="passResult">
    <span id="result"></span>
    <button class="passButton" id="clipboard">COPY</button>
  </div>
  <div class="passLists">
    <div class="passList">
      <label>Password length</label>
      <input id="length" max="20" type="number" value="12" />
    </div>
    <div class="passList">
    <label>Include uppercase letter</label>
    <input checked="" id="uppercase" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include lowercase letter</label>
      <input checked="" id="lowercase" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include number</label>
      <input checked="" id="numbers" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include symbol</label>
      <input id="symbols" type="checkbox" />
    </div>
  </div>
  <button class="passButton largeButton" id="generate">GENERATE</button>
  <div class="creatorLink" style="font-size: 12px;"><a href="https://www.media903.com">Made by www.media903.com</a></div>
</div>
<!--End HTML-->

<!--CSS-->
<style>
.passGenerator{width:100%;max-width:100%;background:#fffeff;font-family:"Noto Sans",sans-serif;font-size:16px;padding:20px;border:1px solid #e6e6e6}
.passResult{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;height:50px;background-color:#f8f8f8;font-size:18px;letter-spacing:1px;padding:12px 10px}
.passResult #result{word-wrap:break-word;max-width:calc(100% - 40px);color:#009ee0;font-weight:bold}
input#length{background:#fafafa;padding:8px;border:0}
.passResult .passButton{position:absolute;top:5px;right:5px;font-size:20px;height:40px;font-size:12px;letter-spacing:1.5px}
.passButton{background-color:#009ee0;color:#fff;padding:8px;font-size:16px;border:none;cursor:pointer}
.largeButton{display:block;margin:0 auto;padding:10px;font-size:15px}
.passList{display:flex;justify-content:space-between;align-items:center;margin:15px 0}
input[type=checkbox]{margin-right:0}
.creatorLink{display:none}
@media screen and (max-width:400px){.passResult{font-size:14px}}
/* Dark Mode */
.darkMode .passResult{background:#1e1e1e}
.darkMode .passGenerator{background:#252526;border-color:rgba(255,255,255,.15)}
.darkMode .passButton{background:#2d2d30}
.darkMode input#length{background:#1e1e1e}
</style>
<!--End CSS-->

<!--JavaScript-->
<script>
const resultEl=document.getElementById("result"),lengthEl=document.getElementById("length"),uppercaseEl=document.getElementById("uppercase"),lowercaseEl=document.getElementById("lowercase"),numbersEl=document.getElementById("numbers"),symbolsEl=document.getElementById("symbols"),generateEl=document.getElementById("generate"),clipboardEl=document.getElementById("clipboard"),randomFunc={lower:getRandomLower,upper:getRandomUpper,number:getRandomNumber,symbol:getRandomSymbol};
generate.addEventListener("click",()=>{const e=+lengthEl.value,c=lowercaseEl.checked,l=uppercaseEl.checked,s=numbersEl.checked,n=symbolsEl.checked;resultEl.innerText=generatePassword(c,l,s,n,e)});
clipboardEl.addEventListener("click",()=>{const e=document.createElement("textarea"),t=resultEl.innerText;t&&(e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),e.remove(),alert("Password copied!"))});
function generatePassword(e,r,t,n,o){let c="";const s=e+r+t+n,l=[{lower:e},{upper:r},{number:t},{symbol:n}].filter(e=>Object.values(e)[0]);if(0===s)return"";for(let e=0;e<o;e+=s)l.forEach(e=>{const r=Object.keys(e)[0];c+=randomFunc[r]()});return c.slice(0,o)}
function getRandomLower(){return String.fromCharCode(Math.floor(26*Math.random())+97)}function getRandomUpper(){return String.fromCharCode(Math.floor(26*Math.random())+65)}function getRandomNumber(){return String.fromCharCode(Math.floor(10*Math.random())+48)}function getRandomSymbol(){return"!@#$%^&*(){}[]=<>/,."[Math.floor(Math.random()*"!@#$%^&*(){}[]=<>/,.".length)]}
const floating_passButton=document.querySelector(".floating-passButton"),close_passButton=document.querySelector(".close-passButton"),social_panel_passGenerator=document.querySelector(".social-panel-passGenerator");
floating_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.toggle("visible")}),close_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.remove("visible")})
</script>

<!--End JavaScript-->

Jika sudah, silahkan beri judul sesuka kalian lalu publikasikan. Perlu diingat jangan melakukan sembarang perubahan pada script karena bisa terjadi error dan tool tidak berfungsi.

Demikian cara membuat tool password generate di halaman blog. Jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan tips seputar blogging.