JavaScript Clipboard Copy Function

const createClipboard = () => {
    // Private methods
    const copyUsingClipboardAPI = async (text) => {
        try {
            await navigator.clipboard.writeText(text);
            return { success: true, method: "Clipboard API" };
        } catch (err) {
            // Fallback to execCommand if Clipboard API fails
            return copyUsingExecCommand(text);
        }
    };

    const copyUsingExecCommand = (text) => {
        const tempTextArea = document.createElement("textarea");
        tempTextArea.value = text;
        document.body.appendChild(tempTextArea);
        try {
            tempTextArea.select();
            const success = document.execCommand("copy");
            return { success, method: "execCommand" };
        } catch (err) {
            console.error("execCommand failed:", err);
            return { success: false, method: "execCommand" };
        } finally {
            document.body.removeChild(tempTextArea);
        }
    };

    // Displays a temporary notification on the screen.
    const showNotification = (success, timeoutMs = 3000) => {
        const message = success ? 'Text copied to clipboard!' : 'Failed to copy text to clipboard.';
        const type = success ? 'success' : 'error';
        const notification = document.createElement('div');
        notification.textContent = message;
        notification.className = `copy-notification ${type}`;
        const notificationId = `copy-notification-${Date.now()}`;
        notification.id = notificationId;
        document.body.appendChild(notification);
        setTimeout(() => {
            const notifElement = document.getElementById(notificationId);
            if (notifElement) {
                notifElement.remove();
            }
        }, timeoutMs);
    };

    // Public methods
    return {
        /**
         * Copies the provided text to the clipboard.
         * @param {string|Object} text - The text to be copied. If an object is provided, it will be stringified.
         * @param {Object} [options] - Optional settings for the copy operation.
         *        {
         *            showNotification: false - {boolean} Whether to show a notification after the copy operation.
         *            notificationTimeout: 3000 - {number} Timeout in milliseconds for the notification to disappear.
         *            callback: () => {} - {Function} Callback function to be called with the result of the copy operation.
         *        }
         * @returns {Object} - An object containing the success status and the method used for copying.
         */
        copy: async (text, options = {}) => {
            // Set default values for options
            const showNotificationOption = options.showNotification !== false;
            const notificationTimeoutMs = options.notificationTimeout || 3000;
            const callback = options.callback;

            // Convert to string if the input is an object
            const textToCopy = typeof text === "object" ? JSON.stringify(text) : String(text);

            const result = await copyUsingClipboardAPI(textToCopy);

            // Handle notification
            if (showNotificationOption) {
                showNotification(result.success, notificationTimeoutMs);
            }

            // Handle callback
            if (typeof callback === 'function') {
                callback(result.success, result.method);
            }

            return result;
        }
    };
};

<div class="container">
    <h1>Clipboard Copy Demo</h1>
    <p>Try it out with this sample text</p>
    <textarea id="copy-text" placeholder="Type some text here...">This text will be copied to your clipboard!</textarea>
    <button id="copy-buuton">Copy Text</button>
</div>


<div class="container">
    <h1>Copy Text Content</h1>
    <p>Copy code tag text content</p>
    <pre id="copy-code-text"><code>const Clipboard = createClipboard();
Clipboard.copy("Hello, World!", {
    showNotification: false
    }
});</code></pre>
    <button id="copy-code-button">Copy Code</button>
</div>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: solid 1px #aaaa;
    margin-bottom: 50px;
}

h1 {
    text-align: center;
    color: #333;
}

textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

pre {
    background-color: #dfdfdf;
    display: inline-block;
    line-height: 1.5;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
}

.copy-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
    opacity: 0.9;
}

.copy-notification.error {
    background-color: #f44336;
}

// usage
const Clipboard = createClipboard();

const copyButton = document.getElementById("copy-buuton");
const textarea = document.getElementById("copy-text");

copyButton.addEventListener("click", () => {
    const copyText = textarea.value;
    Clipboard.copy(copyText, {
        // showNotification: false,
        // notificationTimeout: 5000,
        callback: (success) => {
            if (success) {
                console.log("Copy succeeded");
                // your code here
            } else {
                console.log("Copy failed");
            }
        }
    });
});


// usage code inner text copy
const copyCodeButton = document.getElementById("copy-code-button");
const preCode = document.getElementById("copy-code-text");

copyCodeButton.addEventListener("click", () => {
    const copyText = preCode.innerText;
    Clipboard.copy(copyText, {
        notificationTimeout: 1000, // 1 second
    });
});