Password Generato

Recently, referring to some password generators on the Internet, a similar password generator has been imitated. The password is mainly composed of "uppercase", "lowercase", "number" and "symbol". The specific style is as follows:

development process

This paper mainly records the js development process, and the css style will be given in the github file at the end of the article, which is mainly used to record and learn the js development process

Sliding effect

1. Set style properties
2. Monitor the input [range] slide and change the tail color
3. Set the number of input password generator
(the js: setAttribute() method adds the specified attribute and assigns it the specified value)

//Range slider properties.
//Fill: the tail color you see when you drag the slider.
// Background: default range slider background

const  sliderProps = {
    fill:'#0B1EDF',
    background: 'rgba(255, 255, 255, 0.214)'
};

//Select the range slider container,
const slider = document.querySelector(".range__slider");
//Displays the text for the range slider value.
const sliderValue = document.querySelector(".length__title");
//Use the event listener application to fill in and change the value of the text.
slider.querySelector("input").addEventListener("input", event => {
    //The setAttribute() method adds the specified attribute and assigns it the specified value
    sliderValue.setAttribute("data-length", event.target.value);
    applyFill(event.target);
});
//Select the range input and pass it to the applyFill function
applyFill(slider.querySelector("input"));

//This function is responsible for creating a trailing color and setting the fill.
function applyFill(slider) {
    const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
    const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
    0.1}%)`;
    slider.style.background = bg;
    sliderValue.setAttribute("data-length", slider.value);
}

Function name object that generates random cipher letters

fromCharCode() accepts a specified Unicode value and returns a string.
Note: this method is a static method of String, and each character in the String is specified by a separate Unicode numeric encoding. Usage syntax:

//Object that will be used to create all function names for random password letters
const  randomFunc = {
    lower: getRondomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol
};

// Generating function
// All functions are responsible for returning a random value that we will use to create the password.

function getRondomLower() {
    //fromCharCode() accepts a specified Unicode value and returns a string.
    // Note: this method is a static method of String, and each character in the String is specified by a separate Unicode numeric encoding. Usage syntax: String.fromCharCode().
    return String.fromCharCode(Math.floor(Math.random() * 26 ) + 97);
}

function getRandomUpper() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);

}
function getRandomSymbol() {
    const symbols = '~!@#$%^&*()_+{}":?><;.,';
    return symbols[Math.floor(Math.random() * symbols.length)];
}

Select required DOM elements

//Select all required DOM elements
const resultEl = document.getElementById("result");
const lengthEl = document.getElementById("slider");

//Check box for the option to create different types of passwords based on the user
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numberEl = document.getElementById("number");
const symbolEl = document.getElementById("symbol");
// Button to generate a password
const generateBtn = document.getElementById("generate");
// Button to copy text
const copyBtn = document.getElementById("copy-btn");
//View box container
const resultContainer = document.querySelector(".result");
// Text information displayed after clicking the generate button
const copyInfo = document.querySelector(".result__info.right");
//Text appears after clicking the copy button
const copiedInfo = document.querySelector(".result__info.left");

Monitor the page mouse movement and set the copy button position, and copy the password

js replication method:

textarea.select();
document.execCommand("copy");

//Update CSS properties of COPY button
//Get the boundary of the result view box container
let resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top,
};
//This updates the position of the copy button based on the mouse position
resultContainer.addEventListener("mousemove", e => {
    copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
    copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
});

//Copy password from clipboard
copyBtn.addEventListener("click", () => {
    const textarea = document.createElement("textarea");
    const password = resultEl.innerText;
    if (!password || password == "CLICK GENERATE") {
        return;
    }
    textarea.value = password;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();

    copyInfo.style.transform = "translateY(200%)";
    copyInfo.style.opacity = "0";
    copiedInfo.style.transform = "translateY(0%)";
    copiedInfo.style.opacity = "0.75";
});

Generate password

Using traversal loop to generate the corresponding string, and taking the corresponding length to generate the password

// This function generates the password and returns it
function generatePassword(length, lower, upper, number, symbol) {
    let generatedPassword = "";
    const typesCount = lower + upper + number + symbol;
    const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
    if (typesCount === 0) {
        return "";
    }
    for (let i = 0; i < length; i++) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }
    return generatedPassword.slice(0, length);
}

For the common operations of Object objects, see a summary of the common operations of Object on the Internet. I hope it can be used as a reference: https://www.haorooms.com/post/js_objectoperate

The key points of this password generator are as follows:
1. Randomly generate corresponding uppercase, lowercase, number, symbol
2. Synthesize the corresponding number of passwords

Source code:

//This is a simple password generator application that can generate random passwords. Maybe you can use them to protect your account.
//I try to make the code as simple as possible, please don't mind variable names.


//Clear console on every refresh
console.clear();

//Range slider properties.
//Fill: the tail color you see when you drag the slider.
// Background: default range slider background

const  sliderProps = {
    fill:'#0B1EDF',
    background: 'rgba(255, 255, 255, 0.214)'
};

//Select the range slider container,
const slider = document.querySelector(".range__slider");
//Displays the text for the range slider value.
const sliderValue = document.querySelector(".length__title");
//Use the event listener application to fill in and change the value of the text.
slider.querySelector("input").addEventListener("input", event => {
    //The setAttribute() method adds the specified attribute and assigns it the specified value
    sliderValue.setAttribute("data-length", event.target.value);
    applyFill(event.target);
});
//Select the range input and pass it to the applyFill function
applyFill(slider.querySelector("input"));

//This function is responsible for creating a trailing color and setting the fill.
function applyFill(slider) {
    const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
    const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
    0.1}%)`;
    slider.style.background = bg;
    sliderValue.setAttribute("data-length", slider.value);
}

