안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 비밀번호 생성기를 선보이게 되어 기쁩니다. 이 도구는 안전하고 임의의 비밀번호를 쉽게 생성할 수 있도록 설계되었습니다. 온라인 계정에 강력한 비밀번호가 필요하거나 JavaScript 기술을 연습하려는 경우 이 비밀번호 생성기는 툴킷에 추가되는 훌륭한 도구입니다.
비밀번호 생성기는 사용자가 다양한 구성으로 비밀번호를 생성할 수 있는 웹 기반 애플리케이션입니다. 비밀번호 길이를 사용자 정의하고 소문자, 대문자, 숫자, 기호와 같은 특정 문자 유형을 포함하거나 제외할 수 있습니다. 이 프로젝트는 HTML 및 CSS로 구축된 깔끔하고 사용자 친화적인 인터페이스와 JavaScript를 사용하여 동적 비밀번호 생성기를 구축하는 방법을 보여줍니다.
프로젝트 구조 개요는 다음과 같습니다.
Password-Generator/ ├── index.html ├── style.css └── script.js
프로젝트를 시작하려면 다음 단계를 따르세요.
저장소 복제:
git clone https://github.com/abhishekgurjar-in/Password-Generator.git
프로젝트 디렉토리 열기:
cd Password-Generator
프로젝트 실행:
index.html 파일은 입력 필드, 컨트롤 및 표시 영역을 포함하여 비밀번호 생성기의 구조를 정의합니다. 다음은 일부 내용입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<script src="script.js" defer></script>
<title>Password Generator</title>
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<div class="inputBox">
<input type="text" class="passBox" id="passBox" disabled />
<span class="material-icons" id="copyIcon">content_copy</span>
</div>
<input type="range" min="1" max="30" value="8" id="inputSlider" />
<div class="row">
<p>Password Length</p>
<span id="sliderValue"></span>
</div>
<div class="row">
<label for="lowercase">Include Lowercase Letters (a-z)</label>
<input type="checkbox" name="lowercase" id="lowercase" checked/>
</div>
<div class="row">
<label for="uppercase">Include Uppercase Letters (A-Z)</label>
<input type="checkbox" name="uppercase" id="uppercase" checked/>
</div>
<div class="row">
<label for="numbers">Include Numbers (0-9)</label>
<input type="checkbox" name="numbers" id="numbers" checked/>
</div>
<div class="row">
<label for="symbols">Include Symbols (@-*)</label>
<input type="checkbox" name="symbols" id="symbols" checked/>
</div>
<button type="button" class="genBtn" id="genBtn">
Generate Password
</button>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
style.css 파일은 비밀번호 생성기의 스타일을 지정하여 시각적으로 매력적이고 반응성이 뛰어납니다. 다음은 몇 가지 주요 스타일입니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
max-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
color: #fff;
font-weight: 600;
flex-direction: column;
}
.container {
border: 0.5px solid #fff;
border-radius: 10px;
padding: 28px 32px;
display: flex;
flex-direction: column;
background: transparent;
box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}
.container h1 {
font-size: 1.4rem;
margin-block: 8px;
}
.inputBox {
position: relative;
}
.inputBox span {
position: absolute;
top: 16px;
right: 6px;
color: #000;
font-size: 28px;
cursor: pointer;
z-index: 2;
}
.passBox {
background-color: #fff;
border: none;
outline: none;
padding: 10px;
width: 300px;
border-radius: 4px;
font-size: 20px;
margin-block: 8px;
text-overflow: ellipsis;
}
.row {
display: flex;
margin-block: 8px;
}
.row p, .row label {
flex-basis: 100%;
font-size: 18px;
}
.row input[type="checkbox"] {
width: 20px;
height: 20px;
}
.genBtn {
border: none;
outline: none;
background-color: #2c619e;
padding: 12px 24px;
color: #fff;
font-size: 18px;
margin-block: 8px;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
}
.genBtn:hover {
background-color: #0066ff;
}
.footer {
color: white;
margin-top: 150px;
text-align: center;
}
.footer p {
font-size: 16px;
font-weight: 200;
}
script.js 파일에는 비밀번호 생성, 사용자 상호작용 관리, 비밀번호를 클립보드에 복사하기 위한 로직이 포함되어 있습니다. 다음은 일부 내용입니다.
let inputSlider = document.getElementById("inputSlider");
let sliderValue = document.getElementById("sliderValue");
let passBox = document.getElementById("passBox");
let lowercase = document.getElementById("lowercase");
let uppercase = document.getElementById("uppercase");
let numbers = document.getElementById("numbers");
let symbols = document.getElementById("symbols");
let genBtn = document.getElementById("genBtn");
let copyIcon = document.getElementById("copyIcon");
// Showing input slider value
sliderValue.textContent = inputSlider.value;
inputSlider.addEventListener("input", () => {
sliderValue.textContent = inputSlider.value;
});
genBtn.addEventListener("click", () => {
passBox.value = generatePassword();
});
let lowerChars = "abcdefghijklmnopqrstuvwxyz";
let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allNumbers = "0123456789";
let allSymbols = "~!@#$%^&*";
// Function to generate Password
function generatePassword() {
let genPassword = "";
let allChars = "";
allChars += lowercase.checked ? lowerChars : "";
allChars += uppercase.checked ? upperChars : "";
allChars += numbers.checked ? allNumbers : "";
allChars += symbols.checked ? allSymbols : "";
if (allChars === "") {
return genPassword;
}
let i = 1;
while (i <= inputSlider.value) {
genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length));
i++;
}
return genPassword;
}
copyIcon.addEventListener("click", () => {
if (passBox.value !== "") {
navigator.clipboard.writeText(passBox.value);
copyIcon.innerText = "check";
copyIcon.title = "Password Copied";
setTimeout(() => {
copyIcon.innerHTML = "content_copy";
copy
Icon.title = "";
}, 3000);
}
});
여기에서 비밀번호 생성기 프로젝트의 라이브 데모를 확인하실 수 있습니다.
비밀번호 생성기를 만드는 것은 제가 프런트엔드 개발 기술을 적용할 수 있게 해 준 즐거운 프로젝트였습니다. 이 도구는 강력한 비밀번호를 생성하는 데 유용하며 웹 개발 프로젝트에 큰 도움이 될 수 있습니다. 여러분도 저만큼 도움이 되길 바랍니다. 즐거운 코딩하세요!
이 프로젝트는 JavaScript 기술을 향상하고 실용적인 웹 도구를 만들기 위한 여정의 일환으로 개발되었습니다.
위 내용은 비밀번호 생성기 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
