Hallo guys, kali ini admin Mrchllaja akan membagikan artikel lagi ya, artikel ini membahas tentang Cara Membuat Random Password Generator Menggunakan HTML CSS dan Javascript untuk kalian.
Kegunaan Random Password Generator
Tools ini biasanya digunakan untuk mengisi bagian password saat melakukan daftar atau masuk di halaman login & register. Biasanya tools ini digunakan saat seseorang lagi ga pengen ribet - ribet mikir password. Oleh karena itu Mrchllaja membagikan turorial Cara Membuat Random Password Generator Menggunakan HTML CSS dan Javascript agar pengunjung website bisa menggunakan tools/alat tersebut.
Ingin tutorial cara membuat nya? yuk liat dibawah ini..
Table of Contents
Cara Membuat Random Password Generator
Langkah 1: Memasang Kode CSS
Salin kode dibawah ini, lalu tempel diatas kode </style>
Jika website kalian memiliki fitur DarkMode, sesuaikan class .drK
dengan css darkmode website kalian. Jika website kalian tidak memiliki fitur DarkMode, kalian bisa menghapus class nya.
.wrapper { position: relative; max-width: 100%; width: 100%; background: #fefefe; border-radius: 12px; padding: 30px 25px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .wrapper .password-box { position: relative; height: 50px; } .password-box input { height: 100%; width: 100%; border-radius: 8px; padding: 0 45px 0 15px; border: 1px solid #aaa; background-color: #fefefe; } .password-box .copy-icon { position: absolute; right: 15px; top: 50%; color: #707070; font-size: 20px; cursor: pointer; transform: translateY(-50%); } .copy-icon:hover { color: #826afb; } .wrapper .range-box { display: flex; align-items: center; margin-top: 20px; } .range-box input { width: 100%; height: 5px; accent-color: #826afb; cursor: pointer; } .range-box .slider-number { min-width: 30px; text-align: right; font-size: 17px; color: #707070; } .wrapper .generate-button { width: 100%; color: #fff; padding: 12px 0; margin-top: 20px; background: #927dfc; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .generate-button:hover { background-color: #826afb; } /* css darkmode sesuaikanb (.drK) dengan css darkmode template kalian, jika berbeda hapus bagian bawah ini */ .drK .wrapper, .password-box input{background:rgba(50, 50, 50, 0.8)}
Langkah 2: Memasang kode HTML
Salin kode dibawah ini, lalu letakkan dimanapun kalian ingin menampilkannya.
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" /> <div class="wrapper"> <div class="password-box"> <input type="text" disabled /> <i class="uil uil-copy copy-icon"></i> </div> <div class="range-box"> <input type="range" min="6" max="40" value="8" /> <span class="slider-number">8</span> </div> <button class="generate-button">Generate Password</button> </div>
Langkah 3: Memasang kode Javascript
Salin kode javascript dibawah ini, lalu tempel diatas kode </script>
const passwordInput = document.querySelector(".password-box input"), copyIcon = document.querySelector(".password-box .copy-icon"), rangeInput = document.querySelector(".range-box input"), sliderNumber = document.querySelector(".range-box .slider-number"), generateButton = document.querySelector(".generate-button"); //Characters of alphabet(a-z/A-Z), numbers(0-9) and Symbols($%&[]...) let allCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^!$%&|[](){}:;.,*+-#@<>~"; //this function will be called on, page reload, generateButton clicked & rangeInput slide const generatePassword = () => { let newPassword = ""; //for loop will run till rangeInput value for (let i = 0; i < rangeInput.value; i++) { let randomNumbers = Math.floor(Math.random() * allCharacters.length); newPassword += allCharacters[randomNumbers]; } passwordInput.value = newPassword; copyIcon.classList.replace("uil-file-check-alt", "uil-copy"); //replace icon }; rangeInput.addEventListener("input", () => { sliderNumber.innerText = rangeInput.value; generatePassword(); }); //copy passInput's value on copyIcon click //copy passInput's value on copyIcon click copyIcon.addEventListener("click", () => { navigator.clipboard.writeText(passwordInput.value); copyIcon.classList.replace("uil-copy", "uil-file-check-alt"); //replace icon }); generatePassword(); generateButton.addEventListener("click", generatePassword);
Jika sudah semua klik save/simpan. Lalu lihat hasilnya.
Untuk Pengguna Website Dari Blogger
Langkah 1: masuk ke halaman blogger
Langkah 2: buat halaman baru
Langkah 3: salin kode dibawah ini lalu tempel di halaman baru dalam Mode HTML
<style> .wrapper { position: relative; max-width: 100%; width: 100%; background: #fefefe; border-radius: 12px; padding: 30px 25px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .wrapper .password-box { position: relative; height: 50px; } .password-box input { height: 100%; width: 100%; border-radius: 8px; padding: 0 45px 0 15px; border: 1px solid #aaa; background-color: #fefefe; } .password-box .copy-icon { position: absolute; right: 15px; top: 50%; color: #707070; font-size: 20px; cursor: pointer; transform: translateY(-50%); } .copy-icon:hover { color: #826afb; } .wrapper .range-box { display: flex; align-items: center; margin-top: 20px; } .range-box input { width: 100%; height: 5px; accent-color: #826afb; cursor: pointer; } .range-box .slider-number { min-width: 30px; text-align: right; font-size: 17px; color: #707070; } .wrapper .generate-button { width: 100%; color: #fff; padding: 12px 0; margin-top: 20px; background: #927dfc; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .generate-button:hover { background-color: #826afb; } /* css darkmode sesuaikanb (.drK) dengan css darkmode template kalian, jika berbeda hapus bagian bawah ini */ .drK .wrapper, .password-box input{background:rgba(50, 50, 50, 0.8)} </style> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" /> <div class="wrapper"> <div class="password-box"> <input type="text" disabled /> <i class="uil uil-copy copy-icon"></i> </div> <div class="range-box"> <input type="range" min="6" max="40" value="8" /> <span class="slider-number">8</span> </div> <button class="generate-button">Generate Password</button> </div> <script> const passwordInput = document.querySelector(".password-box input"), copyIcon = document.querySelector(".password-box .copy-icon"), rangeInput = document.querySelector(".range-box input"), sliderNumber = document.querySelector(".range-box .slider-number"), generateButton = document.querySelector(".generate-button"); //Characters of alphabet(a-z/A-Z), numbers(0-9) and Symbols($%&[]...) let allCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^!$%&|[](){}:;.,*+-#@<>~"; //this function will be called on, page reload, generateButton clicked & rangeInput slide const generatePassword = () => { let newPassword = ""; //for loop will run till rangeInput value for (let i = 0; i < rangeInput.value; i++) { let randomNumbers = Math.floor(Math.random() * allCharacters.length); newPassword += allCharacters[randomNumbers]; } passwordInput.value = newPassword; copyIcon.classList.replace("uil-file-check-alt", "uil-copy"); //replace icon }; rangeInput.addEventListener("input", () => { sliderNumber.innerText = rangeInput.value; generatePassword(); }); //copy passInput's value on copyIcon click //copy passInput's value on copyIcon click copyIcon.addEventListener("click", () => { navigator.clipboard.writeText(passwordInput.value); copyIcon.classList.replace("uil-copy", "uil-file-check-alt"); //replace icon }); generatePassword(); generateButton.addEventListener("click", generatePassword); </script>
Jika sudah klik simpan.
Jika kalian ingin melihatnya langsung, kalian bisa melihat demo nya dengan klik tombol dibawah ini.
Sekian, tutorial Cara Membuat Random Password Generator Menggunakan HTML CSS dan Javascript ini, semoga bermanfaat bagi kalian.
Referensi:
https://www.codingnepalweb.com/password-generator-javascript
Apa Reaksimu Setelah Membaca Artikel Ini?