//Object that will be used to create all function names for random password letters
const  randomFunc = {
    lower: getRondomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol
};

// Generating function
// All functions are responsible for returning a random value that we will use to create the password.

function getRondomLower() {
    //fromCharCode() accepts a specified Unicode value and returns a string.
    // Note: this method is a static method of String, and each character in the String is specified by a separate Unicode numeric encoding. Usage syntax: String.fromCharCode().
    return String.fromCharCode(Math.floor(Math.random() * 26 ) + 97);
}

function getRandomUpper() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);

}
function getRandomSymbol() {
    const symbols = '~!@#$%^&*()_+{}":?><;.,';
    return symbols[Math.floor(Math.random() * symbols.length)];
}


//Select all required DOM elements
const resultEl = document.getElementById("result");
const lengthEl = document.getElementById("slider");

//Check box for the option to create different types of passwords based on the user
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numberEl = document.getElementById("number");
const symbolEl = document.getElementById("symbol");
// Button to generate a password
const generateBtn = document.getElementById("generate");
// Button to copy text
const copyBtn = document.getElementById("copy-btn");
//View box container
const resultContainer = document.querySelector(".result");
// Text information displayed after clicking the generate button
const copyInfo = document.querySelector(".result__info.right");
//Text appears after clicking the copy button
const copiedInfo = document.querySelector(".result__info.left");

//Update CSS properties of COPY button
//Get the boundary of the result view box container
let resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top,
};
//This updates the position of the copy button based on the mouse position
resultContainer.addEventListener("mousemove", e => {
    copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
    copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
});

//Copy password from clipboard
copyBtn.addEventListener("click", () => {
    const textarea = document.createElement("textarea");
    const password = resultEl.innerText;
    if (!password || password == "CLICK GENERATE") {
        return;
    }
    textarea.value = password;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();

    copyInfo.style.transform = "translateY(200%)";
    copyInfo.style.opacity = "0";
    copiedInfo.style.transform = "translateY(0%)";
    copiedInfo.style.opacity = "0.75";
});

//When you click build, the password ID is generated
generateBtn.addEventListener("click", () => {
    const length = +lengthEl.value;
    const hasLower = lowercaseEl.checked;
    const hasUpper = uppercaseEl.checked;
    const hasNumber = numberEl.checked;
    const hasSymbol = symbolEl.checked;
    resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);
    copyInfo.style.transform = "translateY(0%)";
    copyInfo.style.opacity = "0.75";
    copiedInfo.style.transform = "translateY(200%)";
    copiedInfo.style.opacity = "0";
});

generateBtn.addEventListener("click", () => {
    const length = +lengthEl.value;
    const hasLower = lowercaseEl.checked;
    const hasUpper = uppercaseEl.checked;
    const hasNumber = numberEl.checked;
    const hasSymbol = symbolEl.checked;
    resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);
    copyInfo.style.transform = "translateY(0%)";
    copyInfo.style.opacity = "0.75";
    copiedInfo.style.transform = "translateY(200%)";
    copiedInfo.style.opacity = "0";
});

// This function is responsible for generating the password and then returning it.
function generatePassword(length, lower, upper, number, symbol) {
    let generatedPassword = "";
    const typesCount = lower + upper + number + symbol;
    const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
    if (typesCount === 0) {
        return "";
    }
    for (let i = 0; i < length; i++) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }
    return generatedPassword.slice(0, length);
}

And you want to see other css and js codes. You can view my github address: https://github.com/panpanxiong3/Front-end-effect-link