index.html

<!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="styles.css">
</head>
<body>


    <h1 class="header">Generate Password</h1>
    
    <div class="char-lists">
        <h3>Include Characters</h3>
        <ul>
            <li>
                <input type="checkbox" name="list-number" id="list-number" checked="checked">
                <label for="list-number"> Number [0-9]</label><br>
            </li>
            <li>
                <input type="checkbox" name="list-lower" id="list-lower" checked="checked">
                <label for="list-lower"> Lower Case [a-z]</label><br>
            </li>
            <li>
                <input type="checkbox" name="list-upper" id="list-upper" checked="checked">
                <label for="list-upper"> Upper Case [A-Z]</label><br>
            </li>
            <li>
                <input type="checkbox" name="list-special" id="list-special" checked="checked">
                <label for="list-special"> Special [!@&$*]</label><br>
            </li>
        </ul>
    </div>

    <div class="pass-length">
        <h3>Choose Length</h3>
        <div><input type="range" min="1" max="20" value="16" class="slider-color" id="slider"></div>
        <div><span id="sliderOutput">0</span></div>
    </div>

     <button class="generate-button" onclick="generatePassword()">Generate</button>
    
    <button id="password" onclick="copyToClipboard(this)"></button>

    <div id="copied-password"></div>





    <script src="password.js" charset="utf-8"></script>
</body>
</html>