<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Password Generator</title>
</head>
<body>
<div class="container">
<h2>Password Generator</h2>
<div class="result-container">
<span id="targetElement"></span>
<button class="btn" id="clipboard">
<span>
<i class="far fa-clipboard"></i>
</span>
<span>Copied</span>
</button>
</div>
<div class="settings">
<div class="setting">
<label>Password Length</label>
<input type="number" id="length" min="4" max="20" value="8">
</div>
<div class="setting">
<label>Include uppercase letters</label>
<input class="check" type="checkbox" id="uppercase" checked>
</div>
<div class="setting">
<label>Include lowercase letters</label>
<input class="check" type="checkbox" id="lowercase" checked>
</div>
<div class="setting">
<label>Include numbers</label>
<input class="check" type="checkbox" id="numbers" checked>
</div>
<div class="setting">
<label>Include symbol</label>
<input class="check" type="checkbox" id="symbols" checked>
</div>
</div>
<button class="btn-large" id="generate">
Generate Password</button>
</div>
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
* {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
body {
background: rgb(12, 10, 43);
background: linear-gradient(
0deg,
rgba(12, 10, 43, 1) 3%,
rgba(0, 0, 0, 1) 91%,
rgba(0, 0, 0, 1) 100%
);
color: #fff;
opacity: 0.9;
font-family: "Muli", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
padding: 10px;
margin: 0;
transition: all 1s ease;
}
h2 {
margin: 10px 0 20px;
text-align: center;
}
.container {
background-color: #23235b;
padding: 20px;
width: 95%;
max-width: 600px;
border-radius: 1rem;
}
.result-container {
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
font-size: 18px;
letter-spacing: 1px;
padding: 12px 10px;
height: 50px;
width: 100%;
border-radius: 1rem;
overflow: hidden;
}
.result-container #result {
word-wrap: break-word;
max-width: calc(100% - 40px);
overflow-y: scroll;
height: 100%;
}
#result::-webkit-scrollbar {
width: 1rem;
}
.result-container .btn {
position: absolute;
top: 5px;
right: 5px;
width: 40px;
height: 40px;
}
.btn-large {
border: none;
background-color: #3b3b98;
color: #fff;
font-size: 16px;
padding: 8px 12px;
cursor: pointer;
border-radius: 1rem;
transition: all 0.3s ease;
display: block;
width: 100%;
font-weight: bold;
}
.btn-large:active {
background-color: #000000;
}
.far {
color: #ffffff;
font-size: 18px;
}
.setting {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
height: 2rem;
width: 100%;
border-radius: 0.5rem;
background-color: rgba(0, 0, 0, 0.4);
}
#length {
border: none;
background-color: #3b3b98;
color: #fff;
font-size: 18px;
cursor: pointer;
border-radius: 0.5rem;
margin: 1.5%;
text-align: center;
outline: none;
transition: 0.2s ease-in-out;
}
#length:active {
box-shadow: 0 0 0 2px #756eff;
}
label {
font-size: 16.5px;
margin-left: 3%;
}
.check {
margin-right: 3%;
}
/* From Uiverse.io by fabiodevbr */
.btn {
background-color: #3b3b98;
width: 50px;
height: 40px;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
transition-duration: 700ms;
}
.btn span:first-child {
color: #0e418f;
position: absolute;
transform: translate(-50%, -50%);
}
.btn span:last-child {
position: absolute;
color: #b5ccf3;
opacity: 0;
transform: translateY(100%) translateX(-50%);
height: 14px;
line-height: 13px;
}
.btn:focus {
background-color: #0e418f;
width: 70px;
height: 40px;
transition-delay: 100ms;
transition-duration: 500ms;
}
.btn:focus span:first-child {
color: #b5ccf3;
transform: translateX(-50%) translateY(-150%);
opacity: 0;
transition-duration: 500ms;
}
.btn:focus span:last-child {
transform: translateX(-50%) translateY(-50%);
opacity: 1;
transition-delay: 300ms;
transition-duration: 500ms;
}
.btn:focus:end {
background-color: #ffffff;
width: 70px;
height: 40px;
transition-duration: 900ms;
}
const resultEl = document.getElementById("targetElement");
const lengthEl = document.getElementById("length");
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numbersEl = document.getElementById("numbers");
const symbolsEl = document.getElementById("symbols");
const generateEl = document.getElementById("generate");
const clipboardEl = document.getElementById("clipboard");
const randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumber,
symbol: getRandomSymbol
};
clipboardEl.addEventListener("click", () => {
const password = resultEl.innerText;
if (!password) {
return;
}
navigator.clipboard.writeText(password);
});
generateEl.addEventListener("click", () => {
const length = +lengthEl.value;
const hasLower = lowercaseEl.checked;
const hasUpper = uppercaseEl.checked;
const hasNumber = numbersEl.checked;
const hasSymbol = symbolsEl.checked;
resultEl.innerText = generatePassword(
hasLower,
hasUpper,
hasNumber,
hasSymbol,
length
);
});
function generatePassword(lower, upper, number, symbol, length) {
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 += typesCount) {
typesArr.forEach((type) => {
const funcName = Object.keys(type)[0];
generatedPassword += randomFunc[funcName]();
});
}
const finalPassword = generatedPassword.slice(0, length);
return finalPassword;
}
function getRandomLower() {
return String.fromCharCode(
(window.crypto.getRandomValues(new Uint8Array(1))[0] % 26) + 97
);
}
function getRandomUpper() {
return String.fromCharCode(
(window.crypto.getRandomValues(new Uint8Array(1))[0] % 26) + 65
);
}
function getRandomNumber() {
return String.fromCharCode(
(window.crypto.getRandomValues(new Uint8Array(1))[0] % 10) + 48
);
}
function getRandomSymbol() {
const symbols = "!@#$%^&*(){}[]=<>/,.";
return symbols[
window.crypto.getRandomValues(new Uint8Array(1))[0] % symbols.length
];
}
lengthEl.addEventListener("input", () => {
const lengthValue = +lengthEl.value;
if (lengthValue >= 10) {
lengthEl.style.color = "#00F504";
} else if (lengthValue >= 6) {
lengthEl.style.color = "#F57E00";
} else {
lengthEl.style.color = "#F50000";
}
});
generateEl.addEventListener("click", () => {
const length = +lengthEl.value;
const hasLower = lowercaseEl.checked;
const hasUpper = uppercaseEl.checked;
const hasNumber = numbersEl.checked;
const hasSymbol = symbolsEl.checked;
const generatedPassword = generatePassword(
hasLower,
hasUpper,
hasNumber,
hasSymbol,
length
);
resultEl.innerText = generatedPassword;
if (generatedPassword.length >= 8) {
resultEl.style.color = "#00F504";
} else if (generatedPassword.length >= 6) {
resultEl.style.color = "#F57E00";
} else {
resultEl.style.color = "#F50000";
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.