Random Password Generator - Custom

index.html

<div class="generator">
	<p>Random Password</p>
	<input type="text" placeholder="Password" id="result">
	<div class="buttons">
		<button id="btn">Generate</button>
		<button id="btncp">Copy</button>
	</div>
	<div class="setting">

		<div class="option">
			<label>Length: </label>
			<input type="range" id="passLength" min="6" max="30" value="12" oninput="rangeNumber.innerText=value">
			<span id="rangeNumber">12</span>
		</div>

		<div class="option">
			<input type="checkbox" id="lowerCase" checked>
			<label for="lowerCase">Lower Case: </label>
		</div>

		<div class="option">
			<input type="checkbox" id="upperCase" checked>
			<label for="upperCase">Upper Case: </label>
		</div>

		<div class="option">
			<input type="checkbox" id="number" checked>
			<label for="number">Numbers: </label>
		</div>

		<div class="option">
			<input type="checkbox" id="symbol" checked>
			<label for="symbol">Symbols: </label>
		</div>
	</div>
</div>

random-password-generator-custom.markdown

Random Password Generator - Custom

Random Password Generator number of characters include upper case and lower case include numbers include symbols

A Pen by MohammadTaseenKhan on CodePen.

License.

script.js

let lowerCase = "abcdefghijklmnopqrstuvwxyz";
let upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let numbers = "1234567890";
let symbols = "!@#$%^&*()_+[]{}\\|?/><";

let chars = [lowerCase, upperCase, numbers, symbols];
let passLength = document.getElementById("passLength");
let result = document.getElementById("result");
let btn = document.getElementById("btn");
let btncp = document.getElementById("btncp");
let checkBoxes = document.querySelectorAll('.setting input[type="checkbox"]');

/*
 **  Return Random Char From "str"
 */
const getRandomChar = (str) => str[Math.floor(Math.random() * str.length)];

/*
 ** Randomize an Array
 */
function middleMix(str) {
	let currInd = str.length,
		randInd;
	while (currInd != 0) {
		randInd = Math.floor(Math.random() * currInd);
		currInd--;
		[str[currInd], str[randInd]] = [str[randInd], str[currInd]];
	}
	return str.join("");
}

function generatePass(hasLowerCase, hasUpperCase, hasNumbers, hasSymbols) {
	let password = "";

	let available = [];

	[hasLowerCase, hasUpperCase, hasNumbers, hasSymbols].forEach((e, i) => {
		if (e) available.push(chars[i]);
	});
	if (available.length == 0) return;
	for (let i = 0; i < passLength.value; i++)
		password += getRandomChar(available[i % available.length]);

	return middleMix(password.split(""));
}

/*
 **  Generate Button
 */
btn.addEventListener("click", () => {
	result.value =
		generatePass(
			checkBoxes[0].checked,
			checkBoxes[1].checked,
			checkBoxes[2].checked,
			checkBoxes[3].checked
		) || "";
});

/*
 **  Copy Button
 */
btncp.addEventListener("click", () => {
	if (result.value != "") {
		navigator.clipboard.writeText(result.value);
		result.classList.add("active");
		setTimeout(() => {
			result.classList.remove("active");
		}, 1500);
	}
});

/*
 **  input[type='range'] background size
 */
passLength.addEventListener("input", (e) => {
	let t = e.target;

	t.style.backgroundSize = `${
		((t.value - t.min) * 100) / (t.max - t.min)
	}% 100%`;
});

/*
 **  Disable checkbox
 **/
checkBoxes.forEach((el) => {
	el.addEventListener("change", () => {
		let ch = [checkBoxes[0], checkBoxes[1], checkBoxes[2], checkBoxes[3]].filter(
			(e) => e.checked
		);

		if (ch.length == 1) {
			ch[0].disabled = true;
		} else {
			checkBoxes.forEach((el) => {
				el.disabled = false;
			});
		}
	});
});

style.css

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: consolas;
}

body {
	background: #222;
	height: 100vh;
	padding-top: 70px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

::selection {
	color: #222;
	background: #ddd;
}

.generator {
	width: 400px;
	height: 400px;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	flex-direction: column;
}

.generator p {
	color: #ddd;
	font-size: 24px;
}

.generator > input {
	width: 100%;
	height: 50px;
	padding: 10px;
	background: none;
	outline: none;
	border: 2px solid #ddd;
	border-radius: 8px;
	color: #ddd;
	font-size: 18px;
	letter-spacing: 1px;
	transition: 0.2s;
}

.generator > input.active {
	border-color: #4dff4d;
}

.generator .buttons {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.generator button {
	position: relative;
	padding: 10px 20px;
	border-radius: 10px;
	text-transform: capitalize;
	background: #0084ff;
	color: #ddd;
	border: none;
	cursor: pointer;
	letter-spacing: 1px;
	font-size: 18px;
	font-weight: bold;
	transition: 0.2s;
}

.generator button:hover {
	background: #0d72d1;
}

.generator #btncp::before {
	position: absolute;
	content: "Copied";
	top: 50%;
	left: -50px;
	transform: translateY(-50%);
	color: #4dff4d;
	transition: 0.2s;
	z-index: -1;
	opacity: 0;
}

.generator input.active ~ .buttons #btncp::before {
	left: -70px;
	opacity: 1;
}

.generator .setting {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	height: 200px;
}

.generator .setting .option {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.generator .setting .option label {
	position: relative;
	width: 150px;
	color: #ddd;
	padding: 10px 0;
	user-select: none;
}

.generator .setting .option input[type="range"] {
	-webkit-appearance: none;
	margin-right: 15px;
	width: 200px;
	height: 7px;
	background: #ddd;
	border-radius: 5px;
	background-image: linear-gradient(#0084ff, #0084ff);
	background-size: 25% 100%;
	background-repeat: no-repeat;
}

.generator .setting .option input[type="range"]::-webkit-slider-thumb {
	position: relative;
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #0084ff;
	cursor: pointer;
	box-shadow: 0 0 2px 0 #6cb8ff;
	transition: 0.3s ease-in-out;
}

.generator .setting .option input[type="range"]::-webkit-slider-thumb:hover {
	background-color: #2495ff;
}

.generator .setting .option span {
	color: #ddd;
}

.generator input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

.generator input + label::before,
.generator input + label::after {
	content: "";
	position: absolute;
	right: -50px;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.1s linear;
	cursor: pointer;
}

.generator input + label::before {
	width: 50px;
	height: 25px;
	border-radius: 25px;
	background-color: rgba(200, 200, 200, 0.4);
	border: 2px solid #ddd;
}

.generator input + label::after {
	height: 22px;
	width: 22px;
	background-color: #ddd;
	right: -22px;
	border-radius: 22px;
}

.generator input:checked + label::before {
	background: #0084ff;
}

.generator input:checked + label::after {
	right: -46px;
}
.generator input:disabled + label::after {
	cursor: auto;
}
.generator input:disabled + label::before {
	background: #333;
	cursor: auto;
}

/* YouTube icon */
#ytb {
	position: absolute;
	height: 70px;
	width: 70px;
	top: calc(50% - 35px);
	left: 10px;
	text-align: center;
	line-height: 70px;
	border: 2px solid transparent;
	color: #ff1717;
	font-size: 30px;
	transition: 0.2s;
}

#ytb:hover {
	border-radius: 50%;
	border-color: #ff1717;
	box-shadow: 0 0 10px #ff4040;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />