Password Generator Using JavaScript, HTML & CSS

<div class="container">        <h2>Random Password </h2>        <div class="result-container">            <span id="result"></span>            <button class="btn" id="clipboard">                <i class="fa fa-clipboard"></i>            </button>        </div>        <div class="settings">            <div class="setting all">                <div class="length range__slider">            <div class="length__title field-title">length:</div>                 <input type="range" id="length" min='4' max='20' value='20' />                <!--<input id="length" type="range" min="4" max="32" value="16" />-->            </div>            </div>            <div class="setting">                <label>Include uppercase letters</label>                 <input type="checkbox" id="uppercase" checked />            </div>            <div class="setting">                <label>Include lowercase letters</label>                 <input type="checkbox" id="lowercase" checked />            </div>            <div class="setting">                <label>Include numbers</label>                 <input type="checkbox" id="numbers" checked />            </div>            <div class="setting">                <label>Include symbols</label>                 <input type="checkbox" id="symbols" checked />            </div>        </div>        <button class="btn btn-large" id="generate">            Generate password        </button>    </div>

*{  box-sizing: border-box;}body{  background-color: #2f2f68;  color: #fff;  display: flex;  font-family: 'Muli',sans-serif;  flex-direction: column;  align-items: center;  justify-content: center;  padding: 10px;  min-height: 100vh;}.container{  background-color: #021929;  box-shadow: 0px 3px 13px rgba(255,255,255,0.2);  padding: 20px;  width: 350px;  max-height: 100%;}h2{  margin: 10px 0 20px;  text-align: center;}.result-container{  background-color: rgb(31,32,37);  display: flex;  justify-content: flex-start;  align-items: center;  position: relative;  height: 50px;  width: 100%;  padding: 12px 10px;  letter-spacing: 1px;  font-size: 18px;}.result-container .btn{  font-size: 20px;  position: absolute;  top: 5px;  right: 5px;  height: 40px;  width: 40px;}.btn{  border: none;  color: #fff;  cursor: pointer;  font-size: 16px;  padding: 8px 12px;  background-color: #0d66a1;}.btn-large{  display: block;  width: 100%;}.setting{  display: flex;  justify-content: space-between;  align-items: center;  margin: 15px 0;}.all{  justify-content: center;  align-items: center;}.range__slider{  position: relative;  width: 90%;  background: rgba(255,255,255,0.08);  border-radius: 8px;  margin: 13px 0;  height: calc(65px - 30px);  display: flex;  justify-content: center;  align-items: center;}#length{  -webkit-appearance:none;  width: calc(100% - (70px));  height: 2px;  border-radius: 5px;  background: rgba(255,255,255,0.314);  outline: none;  margin: 0;  cursor: pointer;}.field-title{  position: absolute;  top: -10px;  left: -15px;  transform: translateY(-50%);  font-size: 0.65rem;  pointer-events: none;  user-select: none;  text-transform: uppercase;  color: rgba(255, 254, 254, 0.973);  font-weight: 700;}

const resultEl = document.getElementById('result');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 clipboard = document.getElementById('clipboard');const randomFunc = {    lower: getRandomLower,    upper: getRandomUpper,    number: getRandomNumber,    symbol: getRandomSymbol}clipboard.addEventListener('click', () => {    const textarea = document.createElement('textarea');    const password = resultEl.innerText;    if(!password) { return; }    textarea.value = password;    document.body.appendChild(textarea);    textarea.select();    document.execCommand('copy');    textarea.remove();    alert('Password copied to clipboard');});generate.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]);    // Doesn't have a selected type    if(typesCount === 0) {        return '';    }    // create a loop    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(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)];}