Nep Gyan

<!-- HTML Structure -->

<div style="position: relative; margin: 20px 0;">

    <!-- Copy Button -->

    <button onclick="copyToClipboard('code-block')" 

            style="position: absolute; top: 10px; right: 10px; padding: 5px 10px; cursor: pointer;">

        Copy

    </button>

    

    <!-- Code Block -->

    <pre id="code-block" style="background-color: #f4f4f4; padding: 20px; border-radius: 5px; overflow-x: auto;">

        <code>

            &lt;!-- Sample HTML Code --&gt;

            &lt;!DOCTYPE html&gt;

            &lt;html lang="en"&gt;

            &lt;head&gt;

                &lt;meta charset="UTF-8"&gt;

                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

                &lt;title&gt;Interactive Button Game&lt;/title&gt;

            &lt;/head&gt;

            &lt;body&gt;

                &lt;h1&gt;Are you ready to play?&lt;/h1&gt;

                &lt;button&gt;Click me&lt;/button&gt;

            &lt;/body&gt;

            &lt;/html&gt;

        </code>

    </pre>

</div>

<!-- JavaScript for Copy Functionality -->

<script>

function copyToClipboard(elementId) {

    // Get the code block text

    const codeBlock = document.getElementById(elementId).innerText;

    // Create a temporary textarea to hold the text

    const textarea = document.createElement("textarea");

    textarea.value = codeBlock;

    document.body.appendChild(textarea);

    // Select the text and copy it

    textarea.select();

    document.execCommand("copy");

    // Remove the temporary textarea

    document.body.removeChild(textarea);

    // Optional: Display a success message

    alert("Code copied to clipboard!");

}

</script>