NỘI DUNG (HIGHLIGHTS)
Nếu bạn có một số kiến thức JavaScript cơ bản và đang tìm kiếm một dự án JavaScript thân thiện với người mới bắt đầu để cải thiện kỹ năng của mình. Trong trường hợp đó, bạn có thể tạo code tạo mật khẩu ngẫu nhiên bằng html css và js.
Trình tạo mật khẩu ngẫu nhiên là gì?
Người dùng có thể tạo mật khẩu ngẫu nhiên bằng cách tùy chỉnh cài đặt ưa thích của họ như chữ thường, chữ hoa, số, v.v. Ngoài ra còn có máy đo độ mạnh mật khẩu cho biết độ mạnh của mật khẩu do người dùng tạo.
Có thể bạn quan tâm: Test Code Online
Và cuối cùng, người dùng có thể sao chép mật khẩu đã tạo vào bảng nhớ tạm. Những loại mật khẩu này chứa các tổ hợp ký tự khác nhau như chữ cái, số, ký hiệu, v.v.
Chia sẻ code tạo mật khẩu ngẫu nhiên bằng html css và js
Để tạo trình tạo mật khẩu ngẫu nhiên bằng html css và js, hãy làm theo từng bước bên dưới:
1] Tạo file index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Password Generator JavaScript | f4vnn</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Icon Link for Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<h2>Password Generator</h2>
<div class="wrapper">
<div class="input-box">
<input type="text" disabled>
<span class="material-symbols-rounded">copy_all</span>
</div>
<div class="pass-indicator"></div>
<div class="pass-length">
<div class="details">
<label class="title">Password Length</label>
<span></span>
</div>
<input type="range" min="1" max="30" value="15" step="1">
</div>
<div class="pass-settings">
<label class="title">Password Settings</label>
<ul class="options">
<li class="option">
<input type="checkbox" id="lowercase" checked>
<label for="lowercase">Lowercase (a-z)</label>
</li>
<li class="option">
<input type="checkbox" id="uppercase">
<label for="uppercase">Uppercase (A-Z)</label>
</li>
<li class="option">
<input type="checkbox" id="numbers">
<label for="numbers">Numbers (0-9)</label>
</li>
<li class="option">
<input type="checkbox" id="symbols">
<label for="symbols">Symbols (!-$^+)</label>
</li>
<li class="option">
<input type="checkbox" id="exc-duplicate">
<label for="exc-duplicate">Exclude Duplicate</label>
</li>
<li class="option">
<input type="checkbox" id="spaces">
<label for="spaces">Include Spaces</label>
</li>
</ul>
</div>
<button class="generate-btn">Generate Password</button>
</div>
</div>
</body>
</html>2] Tạo file style.css
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #4285F4;
}
.container{
width: 450px;
background: #fff;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.container h2{
font-weight: 600;
font-size: 1.31rem;
padding: 1rem 1.75rem;
border-bottom: 1px solid #d4dbe5;
}
.wrapper{
margin: 1.25rem 1.75rem;
}
.wrapper .input-box{
position: relative;
}
.input-box input{
width: 100%;
height: 53px;
color: #000;
background: none;
font-size: 1.06rem;
font-weight: 500;
border-radius: 4px;
letter-spacing: 1.4px;
border: 1px solid #aaa;
padding: 0 2.85rem 0 1rem;
}
.input-box span{
position: absolute;
right: 13px;
cursor: pointer;
line-height: 53px;
color: #707070;
}
.input-box span:hover{
color: #4285F4!important;
}
.wrapper .pass-indicator{
width: 100%;
height: 4px;
position: relative;
background: #dfdfdf;
margin-top: 0.75rem;
border-radius: 25px;
}
.pass-indicator::before{
position: absolute;
content: "";
height: 100%;
width: 50%;
border-radius: inherit;
transition: width 0.3s ease;
}
.pass-indicator#weak::before{
width: 20%;
background: #E64A4A;
}
.pass-indicator#medium::before{
width: 50%;
background: #f1c80b;
}
.pass-indicator#strong::before{
width: 100%;
background: #4285F4;
}
.wrapper .pass-length{
margin: 1.56rem 0 1.25rem;
}
.pass-length .details{
display: flex;
justify-content: space-between;
}
.pass-length input{
width: 100%;
height: 5px;
}
.pass-settings .options{
display: flex;
list-style: none;
flex-wrap: wrap;
margin-top: 1rem;
}
.pass-settings .options .option{
display: flex;
align-items: center;
margin-bottom: 1rem;
width: calc(100% / 2);
}
.options .option:first-child{
pointer-events: none;
}
.options .option:first-child input{
opacity: 0.7;
}
.options .option input{
height: 16px;
width: 16px;
cursor: pointer;
}
.options .option label{
cursor: pointer;
color: #4f4f4f;
padding-left: 0.63rem;
}
.wrapper .generate-btn{
width: 100%;
color: #fff;
border: none;
outline: none;
cursor: pointer;
background: #4285F4;
font-size: 1.06rem;
padding: 0.94rem 0;
border-radius: 5px;
text-transform: uppercase;
margin: 0.94rem 0 1.3rem;
}3] Tạo file script.js
const lengthSlider = document.querySelector(".pass-length input"),
options = document.querySelectorAll(".option input"),
copyIcon = document.querySelector(".input-box span"),
passwordInput = document.querySelector(".input-box input"),
passIndicator = document.querySelector(".pass-indicator"),
generateBtn = document.querySelector(".generate-btn");
const characters = { // object of letters, numbers & symbols
lowercase: "abcdefghijklmnopqrstuvwxyz",
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
numbers: "0123456789",
symbols: "^!$%&|[](){}:;.,*+-#@<>~"
}
const generatePassword = () => {
let staticPassword = "",
randomPassword = "",
excludeDuplicate = false,
passLength = lengthSlider.value;
options.forEach(option => { // looping through each option's checkbox
if(option.checked) { // if checkbox is checked
// if checkbox id isn't exc-duplicate && spaces
if(option.id !== "exc-duplicate" && option.id !== "spaces") {
// adding particular key value from character object to staticPassword
staticPassword += characters[option.id];
} else if(option.id === "spaces") { // if checkbox id is spaces
staticPassword += ` ${staticPassword} `; // adding space at the beginning & end of staticPassword
} else { // else pass true value to excludeDuplicate
excludeDuplicate = true;
}
}
});
for (let i = 0; i < passLength; i++) {
// getting random character from the static password
let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];
if(excludeDuplicate) { // if excludeDuplicate is true
// if randomPassword doesn't contains the current random character or randomChar is equal
// to space " " then add random character to randomPassword else decrement i by -1
!randomPassword.includes(randomChar) || randomChar == " " ? randomPassword += randomChar : i--;
} else { // else add random character to randomPassword
randomPassword += randomChar;
}
}
passwordInput.value = randomPassword; // passing randomPassword to passwordInput value
}
const upadatePassIndicator = () => {
// if lengthSlider value is less than 8 then pass "weak" as passIndicator id else if lengthSlider
// value is less than 16 then pass "medium" as id else pass "strong" as id
passIndicator.id = lengthSlider.value <= 8 ? "weak" : lengthSlider.value <= 16 ? "medium" : "strong";
}
const updateSlider = () => {
// passing slider value as counter text
document.querySelector(".pass-length span").innerText = lengthSlider.value;
generatePassword();
upadatePassIndicator();
}
updateSlider();
const copyPassword = () => {
navigator.clipboard.writeText(passwordInput.value); // copying random password
copyIcon.innerText = "check"; // changing copy icon to tick
copyIcon.style.color = "#4285F4";
setTimeout(() => { // after 1500 ms, changing tick icon back to copy
copyIcon.innerText = "copy_all";
copyIcon.style.color = "#707070";
}, 1500);
}
copyIcon.addEventListener("click", copyPassword);
lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);Kết luận
Vậy là xong, bây giờ bạn đã tạo thành công trình tạo mật khẩu ngẫu nhiên bằng html css và js. Hy vọng với chia sẻ mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn, chúc bạn thành công.
Tham khảo: codingnepalweb.com
Theo dõi trên
