UI password generator component

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Password Generator App</title>
<link rel="stylesheet" href="index.css">
<script type="module" src="index.js"></script>
</head>
<body>
<div class="container">
<div class="title">Password Generator</div>
</div>
</body>
</html>
body {
background: black;
color: #cbcbcb;
font-weight: bold;
font-size: 15px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 400px;
}
<div class="password-block">
<div id="password">#P4^^ASWNU</div>
<img src="../assets/copy.svg" alt="copy image" id="copy-image">
</div>
.block {
background: #343434;
border-radius: 2px;
padding: 10px;
margin-top: 10px;
}
.password-block {
display: flex;
align-items: center;
margin-top: 20px;
justify-content: space-between;
}
#password {
color: #6c6c6c;
font-size: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>
<div class="password-length-header-block">
<label>Character Length</label>
<label id="password-length">10</label>
</div>
<div>
<input type="range" min="0" max="20" value="10"/>
</div>
</div>
.password-length-header-block {
display: flex;
justify-content: space-between;
font-size: 20px;
letter-spacing: 2px;
color: #b2b2b2;
}
#password-length {
font-size: 30px;
color: #80eda7;
}
input[type="range"] {
-webkit-appearance: none;
margin-right: 10px;
width: 100%;
height: 4px;
background: black;
border-radius: 5px;
background-image: linear-gradient(#80eda7, #80eda7);
background-size: 48% 100%;
background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: white;
cursor: ew-resize;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
<div class="option-block">
<input id="uppercase" type="checkbox" name="uppercase" />
<label style="word-wrap:break-word">Include Uppercase letters</label>
</div>
<div class="option-block">
<input id="lowercase" type="checkbox" name="lowercase" />
<label style="word-wrap:break-word">Include Lowercase letters</label>
</div>
<div class="option-block">
<input id="numbers" type="checkbox" name="numbers" />
<label style="word-wrap:break-word">Include Numbers</label>
</div>
<div class="option-block">
<input id="symbols" type="checkbox" name="symbols" />
<label style="word-wrap:break-word">Include Symbols</label>
</div>
input[type="checkbox"]:checked {
accent-color: #80eda7;
}
<div id="button-container">
GENERATE ->
</div>
#button-container {
background: #80eda7;
height: 50px;
border-radius: 2px;
margin-top: 10px;
color: black;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
const D = document;

const $isUppercase = D.getElementById("uppercase");
const $isLowercase = D.getElementById("lowercase");
const $isNumbers = D.getElementById("numbers");
const $isSymbols = D.getElementById("symbols");
const $password = D.getElementById("password");
let $passwordLength = D.getElementById("password-length");
const $generateBtn = D.getElementById("button-container");
const $copyBtn = D.getElementById("copy-image");
const $rangeInputs = D.querySelectorAll('input[type="range"]')
$generateBtn.onclick = () => generatePassword();
$copyBtn.onclick = () => copyPassword();
function generatePassword() {
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

if ($isUppercase.checked) {
chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
}
if ($isLowercase.checked) {
chars += "abcdefghijklmnopqrstuvwxyz";
}
if ($isNumbers.checked) {
chars += "0123456789";
}
if ($isSymbols.checked) {
chars += "!@#$%^&*()";
}
let passwordNewGenerated = "";
for (let i = 0; i <= $passwordLength.innerText; i++) {
const randomNumber = Math.floor(Math.random() * chars.length);
passwordNewGenerated += chars.substring(randomNumber, randomNumber +1);
}
$password.innerText = passwordNewGenerated;
};
function handleInputChange(e) {
let target = e.target;
const min = target.min;
const max = target.max;
const val = target.value;
target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%';
$passwordLength.innerText = val;
}

$rangeInputs.forEach(input => {
input.addEventListener('input', handleInputChange)
})
function copyPassword() {
navigator.clipboard.writeText($password.innerText);
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store