Cara Membuat Random Password Generator Menggunakan HTML, CSS, dan Javascript

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.

DEMO

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?

Mrchll

Cara Membuat Random Password Generator Menggunakan HTML, CSS, dan Javascript

Kegunaan Random Password Generator

Cara Membuat Random Password Generator

Langkah 1: Memasang Kode CSS

Langkah 2: Memasang kode HTML

Langkah 3: Memasang kode Javascript

Untuk Pengguna Website Dari Blogger

Tentang Penulis

Posting Komentar

Widget Reaction Blogger

Widget Kotak Donasi Blog

Cara Membuat Profile Card Neumorphism Hanya Menggunakan HTML CSS

Widget Countdown Download Box

Codebox Dengan Tombol Copy Dan Download

Mrchllaja