Video học lập trình mỗi ngày

Một password mạnh bao gồm nhiều điều kiện chuỗi thường, chữ hoa, số và những ký tự đặc biệt. Mẹo này giúp bạn cách random password generator sử dụng javascript. Bài viết này không phải là ý tưởng mới, nhưng ở đây bạn có thể cải thiện được cách viết code của mình sao cho nhanh, và chính xác hơn thông qua các mẹo javascript.

Random password generator using JavaScript

Nếu đã hiểu nội dung của bài học hôm nay, thì không chờ đợi lâu, chúng ta đi vào triển code thôi. Đầu tiên tạo file html

<div id="random-password">
  <input type="text" id="password" /> <button id="copy">Copy</button>
  <div id="settings">
    <label for="length">Length</label>
    <input type="number" id="length" value="16" min="8" max="64" />    
    <label for="numbers">Include Numbers</label>
    <input type="checkbox" id="numbers" checked />
    <label for="symbols">Include Symbols</label>
    <input type="checkbox" id="symbols" checked />
  </div>
  <button id="generate">Generate Password</button>
</div>

Đoạn mã html trên được hiểu đó là một chương trình cho phép người dùng tạo một password có bao nhiêu ký tự, có số hay không? or có chuỗi ký tự đặc biệt hay không? Tiếp theo chúng ta sẽ tạo những dữ liệu điều kiện trên:

const alpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";// thường và hoa
const numbers = "0123456789"; // số 
const symbols = "!@#$%^&*_-+="; // ký tự đặc biệt

Tiếp theo là get dữ liệu người dùng về và xử lý thôi:

const passwordTxt = document.getElementById("password"); 
const length = document.getElementById("length");
const incNumbers = document.getElementById("numbers");
const incSymbols = document.getElementById("symbols");
const generateBtn = document.getElementById("generate");

Code trên khỏi giải thích hén. Tiếp nữa là khi click vào button generate thì sẽ gọi hàm generatePassword dưới đây:

generateBtn.addEventListener("click", () => {
  let characters = alpha;
  incNumbers.checked ? (characters += numbers) : "";
  incSymbols.checked ? (characters += symbols) : "";
  passwordTxt.value = generatePassword(length.value, characters);
});

Và cuối cùng là hàm generatePassword:

const generatePassword = (length, characters) => {
  let password = "";
  for (let i = 0; i < length; i++) {
    password += characters.charAt(
      Math.floor(Math.random() * characters.length)
    );
  }
  return password;
};

XEM DEMO ở đây. Và có nhiều bài viết về mẹo học javascript. Nhớ click vào xem đấy nhé!

Ngoài ra nếu muốn học nhiều và rộng hơn thì cứ vào đây nhé: https://w3collective.com/