<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PassWord Generator</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body>
    <div class="container">
        <h1>Password Generator</h1>
        <div class="inputBox">
            <input type="text" class="passBox" id="passBox" disabled>
            <span class="material-symbols-outlined" id="copyIcon">
                content_copy
                </span>
        </div>
        <input type="range" min="1" max="16" value="8" id="inputSlider">

        <div class="row">
            <p>Password Length</p>
            <span id="sliderValue"></span>
        </div>
        <div class="row">
           <label for="lowerCase">Include Lowercase (a-z)</label>
           <input type="checkbox" id="lowerCase" checked>
        </div>
        <div class="row">
           <label for="upperCase">Include Uppercase (A-Z)</label>
           <input type="checkbox" id="upperCase" checked>
        </div>
        <div class="row">
           <label for="specialChar">Include Symbols (#&@)</label>
           <input type="checkbox" id="specialChar" checked>
        </div>
        <div class="row">
           <label for="numbers">Include Numbers (0-9)</label>
           <input type="checkbox" id="numbers" checked>
        </div>
        <button type="button" id="btn">Generate Password</button>
    </div>

    <script src="script.js"></script>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right bottom, 
    #dbe6f6 ,
    #c5796d);
    color: #fff;
}

.container{
    display: flex;
    flex-direction: column;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 28px 32px;
    background: transparent;
    box-shadow: 10px 10px 5px  #835c56;
}

.container h1{
    font-weight: 800;
    font-size: 28px;
    margin: 8px auto;
    color: #000;
}
.inputBox{
    position: relative;
}
.inputBox span{
    position: absolute;
    top: 16px;
    right: 6px;
    color: #000;
    font-size: 28px;
    cursor: pointer;
}
.passBox{
    background: #fff;
    border: none;
    outline: none;
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    font-size: 24px;
    margin: 8px auto;
}

.row{
    display: flex;
    margin-block: 8px;
}
.row p, .row label{
    flex-basis: 100%;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}
.row input{
    width: 20px;
    height: 20px;
}
#btn{
    padding: 10px;
    border-radius: 5px;
    border: none;
    background: rgb(54, 54, 162);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-block: 8px;
    cursor: pointer;
}

#btn:hover{
    background: rgb(32, 32, 147);
}
let inputSlider = document.getElementById("inputSlider");
let passBox = document.getElementById("passBox");
let sliderVal = document.getElementById("sliderValue");
let lowerCase = document.getElementById("lowerCase");
let upperCase = document.getElementById("upperCase");
let symbols = document.getElementById("specialChar");
let num = document.getElementById("numbers");
let btn = document.getElementById("btn");
let copyIcon = document.getElementById("copyIcon");

sliderVal.textContent = inputSlider.value;
inputSlider.addEventListener("input", () => {
  sliderVal.textContent = inputSlider.value;
});

btn.addEventListener("click", () => {
  passBox.value = generatePassword();
});

let lowercase = "abcdefghijklmnopqrstuvwxyz";
let uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allSymbols = "~!#$%^&*";
let allNumbers = "0123456789";

function generatePassword() {
  let genPass = "";
  let allChars = "";

  allChars += lowerCase.checked ? lowercase : "";
  allChars += upperCase.checked ? uppercase : "";
  allChars += symbols.checked ? allSymbols : "";
  allChars += num.checked ? allNumbers : "";

  if (allChars == "" || allChars.length == 0) {
    return genPass;
  }

  let i = 1;
  while (i <= inputSlider.value) {
    genPass += allChars.charAt(Math.floor(Math.random() * allChars.length));
    i++;
  }
  return genPass;
}

copyIcon.addEventListener('click', ()=>{
    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)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.