<html>

<head>
    <title>JavaScript</title>
    <style>

    </style>
</head>

<body> Source Text
    <br>
    <textarea name="copyTxt" rows="3" cols="50">Hello World</textarea><br>
    <button class="moverBtn">Move Text</button>
    <button class="copyBtn">Copy Text</button>
    <br>
    <textarea name="finalTxt" rows="3" cols="50"></textarea>
    <div class="output"></div>
    <script>
        const copyTxt = document.querySelector("textarea[name=copyTxt]");
        const finalTxt = document.querySelector("textarea[name=finalTxt]");
        const moverBtn = document.querySelector(".moverBtn");
        const copyBtn = document.querySelector(".copyBtn");
        const output = document.querySelector(".output");
        moverBtn.addEventListener("click", moveText);
        copyBtn.addEventListener("click", copyText);
        finalTxt.addEventListener("click", selAll);
        copyTxt.addEventListener("click", selAll);

        function selAll() {
            this.select();
        }

        function copyText() {
            let temp = copyTxt.value;
            copytoClipBoard(temp);
        }

        function copytoClipBoard(str) {
            const textarea = document.createElement("textarea");
            textarea.value = str;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand("copy");
            document.body.removeChild(textarea);
            output.innerHTML = "<h3>Copied content</h3>" + textarea.value;
            console.log(textarea);
        }

        function moveText() {
            let temp = copyTxt.value;
            finalTxt.value = temp;
        }
    </script>
</body>

</html>