Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
	<h2 class="title">Generate Password</h2>
	<div class="result">
		<div class="result__title field-title">Generated Password</div>
		<div class="result__info right">click to copy</div>
		<div class="result__info left">copied</div>
		<div class="result__viewbox" id="result">CLICK GENERATE</div>
		<button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button>
	</div>
	<div class="length range__slider" data-min="4" data-max="32">
		<div class="length__title field-title" data-length='0'>length:</div>
		<input id="slider" type="range" min="4" max="32" value="16" />
	</div>

	<div class="settings">
		<span class="settings__title field-title">settings</span>
		<div class="setting">
			<input type="checkbox" id="uppercase" checked />
			<label for="uppercase">Include Uppercase</label>
		</div>
		<div class="setting">
			<input type="checkbox" id="lowercase" checked />
			<label for="lowercase">Include Lowercase</label>
		</div>
		<div class="setting">
			<input type="checkbox" id="number" checked />
			<label for="number">Include Numbers</label>
		</div>
		<div class="setting">
			<input type="checkbox" id="symbol" />
			<label for="symbol">Include Symbols</label>
		</div>
	</div>

	<button class="btn generate" id="generate">Generate Password</button>
</div>


<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>

            
          
!
            
              * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to top, #209cff 0%, #68e0cf 100%);
	display: flex;
	justify-content: center;
	align-items: center;
}
button {
	border: 0;
	outline: 0;
}

.container {
	margin: 40px 0;
	width: 400px;
	height: 600px;
	padding: 10px 25px;
	background: #0a0e31;
	border-radius: 10px;
	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";
	h2.title {
		font-size: 1.75rem;
		margin: 10px -5px;
		margin-bottom: 30px;
		color: #fff;
	}
}

$field-color: rgba(255, 255, 255, 0.08);
$field-height: 65px;
$field-border-radius: 8px;

.result {
	position: relative;
	width: 100%;
	height: 65px;
	overflow: hidden;
	&__info {
		&.right {
			right: 8px;
		}
		&.left {
			left: 8px;
		}
		position: absolute;
		bottom: 4px;
		color: #fff;
		font-size: 0.8rem;
		transition: all 150ms ease-in-out;
		transform: translateY(200%);
		opacity: 0;
	}
	&__viewbox {
		width: 100%;
		height: 100%;
		background: $field-color;
		border-radius: $field-border-radius;
		color: #fff;
		text-align: center;
		line-height: 65px;
	}
	#copy-btn {
		position: absolute;
		top: var(--y);
		left: var(--x);
		width: 38px;
		height: 38px;
		background: #fff;
		border-radius: 50%;
		opacity: 0;
		transform: translate(-50%, -50%) scale(0);
		transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
		cursor: pointer;
		z-index: 2;
		&:active {
			box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08);
		}
	}
	&:hover {
		#copy-btn {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1.35);
		}
	}
}
.field-title {
	position: absolute;
	top: -10px;
	left: 8px;
	transform: translateY(-50%);
	font-weight: 800;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	font-size: 0.65rem;
	pointer-events: none;
	user-select: none;
}

