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>Password Generator</h1>
    <div class="container">
        <h2>Generate a <span>Random Password</span></h2>
        <div class="display">
            <input type="text" id="password" placeholder="Password">
            <img src="./images/copy.png" alt="copy-img" onclick="copyPassword()">
        </div>
        <button><img src="./images/Thunder.png" alt="thunder-img" onclick="createPassword()">Generate Password</button>
    </div> 
    <script>
        const passwordBox = document.getElementById("password");
        const length = 8;
        const upperCase = "QWERTYUIOPASDFGHJKLZXCVBNM";
        const lowerCase = "qwertyuiopasdfghjklzxcvbnm";
        const number = "0123456789";
        const symbols = "!@#$%^&*()-_+=/.~";
        const allChars = upperCase + lowerCase + number + symbols;

        function createPassword() {
            let password = "";
            password += upperCase[Math.floor(Math.random() * upperCase.length)];
            password += lowerCase[Math.floor(Math.random() * lowerCase.length)];
            password += number[Math.floor(Math.random() * number.length)];
            password += symbols[Math.floor(Math.random() * symbols.length)];

            while(length > password.length) {
                password += allChars[Math.floor(Math.random() * allChars.length)];
            }
            passwordBox.value = password;

        }

        function copyPassword() {
            passwordBox.select();
            document.execCommand("copy");
        }


 
    </script>   
</body>
</html>