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

body{
max-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right bottom, #ffa585, #45c);
color: #fff;
font-weight: 600;
}

.container{
border: 0.5px solid #fff;
border-radius: 10px;
padding: 28px 32px;
display: flex;

flex-direction: column;
background: transparent;
box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}

.container h1{
font-size: 1.4rem;
margin-block: 8px;
}
.inputBox{
position: relative;
}

.inputBox i{
position: absolute;
top: 16px;
right: 6px;
color: #000;
font-size: 28px;
cursor: pointer;
z-index: 2;
}
.passBox{
background-color: #fff;
border: none;
outline: none;
padding: 10px;
width: 300px;
border-radius: 4px;
font-size: 20px;
margin-block: 8px;
text-overflow: ellipsis;
}

.row{
display: flex;
margin-block: 8px;
}

.row p, .row label{
flex-basis: 100%;
font-size: 18px;
}

.row input[type=”checkbox”]{
width: 20px;
height: 20px;
}

.genBtn{
border: none;
outline: none;
background-color: #2c619e;
padding: 12px 24px;
color: #fff;
font-size: 18px;
margin-block: 8px;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
}

.genBtn:hover{
background-color: #0066ff;
}
.preloader
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #fff;
z-index: 9999;
text-align: center;
}
.preloader-icon
{
position: relative;
top: 45%;
width: 100px;
border-radius: 50%;
animation: shake 1.5s infinite;
}
span{
color: blue
}
@keyframes shake
{
0% { transform: translate(1px, -1px) rotate(0deg);}
10% { transform: translate(1px, -3px) rotate(-1deg);}
20% { transform: translate(1px, -5px) rotate(-3deg);}
30% { transform: translate(1px, -7px) rotate(0deg);}
40% { transform: translate(1px, -9px) rotate(1deg);}
50% { transform: translate(1px, -11px) rotate(3deg);}
60% { transform: translate(1px, -9px) rotate(0deg);}
70% { transform: translate(1px, -7px) rotate(-1deg);}
80% { transform: translate(1px, -5px) rotate(-3deg);}
90% { transform: translate(1px, -3px) rotate(0deg);}
100% { transform: translate(1px, -1px) rotate(-1deg);}
}

let inputSlider = document.getElementById(“inputSlider”);
let sliderValue = document.getElementById(“sliderValue”);
let passBox = document.getElementById(“passBox”);
let lowercase = document.getElementById(“lowercase”);
let uppercase = document.getElementById(“uppercase”);
let numbers = document.getElementById(“numbers”);
let symbols = document.getElementById(“symbols”);
let genBtn = document.getElementById(“genBtn”);
let copyIcon = document.getElementById(“copyIcon”);

// Showing input slider value
sliderValue.textContent = inputSlider.value;
inputSlider.addEventListener(‘input’, ()=>{
sliderValue.textContent = inputSlider.value;
});

genBtn.addEventListener(‘click’, ()=>{
passBox.value = generatePassword();
})

let lowerChars = “abcdefghijklmnopqrstuvwxyz”;
let upperChars = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
let allNumbers = “0123456789”;
let allSymbols = “~!@#$%^&*”;

// Function to generate Password
function generatePassword(){
let genPassword = “”;
let allChars = “”;

allChars += lowercase.checked ? lowerChars : “”;
allChars += uppercase.checked ? upperChars : “”;
allChars += numbers.checked ? allNumbers : “”;
allChars += symbols.checked ? allSymbols : “”;

if(allChars == “” || allChars.length == 0){
return genPassword;
}

let i = 1;
while(i{
if(passBox.value != “” || passBox.value.length >=1){
navigator.clipboard.writeText(passBox.value);
copyIcon.innerText = “check”;
copyIcon.title = “Password Copied”;

setTimeout(()=>{
copyIcon.innerHTML = “content_copy”;
copyIcon.title = “”;
}, 3000)
}
});

window.onload = function(){ document.querySelector(“.preloader”).style.display = “none”; }

https://kit.fontawesome.com/9822b0d2f7.js