<!-- ----------- Created by InCoder ----------- -->
<!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">
  <title>Copy to Clipboard - InCoder</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <h2>Copy to Clipboard</h2>
      <textarea class="textToCopy" placeholder="Enter text to Copy" cols="40" rows="5"></textarea>
      <div class="btn">
        <button class="inBtn inBtn-primary copyBtn">Copy to Clipboard</button>
      </div>
    </div>
    <div class="footer">
      <textarea class="pasteCopiedText" placeholder="Test Copied text here" cols="40" rows="5"></textarea>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).val().trim()).select();
      document.execCommand("copy");
      $temp.remove();
    }
    $('.copyBtn').click(function() {
      copyToClipboard('.textToCopy');
      $('.pasteCopiedText').focus();
      $('.inBtn').html('COPIED');
      setInterval(function() {
        $('.inBtn').html('Copy to Clipboard');
      }, 1500);
    });
  </script>
</body>

</html>
/* ----------- Created by InCoder ----------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  background: #7030a3;
  justify-content: center;
}

.wrapper {
  width: 30rem;
  /* height: 20rem; */
  border-radius: 8px;
  background-color: #fff;
  margin: 10px 15px 10px 18px;
}

textarea {
  width: 92%;
  display: flex;
  outline: none;
  margin-top: 1rem;
  margin-left: auto;
  border-radius: 3px;
  margin-right: auto;
  margin-bottom: 28px;
  justify-content: center;
  padding: 4px 0px 0px 4px;
  border: 2px solid #515151;
}

.header button {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

textarea:focus-visible {
  border: 2px solid #7030a3 !important;
}

.header h2 {
  text-align: center;
  margin-top: 0.5rem;
}

.inBtn {
  color: #fff;
  outline: none;
  font-size: 15px;
  cursor: pointer;
  margin-top: 1rem;
  user-select: auto;
  padding: 6px 12px;
  border-radius: 5px;
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.inBtn:hover {
  background-color: #202020;
  border: 2px solid #202020;
}

.inBtn-primary {
  border: 2px solid #7030a3;
  background: #7030a3;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.