.options {
	width: 100%;
	height: auto;
	margin: 50px 0;
}
.range__slider {
	position: relative;
	width: 100%;
	height: calc(#{$field-height} - 10px);
	display: flex;
	justify-content: center;
	align-items: center;
	background: $field-color;
	border-radius: $field-border-radius;
	margin: 30px 0;

	&::before,
	&::after {
		position: absolute;
		color: #fff;
		font-size: 0.9rem;
		font-weight: bold;
	}
	&::before {
		content: attr(data-min);
		left: 10px;
	}
	&::after {
		content: attr(data-max);
		right: 10px;
	}
	.length__title::after {
		content: attr(data-length);
		position: absolute;
		right: -16px;
		font-variant-numeric: tabular-nums;
		color: #fff;
	}
}

$range-handle-color: rgb(255, 255, 255) !default;
$range-handle-color-hover: rgb(212, 212, 212) !default;
$range-handle-size: 20px !default;

$range-track-color: rgba(255, 255, 255, 0.314) !default;
$range-track-height: 2px !default;

$range-label-width: 60px !default;

#slider {
	-webkit-appearance: none;
	width: calc(100% - (#{$range-label-width + 10px}));
	height: $range-track-height;
	border-radius: 5px;
	background: $range-track-color;
	outline: none;
	padding: 0;
	margin: 0;
	cursor: pointer;

	// Range Handle
	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: $range-handle-size;
		height: $range-handle-size;
		border-radius: 50%;
		background: $range-handle-color;
		cursor: pointer;
		transition: all 0.15s ease-in-out;
		&:hover {
			background: $range-handle-color-hover;
			transform: scale(1.2);
		}
	}
	&::-moz-range-thumb {
		width: $range-handle-size;
		height: $range-handle-size;
		border: 0;
		border-radius: 50%;
		background: $range-handle-color;
		cursor: pointer;
		transition: background 0.15s ease-in-out;
		&:hover {
			background: $range-handle-color-hover;
		}
	}
}

.settings {
	position: relative;
	height: auto;
	widows: 100%;
	display: flex;
	flex-direction: column;

	.setting {
		position: relative;
		width: 100%;
		height: calc(#{$field-height} - 10px);
		background: $field-color;
		border-radius: $field-border-radius;
		display: flex;
		align-items: center;
		padding: 10px 25px;
		color: #fff;
		margin-bottom: 8px;
		input {
			opacity: 0;
			position: absolute;
			+ label {
				user-select: none;
				&::before,
				&::after {
					content: "";
					position: absolute;
					transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
					transform: translateY(-50%);
					top: 50%;
					right: 10px;
					cursor: pointer;
				}
				&::before {
					height: 30px;
					width: 50px;
					border-radius: 30px;
					background: rgba(214, 214, 214, 0.434);
				}
				&::after {
					height: 24px;
					width: 24px;
					border-radius: 60px;
					right: 32px;
					background: #fff;
				}
			}
			&:checked {
				& + label:before {
					background: #5d68e2;
					transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
				}
				& + label:after {
					right: 14px;
				}
			}
			&:focus {
				+ label:before {
					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
				}
			}
		}
	}
}

.btn.generate {
	user-select: none;
	position: relative;
	width: 100%;
	height: 50px;
	margin: 10px 0;
	border-radius: $field-border-radius;
	color: #fff;
	border: none;
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 150ms ease;
	&:active {
		transform: translateY(-3%);
		box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08);
	}
}



.support{
	position: fixed;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
}
a{
	margin: 0 20px;
	color: #fff;
	font-size: 2rem;
	transition: all 400ms ease;
}

a:hover{
	color: #222;
}
            
          
!
            
              // 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
console.clear();

// Range Slider Properties.
// Fill : The trailing color that you see when you drag the slider.
// background : Default Range Slider Background
const sliderProps = {
	fill: "#0B1EDF",
	background: "rgba(255, 255, 255, 0.214)",
};

// Selecting the Range Slider container which will effect the LENGTH property of the password.
const slider = document.querySelector(".range__slider");

// Text which will show the value of the range slider.
const sliderValue = document.querySelector(".length__title");

// Using Event Listener to apply the fill and also change the value of the text.
slider.querySelector("input").addEventListener("input", event => {
	sliderValue.setAttribute("data-length", event.target.value);
	applyFill(event.target);
});
// Selecting the range input and passing it in the applyFill func.
applyFill(slider.querySelector("input"));
// This function is responsible to create the 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 of all the function names that we will use to create random letters of password
const randomFunc = {
	lower: getRandomLower,
	upper: getRandomUpper,
	number: getRandomNumber,
	symbol: getRandomSymbol,
};

// Random more secure value
function secureMathRandom() {
  return window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1);
}

// Generator Functions
// All the functions that are responsible to return a random value taht we will use to create password.
function getRandomLower() {
	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(secureMathRandom() * 10) + 48);
}
function getRandomSymbol() {
	const symbols = '~!@#$%^&*()_+{}":?><;.,';
	return symbols[Math.floor(Math.random() * symbols.length)];
}

// Selecting all the DOM Elements that are necessary -->

// The Viewbox where the result will be shown
const resultEl = document.getElementById("result");
// The input slider, will use to change the length of the password
const lengthEl = document.getElementById("slider");

// Checkboxes representing the options that is responsible to create differnt type of password based on user
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numberEl = document.getElementById("number");
const symbolEl = document.getElementById("symbol");

// Button to generate the password
const generateBtn = document.getElementById("generate");
// Button to copy the text
const copyBtn = document.getElementById("copy-btn");
// Result viewbox container
const resultContainer = document.querySelector(".result");
// Text info showed after generate button is clicked
const copyInfo = document.querySelector(".result__info.right");
// Text appear after copy button is clicked
const copiedInfo = document.querySelector(".result__info.left");

// Update Css Props of the COPY button
// Getting the bounds of the result viewbox container
let resultContainerBound = {
	left: resultContainer.getBoundingClientRect().left,
	top: resultContainer.getBoundingClientRect().top,
};
// This will update the position of the copy button based on mouse Position
resultContainer.addEventListener("mousemove", e => {
	copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
	copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
});
window.addEventListener("resize", e => {
	resultContainerBound = {
		left: resultContainer.getBoundingClientRect().left,
		top: resultContainer.getBoundingClientRect().top,
	};
});

// Copy Password in 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 Generate is clicked Password id 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";
});

// Function responsible to generate 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);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console