index.html

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width intial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <h1>Generate a<br><span>Random Password</span></h1>
            <div class="display">
                <input type="text" id="password" placeholder="Password">
                <img src="copy.png"onclick="copyPassword()">
            </div>
            <button onclick="createPassword()"><img src="generate.png"> Password</button>
        </div>
        <script>
            const passwordBox=document.getElementById("password");
            const length=12;

            const upperCase="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            const lowerCase="abcdefghijklmnopqrstuvwxyz";
            const number="0123456789";
            const symbol="@#$%^&*()_+|}{[]></-=";

            const allChars=upperCase+lowerCase+number+symbol;

            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+=symbol[Math.floor(Math.random()*symbol.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>