anthony/password-generator
1
0
Fork 0
mirror of https://github.com/anthonyaxenov/password-generator.git synced 2024-11-22 05:14:43 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from anthonyaxenov/axenov

Browse Source 
Axenov
This commit is contained in:
Anthony Axenov 2022-02-09 16:41:44 +08:00 committed by GitHub
commit 082632f7d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/style.css
View File

@ -35,7 +35,7 @@ button {
border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
font-family: "Montserrat"; font-family: "sans-serif";
} }
.container h2.title { .container h2.title {
@ -80,34 +80,7 @@ button {
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 65px; line-height: 65px;
} font-family:monospace;
.result #copy-btn {
position: absolute;
top: var(--y);
left: var(--x);
width: 38px;
height: 38px;
background: #fff;
border-radius: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
z-index: 2;
}
.result #copy-btn:active {
-webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08);
}
.result:hover #copy-btn {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1.35);
transform: translate(-50%, -50%) scale(1.35);
} }
.field-title { .field-title {

18
index.html
View File

@ -1,15 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Password Generator</title> <title>Password Generator</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h2 class="title">Password Generator</h2> <h2 class="title">Password Generator</h2>
@ -17,39 +14,34 @@
<div class="result__title field-title">Generated Password</div> <div class="result__title field-title">Generated Password</div>
<div class="result__info right">click to copy</div> <div class="result__info right">click to copy</div>
<div class="result__info left">copied</div> <div class="result__info left">copied</div>
<div class="result__viewbox" id="result">CLICK GENERATE</div> <div class="result__viewbox" id="result">-</div>
<button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button>
</div> </div>
<button class="btn generate" id="generate">Generate Password</button>
<div class="length range__slider" data-min="4" data-max="32"> <div class="length range__slider" data-min="4" data-max="32">
<div class="length__title field-title" data-length='0'>length:</div> <div class="length__title field-title" data-length='0'>length:</div>
<input id="slider" type="range" min="4" max="32" value="16" /> <input id="slider" type="range" min="4" max="32" value="16" />
</div> </div>
<div class="settings"> <div class="settings">
<span class="settings__title field-title">settings</span> <span class="settings__title field-title">settings</span>
<div class="setting"> <div class="setting">
<input type="checkbox" id="uppercase" checked /> <input type="checkbox" id="uppercase" checked />
<label for="uppercase">Include Uppercase</label> <label for="uppercase">Include Uppercase (A-Z)</label>
</div> </div>
<div class="setting"> <div class="setting">
<input type="checkbox" id="lowercase" checked /> <input type="checkbox" id="lowercase" checked />
<label for="lowercase">Include Lowercase</label> <label for="lowercase">Include Lowercase (a-z)</label>
</div> </div>
<div class="setting"> <div class="setting">
<input type="checkbox" id="number" checked /> <input type="checkbox" id="number" checked />
<label for="number">Include Numbers</label> <label for="number">Include Numbers (0-9)</label>
</div> </div>
<div class="setting"> <div class="setting">
<input type="checkbox" id="symbol" /> <input type="checkbox" id="symbol" />
<label for="symbol">Include Symbols</label> <label for="symbol">Include Symbols</label>
</div> </div>
</div> </div>
<button class="btn generate" id="generate">Generate Password</button>
</div> </div>
<script src="js/script.js"></script> <script src="js/script.js"></script>
</body> </body>
</html> </html>

31
js/script.js
View File

@ -2,8 +2,6 @@
// I tried my best to make the code as simple as possible please dont mind the variable names. // I tried my best to make the code as simple as possible please dont mind the variable names.
// Also this idea came in my mind after checking Traversy Media's latest video. // Also this idea came in my mind after checking Traversy Media's latest video.
// Clear the concole on every refresh
console.clear();
// set the body to full height // set the body to full height
// document.body.style.height = `${innerHeight}px` // document.body.style.height = `${innerHeight}px`
@ -81,8 +79,6 @@ const symbolEl = document.getElementById("symbol");
// Button to generate the password // Button to generate the password
const generateBtn = document.getElementById("generate"); const generateBtn = document.getElementById("generate");
// Button to copy the text
const copyBtn = document.getElementById("copy-btn");
// Result viewbox container // Result viewbox container
const resultContainer = document.querySelector(".result"); const resultContainer = document.querySelector(".result");
// Text info showed after generate button is clicked // Text info showed after generate button is clicked
@ -99,22 +95,6 @@ let resultContainerBound = {
left: resultContainer.getBoundingClientRect().left, left: resultContainer.getBoundingClientRect().left,
top: resultContainer.getBoundingClientRect().top, top: resultContainer.getBoundingClientRect().top,
}; };
// This will update the position of the copy button based on mouse Position
resultContainer.addEventListener("mousemove", e => {
resultContainerBound = {
left: resultContainer.getBoundingClientRect().left,
top: resultContainer.getBoundingClientRect().top,
};
if(generatedPassword){
copyBtn.style.opacity = '1';
copyBtn.style.pointerEvents = 'all';
copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
}else{
copyBtn.style.opacity = '0';
copyBtn.style.pointerEvents = 'none';
}
});
window.addEventListener("resize", e => { window.addEventListener("resize", e => {
resultContainerBound = { resultContainerBound = {
left: resultContainer.getBoundingClientRect().left, left: resultContainer.getBoundingClientRect().left,
@ -123,10 +103,10 @@ window.addEventListener("resize", e => {
}); });
// Copy Password in clipboard // Copy Password in clipboard
copyBtn.addEventListener("click", () => { resultContainer.addEventListener("click", () => {
const textarea = document.createElement("textarea"); const textarea = document.createElement("textarea");
const password = resultEl.innerText; const password = resultEl.innerText;
if (!password || password == "CLICK GENERATE") { if (!password || password == "-") {
return; return;
} }
textarea.value = password; textarea.value = password;
@ -150,6 +130,7 @@ generateBtn.addEventListener("click", () => {
const hasSymbol = symbolEl.checked; const hasSymbol = symbolEl.checked;
generatedPassword = true; generatedPassword = true;
resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol); resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);
resultEl.style.fontSize = (30 - (length / 2)) + "px";
copyInfo.style.transform = "translateY(0%)"; copyInfo.style.transform = "translateY(0%)";
copyInfo.style.opacity = "0.75"; copyInfo.style.opacity = "0.75";
copiedInfo.style.transform = "translateY(200%)"; copiedInfo.style.transform = "translateY(200%)";
@ -177,11 +158,7 @@ function generatePassword(length, lower, upper, number, symbol) {
function disableOnlyCheckbox(){ function disableOnlyCheckbox(){
let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked) let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked)
totalChecked.forEach(el => { totalChecked.forEach(el => {
if(totalChecked.length == 1){ el.disabled = totalChecked.length == 1
el.disabled = true;
}else{
el.disabled = false;
}
}) })
} }