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

added a func. that disables the only checkbox

Browse Source
This commit is contained in:
Sikriti Dakua 2020-03-09 14:15:23 +05:30 committed by GitHub
parent bc96e7c26f
commit b36994fb91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/script.js
View File

@ -1,3 +1,7 @@
// This is a simple Password Generator App that will generate random password maybe you can you them to secure your account.
// 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.
// Clear the concole on every refresh // Clear the concole on every refresh
console.clear(); console.clear();
// set the body to full height // set the body to full height
@ -27,9 +31,8 @@ applyFill(slider.querySelector("input"));
// This function is responsible to create the trailing color and setting the fill. // This function is responsible to create the trailing color and setting the fill.
function applyFill(slider) { function applyFill(slider) {
const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min); const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${ const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
sliderProps.background 0.1}%)`;
} ${percentage + 0.1}%)`;
slider.style.background = bg; slider.style.background = bg;
sliderValue.setAttribute("data-length", slider.value); sliderValue.setAttribute("data-length", slider.value);
} }
@ -87,6 +90,9 @@ const copyInfo = document.querySelector(".result__info.right");
// Text appear after copy button is clicked // Text appear after copy button is clicked
const copiedInfo = document.querySelector(".result__info.left"); const copiedInfo = document.querySelector(".result__info.left");
// if this variable is trye only then the copyBtn will appear, i.e. when the user first click generate the copyBth will interact.
let generatedPassword = false;
// Update Css Props of the COPY button // Update Css Props of the COPY button
// Getting the bounds of the result viewbox container // Getting the bounds of the result viewbox container
let resultContainerBound = { let resultContainerBound = {
@ -95,8 +101,19 @@ let resultContainerBound = {
}; };
// This will update the position of the copy button based on mouse Position // This will update the position of the copy button based on mouse Position
resultContainer.addEventListener("mousemove", e => { resultContainer.addEventListener("mousemove", e => {
copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`); resultContainerBound = {
copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`); 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 = {
@ -131,6 +148,7 @@ generateBtn.addEventListener("click", () => {
const hasUpper = uppercaseEl.checked; const hasUpper = uppercaseEl.checked;
const hasNumber = numberEl.checked; const hasNumber = numberEl.checked;
const hasSymbol = symbolEl.checked; const hasSymbol = symbolEl.checked;
generatedPassword = true;
resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol); resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);
copyInfo.style.transform = "translateY(0%)"; copyInfo.style.transform = "translateY(0%)";
copyInfo.style.opacity = "0.75"; copyInfo.style.opacity = "0.75";
@ -142,9 +160,7 @@ generateBtn.addEventListener("click", () => {
function generatePassword(length, lower, upper, number, symbol) { function generatePassword(length, lower, upper, number, symbol) {
let generatedPassword = ""; let generatedPassword = "";
const typesCount = lower + upper + number + symbol; const typesCount = lower + upper + number + symbol;
const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter( const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
item => Object.values(item)[0]
);
if (typesCount === 0) { if (typesCount === 0) {
return ""; return "";
} }
@ -156,3 +172,21 @@ function generatePassword(length, lower, upper, number, symbol) {
} }
return generatedPassword.slice(0, length); return generatedPassword.slice(0, length);
} }
// function that handles the checkboxes state, so at least one needs to be selected. The last checkbox will be disabled.
function disableOnlyCheckbox(){
let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked)
totalChecked.forEach(el => {
if(totalChecked.length == 1){
el.disabled = true;
}else{
el.disabled = false;
}
})
}
[uppercaseEl, lowercaseEl, numberEl, symbolEl].forEach(el => {
el.addEventListener('click', () => {
disableOnlyCheckbox()
})
})