sdsad

By manoj , 18 March, 2025

functionality works for all instances, you need to make the code reusable. Instead of using id attributes (which must be unique), you should use class attributes and loop through all instances of the code snippets.

Here’s how you can modify the code to support multiple code snippets on the same page:

Updated HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Code Snippets with Copy Button</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- First Code Snippet -->
    <div class="code-snippet">
        <pre><code class="code">const greeting = "Hello, World!";
console.log(greeting);</code></pre>
        <button class="copy-button">Copy</button>
    </div>

    <!-- Second Code Snippet -->
    <div class="code-snippet">
        <pre><code class="code">const sum = (a, b) => a + b;
console.log(sum(2, 3));</code></pre>
        <button class="copy-button">Copy</button>
    </div>

    <!-- Third Code Snippet -->
    <div class="code-snippet">
        <pre><code class="code">const multiply = (a, b) => a * b;
console.log(multiply(2, 3));</code></pre>
        <button class="copy-button">Copy</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

Run HTML

Updated CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.code-snippet {
    position: relative;
    background-color: #282c34;
    color: #abb2bf;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    margin-bottom: 20px; /* Add spacing between snippets */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

pre {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
}

.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #61dafb;
    color: #282c34;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.copy-button:hover {
    background-color: #4fa8c7;
}

.copy-button.copied {
    background-color: #4caf50; /* Green color for feedback */
}

Updated JavaScript (script.js):

// Select all copy buttons and code elements
const copyButtons = document.querySelectorAll('.copy-button');

copyButtons.forEach((button) => {
    button.addEventListener('click', function () {
        // Find the code element within the same code-snippet container
        const code = button.closest('.code-snippet').querySelector('.code').innerText;

        // Copy the code to the clipboard
        navigator.clipboard.writeText(code).then(() => {
            // Change button text to "Copied!"
            button.textContent = 'Copied!';
            button.classList.add('copied'); // Add a class for styling (optional)

            // Revert the button text back to "Copy" after 2 seconds
            setTimeout(() => {
                button.textContent = 'Copy';
                button.classList.remove('copied'); // Remove the class (optional)
            }, 2000); // 2000 milliseconds = 2 seconds
        }).catch((err) => {
            console.error('Failed to copy: ', err);
        });
    });
});

Explanation of Changes:

HTML:
- Replaced id attributes with class attributes (code-snippet, code, and copy-button) to allow multiple instances.
- Added multiple code snippets to the page.
CSS:
- No major changes, except for adding margin-bottom to .code-snippet to space out the snippets.
JavaScript:
- Used document.querySelectorAll to select all buttons with the class .copy-button.
- Looped through each button using forEach and added an event listener to handle the copy functionality.
- Used closest('.code-snippet') to find the parent container of the button and then located the corresponding .code element within that container.

How It Works:

Each code snippet is independent, and the copy button works for all instances.
When a copy button is clicked, it copies the code from the corresponding snippet and changes the button text to "Copied!".
After 2 seconds, the button text reverts to "Copy".

Example Output:

You can now add as many code snippets as you want, and each one will have its own working copy button!

Standard (Image)

General Purpose