index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Random Password Generator</title>
</head>
<body>
    <div class="inputField">
        <h2>Random Password Generator</h2>
        <input type="text" name="" placeholder="Create Password" id="password" readonly="">
        <div id="btn" onclick="getPassword()">Generate Password</div>
        <div id="copyBtn">Copy</div>
    </div>
<div id="myModal" class="modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Random Password Generator</h5>
      </div>
      <div class="modal-body">
        <p>Password Copied.</p>
      </div>
      <div class="modal-footer">
        <button type="button" onclick="closeBtn()" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">

    function getPassword(){
        var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.+-*~`!@#$%^&()_+=<?>:{}[]"
        
        var passwordLenght = 16;
        var password ="";

        for(var i=0; i<passwordLenght; i++){
            var randomNumber = Math.floor(Math.random()* chars.length);
            password += chars.substring(randomNumber,randomNumber+1);
        }
        document.getElementById("password").value = password
    }

    var modal = document.getElementById("myModal");
    var btn = document.getElementById("copyBtn");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() {
    modal.style.display = "block";
    var copyPassword = document.getElementById("password");
    copyPassword.select();
    copyPassword.setSelectionRange(0,999);
    document.execCommand("copy");
    }

    span.onclick = function() {
    modal.style.display = "none";
    }

    window.onclick = function(event) {
     if (event.target == modal) {
      modal.style.display = "none";
      }
    }
    
    function closeBtn(){
        modal.style.display = "none";
    }

</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>