<main>
  <div>
    <div>
      <input id="copyText" type="text" placeholder="Write Here..">
      <button id="btn-copy">COPY</button>
    </div>
    <textarea name="name" id="name" cols="30" rows="10" placeholder="Paste Here.."></textarea>
  </div>
</main>

html, body{
  margin: 0;
  padding: 0;
}
main {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fdf0ed;
  color: #e8795d;
}
main > div {
  display: flex;
  flex-direction: column;
  position: relative;
}
main > div > div {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 10px;
}
textarea {
  background: #fdf0ed;
  padding: 1rem;
}
input {
  background: #fdf0ed;
  padding: 1rem;
  border: 1px solid #e8795d;
  width: 60%;
}
#btn-copy {
  padding: 1rem;
  background: #fdf0ed;
  color: #e8795d;
  border: 1px solid #e8795d;
  cursor: pointer;
  flex: 1;
  margin-left: 1rem;
}
#btn-copy:hover {
  background: #e8795d;
  color: #fdf0ed;
}

const button = document.getElementById("btn-copy");
const input = document.getElementById("copyText");

let copyText = "";
const withExecCopy = (text) => {
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand("copy");
    var msg = successful ? "successful" : "unsuccessful";
    console.log("Fallback: Copying text command was " + msg);
    text;
  } catch (err) {
    console.error("Fallback: Oops, unable to copy", err);
  }

  document.body.removeChild(textArea);
};

const withClipboardAPICopy = (text) => {
  navigator.clipboard.writeText(text).then(
    function () {
      console.log("Async: Copying to clipboard was successful!");
    },
    function (err) {
      console.error("Async: Could not copy text: ", err);
    }
  );
};

button.addEventListener("click", (e) => {
  button.textContent = "COPIED";

  setTimeout(() => {
    button.textContent = "COPY";
  }, 2000);

  // withClipboardAPICopy(copyText);
  withExecCopy(copyText);
});

input.addEventListener("change", (e) => {
  console.log(e.target.value);
  copyText = e.target.value;
});